[javascript] DOM parentNode와 parentElement의 차이점
누군가가 가능한 한 간단한 용어로 나를 설명 할 수 있습니까? 고전적인 DOM parentNode 와 Firefox 9 parentElement 에서 새로 도입 된 것의 차이점은 무엇입니까?
답변
parentElement Firefox 9 및 DOM4에 새로 추가되었지만 다른 모든 주요 브라우저에 오랫동안 사용되었습니다.
대부분의 경우와 같습니다 parentNode. 노드 parentNode가 요소가 아닌 경우 유일한 차이점이 있습니다. 그렇다면 parentElement입니다 null.
예로서:
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) 요소는 부모없는, parentElement이다 null. (이 다른, 더 가능성, 케이스입니다 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
div.parentElement // null
div.parentNode // document fragment<template id="t"><div></div></template>분명히 <html>‘의 .parentNode받는 링크 문서 . 노드 는 문서로 포함 가능하도록 정의 되고 문서는 문서로 포함 할 수 없으므로 문서 가 노드 가 아니므로 의사 결정 단계로 간주해야합니다 .
답변
단지와 같이 로 nextSibling 및 nextElementSibling , 그냥 항상 이름에 “요소”와 속성을 반환 기억 Element또는 null. 없는 속성은 다른 종류의 노드를 반환 할 수 있습니다.
console.log(document.body.parentNode, "is body's parent node"); // returns <html>
console.log(document.body.parentElement, "is body's parent element"); // returns <html>
var html = document.body.parentElement;
console.log(html.parentNode, "is html's parent node"); // returns document
console.log(html.parentElement, "is html's parent element"); // returns null답변
인터넷 익스플로러에서만 차이가 있습니다. HTML과 SVG를 혼합 할 때 발생합니다. 부모가이 두 가지 중 ‘기타’인 경우 .parentNode는 부모를 제공하고 .parentElement는 정의되지 않습니다.
답변
