javascript - ejemplos - Diferencia entre DOM parentNode y parentElement
parents javascript (5)
¿Puede alguien explicarme en términos tan simples como sea posible, cuál es la diferencia entre el parentNode DOM parentNode y el nuevo elemento introducido en Firefox 9 parentElement
Al igual que con nextSibling y nextElementSibling , recuerde que las propiedades con "elemento" en su nombre siempre devuelven Element o null . Las propiedades sin pueden devolver cualquier otro tipo de nodo.
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
En Internet Explorer, parentElement no está definido para los elementos SVG, mientras que parentNode está definido.
Use .parentElement y no podrá equivocarse siempre y cuando no use fragmentos de documentos.
Si usa fragmentos de documentos, entonces necesita .parentNode :
let div = document.createDocumentFragment().appendChild(document.createElement(''div''));
div.parentElement // null
div.parentNode // document fragment
También:
let div = document.getElementById(''t'').content.firstChild
div.parentElement // null
div.parentNode // document fragment
<template id=t><div></div></template>
Aparentemente, el .parentNode <html> enlaza al Document . Esto se debe considerar un fallo de decisión, ya que los documentos no son nodos, ya que los nodos se definen como documentos que pueden contener los documentos y los documentos no pueden contenerlos.
parentElement es nuevo para Firefox 9 y para DOM4, pero ha estado presente en todos los demás navegadores importantes durante años.
En la mayoría de los casos, es lo mismo que parentNode . La única diferencia viene cuando el nodo parentNode un nodo no es un elemento. Si es así, parentElement es null .
Como ejemplo:
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
Dado que el elemento <html> ( document.documentElement ) no tiene un elemento primario que sea un elemento, parentElement es null . (Hay otros casos, más improbables, en los que parentElement podría ser null , pero probablemente nunca los encontrará).
Edit: algo de esto está mal. Ver comentarios a continuación para más detalles
Todos los objetos Element son también objetos Node (porque Element es un descendiente de Node ). Pero hay un Node que no es un Element ... el objeto de document . Entonces su elemento <html> tiene un nodo padre ( document ) pero no tiene un elemento padre.
La razón por la que existe la necesidad de parentElement lugar de parentNode es que, HTML5 no requiere estrictamente un elemento <html> , por lo que casi cualquier elemento puede tener un nodo principal sin tener realmente un elemento principal. Así que si mi página HTML se veía así:
<!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>
Luego, los elementos de title , header , #body y footer tendrían su parentNode como document , pero su elemento parentElement sería nulo. Solo la etiqueta p tendría un elemento parentElement , que es #body . (Tenga en cuenta que no recomendaría esto como una estructura de página ... apéguese a algo más tradicional).
Puedes replicarlo con algo como esto:
if (myElement.parentNode instanceof Element) {
myElement.parentElement = myElement.parentNode;
} else {
myElement.parentElement = null;
}