Language/Javascript

parentElement, parentNode

Seogineer 2020. 12. 26. 23:15
반응형

parentElement

부모 element를 가져온다.

parentNode

부모 element를 가져온다.

소스코드

<form>
  <input class="param" id="param1" value="seogineer" /><br>
  <input class="param" id="param2" value="" /><br>
  <button>button</button>
</form>

let el = document.getElementById('param1').parentElement;
console.log(el);

let el2 = document.getElementById('param1').parentNode;
console.log(el2);

결과

차이점

  • parentElement: 부모 element 노드를 반환.
    부모 element 노드가 더이상 없을 경우 null 반환한다.
  • parentNode: 종류에 상관없이 부모 노드를 반환.
  • parentElement는 <html>까지 거슬러 올라가고, document까지 가고 싶지 않을 때 사용.

소스코드

console.log(document.documentElement.parentNode);
console.log(document.documentElement.parentElement);

결과

참조

https://ko.javascript.info/dom-navigation
https://gafani.tistory.com/entry/javascript-%EB%B6%80%EB%AA%A8-%EC%97%98%EB%A6%AC%EB%A8%BC%ED%8A%B8%EB%85%B8%EB%93%9C
https://www.w3schools.com/jsref/prop_node_parentnode.asp
https://www.w3schools.com/jsref/prop_node_parentelement.asp

반응형