DOM parentNode와 parentElement의 차이점
기존 DOM parentNode와 Firefox 9 parentElement에서 새롭게 도입된 DOM parentNode의 차이점은 무엇인지 간단히 설명해 주시겠습니까?
parentElement
파이어폭스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에서parentElement
SVG 요소에는 정의되어 있지 않습니다만,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
링크를 클릭합니다.노드는 문서에 포함되도록 정의되어 있고 문서는 문서에 포함시킬 수 없기 때문에 문서는 노드가 아니기 때문에 이는 의사 결정 페이일로 간주해야 합니다.
nextSibling 및 nextElementSibling과 마찬가지로 이름에 "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
'programing' 카테고리의 다른 글
PHP에서 두 좌표 사이의 거리 측정 (0) | 2023.01.13 |
---|---|
'mariadb 다운로드 중'에서 도커 빌드에 실패했습니다. (0) | 2023.01.13 |
텍스트 입력 기록 사용 안 함 (0) | 2023.01.13 |
2013 - HAProxy를 통해 MariaDB에 연결하는 동안 '초기 통신 패킷 읽기' 시스템 오류로 MySQL Server에 대한 연결이 끊김: 0 (0) | 2023.01.13 |
저장 방법HTML 래퍼 없이 DOMDocument의 HTML을 사용하시겠습니까? (0) | 2023.01.03 |