programing

DOM parentNode와 parentElement의 차이점

nicescript 2023. 1. 13. 20:00
반응형

DOM parentNode와 parentElement의 차이점

기존 DOM parentNode와 Firefox 9 parentElement에서 새롭게 도입된 DOM parentNode의 차이점은 무엇인지 간단히 설명해 주시겠습니까?

parentElement파이어폭스9 및 DOM4에서는 새로운 버전이지만, 그 외의 모든 주요 브라우저에서는 오랫동안 존재해 왔습니다.

대부분의 경우 다음과 같습니다.parentNode. 유일한 차이점은 노드의 네트워크와parentNode요소가 아닙니다.그렇다면,parentElementnull.

예를 들어 다음과 같습니다.

document.body.parentNode; // the <html> element
document.body.parentElement; // the <html> element

document.documentElement.parentNode; // the document node
document.documentElement.parentElement; // null

(document.documentElement.parentNode === document);  // true
(document.documentElement.parentElement === document);  // false

그 이후로는<html>요소(document.documentElement)에는 요소가 되는 부모가 없습니다.parentElementnull(그 밖에도 가능성이 낮은 경우가 있습니다.parentElement그럴 수도 있겠지요null하지만 아마 그런 일은 없을 겁니다.)

Internet Explorer에서parentElementSVG 요소에는 정의되어 있지 않습니다만,parentNode정의되어 있습니다.

사용하다.parentElement문서 조각을 사용하지 않는 한 문제가 발생하지 않습니다.

문서 조각을 사용하는 경우,.parentNode:

let div = document.createDocumentFragment().appendChild(document.createElement('div'));
div.parentElement // null
div.parentNode // document fragment

기타:

let div = document.getElementById('t').content.firstChild
console.log(div.parentElement)  // null
console.log(div.parentNode)     // document fragment
<template id="t"><div></div></template>


보아하니 그<html>.parentNode링크를 클릭합니다.노드는 문서에 포함되도록 정의되어 있고 문서는 문서에 포함시킬 수 없기 때문에 문서는 노드가 아니기 때문에 이는 의사 결정 페이일로 간주해야 합니다.

nextSiblingnextElementSibling과 마찬가지로 이름에 "element"가 있는 속성은 항상 반환됩니다.Element또는null. 이 없는 속성은 다른 종류의 노드를 반환할 수 있습니다.

console.log(document.body.parentElement, "is body's parent element");//<html>
console.log(document.body.parentNode, "is body's parent node");      //<html>

var html = document.body.parentElement;
console.log(html.parentElement, "is html's parent element");         //null
console.log(html.parentNode, "is html's parent node");               //document

한가지 더 다른 점이 있지만, 오직 인터넷 익스플로러에서만 다릅니다.HTML과 SVG를 혼재시킬 때 발생합니다.부모가 이들 2개의 '기타'인 경우 .parentNode는 부모에게, .parentElement는 정의되어 있지 않습니다.

언급URL : https://stackoverflow.com/questions/8685739/difference-between-dom-parentnode-and-parentelement

반응형