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받는 링크 문서 . 노드 는 문서로 포함 가능하도록 정의 되고 문서는 문서로 포함 할 수 없기 때문에 문서가 노드가 아니기 때문에 이는 결정권으로 간주되어야합니다 .
편집 :이 중 일부가 잘못되었습니다. 자세한 내용은 아래 의견을 참조하십시오
모든 Element객체는 객체이기도 Node합니다 ( Element의 자손이므로 Node). 그러나이 Node하지 않은 Element... document객체입니다. 따라서 <html>요소에는 부모 노드 ( document)가 있지만 부모 요소는 없습니다.
필요가 있다는 이유 parentElement대신은 parentNode엄격하게 요구하지 않는 HTML5 때문이다 <html>, 요소 때문에 거의 모든 요소가 실제로 부모 요소를하지 않고 부모 노드를 가질 수 있습니다. 내 HTML 페이지가 다음과 같은 경우
<!doctype html>
<title>My page</title>
<header>This is my page</header>
<div id="body">
<p>This is some text from my page</p>
</div>
<footer>
Copyright, me
</footer>
그런 다음 title, header, #body및 footer요소는 것 parentNode같은 document, 그러나 그들의 parentElementnull이 될 것입니다. p태그 에만, parentElement이 #body있습니다. (이것은 페이지 구조로 조언하지 않을 것입니다 ... 더 전통적인 것을 고수하십시오.)
다음과 같이 복제 할 수 있습니다.
if (myElement.parentNode instanceof Element) {
myElement.parentElement = myElement.parentNode;
} else {
myElement.parentElement = null;
}
단지와 같이 로 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는 정의되지 않습니다.
참고 URL : https://stackoverflow.com/questions/8685739/difference-between-dom-parentnode-and-parentelement
도와주세요.
'development' 카테고리의 다른 글
| 필터링 된 ng-repeat 데이터의 길이를 표시하는 방법 (0) | 2020.02.18 |
|---|---|
| Android : 확장 / 축소 애니메이션 (0) | 2020.02.18 |
| 브라우저에서 최대 병렬 http 연결? (0) | 2020.02.18 |
| 확인 된 예외에 대한 사례 (0) | 2020.02.18 |
| MySQL에서 열 이름을 바꾸는 중에 오류가 발생했습니다 (0) | 2020.02.18 |