Puede alguien en mí explicar de lo más simple posible términos, ¿cuál es la diferencia entre DOM clásica parentNode y recientemente introducidas en Firefox 9 parentElementDiferencia entre DOM parentNode y parentElement
parentElement es nuevo en Firefox 9 y DOM4, pero ha estado presente en todos los otros navegadores principales durante siglos.
En la mayoría de los casos, es lo mismo que parentNode. La única diferencia se produce cuando el nodo parentNode no es un elemento. Si es así, parentElement es null.
Como un ejemplo:
document.body.parentNode; // the <html> element
document.body.parentElement; // the <html> element
document.documentElement.parentNode; // the document node
document.documentElement.parentElement; // null
Dado que el elemento <html> (document.documentElement) no tiene un padre que es un elemento, parentElement es null. (Hay otros, más improbable, casos en los que podría haber parentElementnull, pero es probable que nunca vienen a través de ellos.)
En otras palabras, es completamente inútil 99.999999999999% de las veces. ¿De quién fue la idea? –
El original ['parentElement'] (http://msdn.microsoft.com/en-us/library/ms534327 (v = vs.85) .aspx) era un elemento propietario de IE; Creo que otros navegadores en ese momento (por ejemplo, Netscape) admitían 'parentNode' pero no' parentElement'. (Obviamente, dado que he mencionado a Netscape, estoy hablando de volver a IE5 y anteriores ...) – nnnnnn
@nnnnnn Buen conocimiento: gracias. – lonesomeday
Editar:Algo de esto es incorrecto. Véanse los comentarios a continuación para más detalles
Todos los objetos son también ElementNode objetos (porque Element es un descendiente de Node). Pero hay un Node que no es un Element ... el objeto document. Por lo tanto, su elemento <html> tiene un nodo principal (document) pero no tiene un elemento principal.
El motivo de que hay una necesidad de parentElement en vez de parentNode se debe a que, HTML5 no requiere estrictamente un elemento <html>, por lo que casi todos los elementos puede tener un nodo padre sin tener un elemento principal. Así que si mi página HTML era la siguiente:
<!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>
A continuación, los elementos title, header, #body y footer tendrían su parentNode como document, pero su parentElement sería nulo. Solo la etiqueta p tendría un parentElement, que es #body. (Nótese que no aconsejaría a esto como una estructura de la página ... se adhieren a algo más tradicional.)
se puede replicar con algo como esto:
if (myElement.parentNode instanceof Element) {
myElement.parentElement = myElement.parentNode;
} else {
myElement.parentElement = null;
}
* "porque , HTML5 no exige estrictamente un '' elemento '* No es cierto, ha malinterpretado la especificación de HTML5. ** La etiqueta ** html' ** es opcional, el ** elemento ** no lo es, siempre está ahí si la etiqueta está implícita o explícitamente proporcionada. [Detalles en la Sección 8 de la especificación] (http://www.w3.org/TR/html5/syntax.html#optional-tags). –
@Nathan TJ tiene razón. Si en realidad mira tu marcado utilizando algo como http://software.hixie.ch/utilities/js/live-dom-viewer/ y verás que el analizador de hecho infiere los elementos '' y '
' en ese caso. Puede crear situaciones en las que alguna etiqueta aleatoria que no sea '' sea un elemento secundario del documento pero debe hacerlo con script (en documentos HTML; para XML aleatorio esto no es verdad), y requiere algo de trabajo. –Ah, ya veo. Sí, he malinterpretado, habiendo leído ese fragmento hace mucho tiempo. –
En Internet Explorer, parentElement no está definido para los elementos SVG, mientras que se define parentNode.
honestamente, creo que esto es más un comentario que una respuesta. – shabunc
Probablemente, pero es la razón por la que golpeé mi cabeza contra la mesa durante una hora o más hasta que lo descubrí. Sospecho que muchos otros vienen a esta página después de un golpe de cabeza similar. – speedplane
@speedplane Me alegra que esta sea una respuesta, ya que no tiene sentido lógico y me dejó perplejo por un buen tiempo ... – superphonic
Al igual que con nextSibling and nextElementSibling, recuerde que las propiedades con "elemento" en su nombre siempre devuelven Element o null. Las propiedades sin pueden devolver ningún 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
Sí, pero a diferencia del texto de nextsibling o los nodos de comentario no pueden ser padres. – Jasen
Uso .parentElement y no se puede ir mal, siempre y cuando no se está utilizando fragmentos de documento.
Si utiliza fragmentos de documento, 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>Al parecer, el <html> 's .parentNode enlaces al Document. Esto se debe considerar como un documento de decisión, ya que los documentos no son Nodos, ya que los Nodos se definen como para que los documentos los puedan contener y los documentos no puedan contenerlos.
http://stackoverflow.com/questions/2899196/what-is-this-parentelement –
https://bugzilla.mozilla.org/show_bug.cgi?id=685798 –
[parentNode] (http: // www .w3schools.com/dom/prop_node_parentnode.asp) parece ser el estándar DOM, por lo que es más seguro utilizarlo siempre en lugar de parentElement. – TMS