HOWTO · JavaScript
자바스크립트 부모 가져오기
HTML 구조를 추적하기 위해 JavaScript에는 하위 노드와 상위 노드 및 요소를 파악하는 속성이 있습니다. 특히 부모 요소를 검색하려면 parentNode 및 parentElement 속성이 매우 편리합니다.
JavaScript에서 상위 요소의 이름과 세부 정보를 가져오는 속성은 parentNode 및 parentElement입니다. 이 두 속성은 부모 노드를 정의하는 데 있어 동일한 역할을 하지만 성능은 약간 다릅니다.
parentElement는 지정된 구조의 상위 요소 결과에만 초점을 맞추는 읽기 전용 속성입니다. 반대로 parentNode는 문서 트리 노드 중 하나를 나타내는 개체 노드를 그리는 읽기 전용 속성이기도 합니다.
parentNode 및 parentElement 속성을 사용하여 부모 가져오기
이 예제에서는 HTML 구조의 부모를 얻기 위해 두 속성의 동작을 검사합니다. 차이점을 정의하면 표시할 한 가지 예외가 있습니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<script>
console.log(document.documentElement.parentNode);
console.log(document.documentElement.parentElement);
</script>
</body>
</html>
출력:
![parentNode 및 parentElement Properties1로 부모 가져오기](</img/JavaScript/parentNode 및 parentElement Properties1.png>로 부모 가져오기
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<script>
console.log(document.documentElement.parentNode.nodeName);
console.log(document.documentElement.parentElement.nodeName);
</script>
</body>
</html>
출력:
![parentNode 및 parentElement Properties2로 부모 가져오기](</img/JavaScript/parentNode 및 parentElement Properties2.png>로 부모 가져오기
보시다시피 parentNode 속성에는 출력 노드로 #documenet이 있지만 parentElement는 null을 제공합니다. 또한 노드 이름을 추출하려고 할 때 parentElement에 대해 TypeError를 수신했습니다.
parentNode 속성을 사용하여 부모 가져오기
계층 구조 트리에서 직계 부모를 가져오는 데 자식 인스턴스를 사용할 수 있음을 보여주는 인스턴스를 만들어 봅시다. 중첩된 div 구조를 사용하고 마지막으로 명시된 div 요소를 자식으로 사용합니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="parent">
<div id="p2">
<div id="child"></div>
</div>
</div>
<script>
var ch=document.getElementById("child");
console.log(ch.parentNode.nodeName);
console.log(ch.parentNode);
</script>
</body>
</html>
출력:
데모를 위해 노드 이름과 노드 자체가 있습니다. 선택한 부모는 id-p2가 있는 부모입니다.
parentElement 속성을 사용하여 부모 가져오기
이 예제는 선택한 하위 요소 인스턴스의 바로 상위 요소를 가져옵니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul>
<li id="child"></li>
</ul>
<script>
var ch=document.getElementById("child");
console.log(ch.parentElement.nodeName);
</script>
</body>
</html>
출력:
