sirve - que es id en javascript
¿Diferencia entre objeto Nodo y objeto Elemento? (5)
Estoy totalmente confundido entre el objeto Nodo y el objeto Elemento. document.getElementById() devuelve el objeto Element, mientras que document.getElementsByClassName() devuelve el objeto NodeList (¿Colección de elementos o nodos?)
Si un div es un objeto Element, entonces ¿qué pasa con el objeto div Node?
¿Qué es un objeto de nodo?
¿Son objeto de documento, objeto de elemento y objeto de texto también objeto de nodo?
Según el libro de David Flanagan, "El objeto de documento, sus objetos de elemento y los objetos de texto son todos objetos de nodo".
Entonces, ¿por qué un objeto puede heredar propiedades / métodos del objeto Element y también del objeto Node?
Si es así, supongo que la clase de nodo y la clase de elemento están relacionadas en el árbol prototípico de la herencia.
<div id="test">
<p class="para"> 123 </p>
<p class="para"> abc </p>
</div>
<p id="id_para"> next </p>
document.documentElement.toString(); // [object HTMLHtmlElement]
var div = document.getElementById("test");
div.toString(); // [object HTMLDivElement]
var p1 = document.getElementById("id_para");
p1.toString(); // [object HTMLParagraphElement]
var p2 = document.getElementsByClassName("para");
p2.toString(); //[object HTMLCollection]
La mejor fuente de información para todos sus problemas de DOM
http://www.w3.org/TR/dom/#nodes
"Los objetos que implementan la interfaz de Documento, DocumentFragment, DocumentType, Elemento, Text, ProcessingInstruction o Comment (simplemente llamados nodos) participan en un árbol".
http://www.w3.org/TR/dom/#element
"Los nodos de elementos son simplemente conocidos como elementos".
Nodo se utiliza para representar etiquetas en general. Dividido en 3 tipos:
Atributo Nota: es el nodo que dentro tiene atributos. Exp: <p id=”123”></p>
Nodo de texto: es el nodo que, entre la apertura y el cierre, tiene contenido de texto continuo. Exp: <p>Hello</p>
Nodo del elemento: es el nodo que dentro de su tiene otras etiquetas. Exp: <p><b></b></p>
Cada nodo puede ser tipos simultáneamente, no necesariamente de un solo tipo.
El elemento es simplemente un nodo de elemento.
Un node es el nombre genérico para cualquier tipo de objeto en la jerarquía DOM. Un node podría ser uno de los elementos DOM integrados, como document o document.body , podría ser una etiqueta HTML especificada en el HTML como <input> o <p> o podría ser un nodo de texto creado por El sistema para mantener un bloque de texto dentro de otro elemento. Entonces, en pocas palabras, un node es cualquier objeto DOM.
Un element es un tipo específico de node ya que hay muchos otros tipos de nodos (nodos de texto, nodos de comentarios, nodos de documentos, etc.).
El DOM consiste en una jerarquía de nodos donde cada nodo puede tener un padre, una lista de nodos hijos y un nextSibling y previousSibling. Esa estructura forma una jerarquía en forma de árbol. El nodo de document tendría su lista de nodos secundarios (el nodo principal y el nodo del body ). El nodo del body tendría su lista de nodos secundarios (los elementos de nivel superior en su página HTML) y así sucesivamente.
Por lo tanto, una lista de nodes es simplemente una lista de nodes de tipo matriz.
Un elemento es un tipo específico de nodo, uno que puede especificarse directamente en el HTML con una etiqueta HTML y puede tener propiedades como una id o una class . puede tener hijos, etc ... Existen otros tipos de nodos, como nodos de comentarios, nodos de texto, etc. con diferentes características. Cada nodo tiene una propiedad .nodeType que informa de qué tipo de nodo es. Puede ver los distintos tipos de nodos aquí (diagrama de MDN ):
Puede ver que un ELEMENT_NODE es un tipo particular de nodo donde la propiedad nodeType tiene un valor de 1 .
Por lo tanto, document.getElementById("test") solo puede devolver un nodo y se garantiza que es un elemento (un tipo específico de nodo). Por eso solo devuelve el elemento en lugar de una lista.
Dado que document.getElementsByClassName("para") puede devolver más de un objeto, los diseñadores optaron por devolver una lista de nodeList porque ese es el tipo de datos que crearon para una lista de más de un nodo. Dado que estos solo pueden ser elementos (normalmente solo los elementos tienen un nombre de clase), técnicamente es una nodeList nodos que solo tiene nodos de tipo elemento y los diseñadores podrían haber creado una colección con un nombre diferente que era una elementList , pero optaron por usar solo un tipo de colección, ya sea que tuviera solo elementos o no.
EDITAR: HTML5 define una HTMLCollection que es una lista de elementos HTML (no cualquier nodo, solo elementos). Una serie de propiedades o métodos en HTML5 ahora devuelven una HTMLCollection . Si bien es muy similar en la interfaz a una lista de nodeList , ahora se hace una distinción en que solo contiene Elementos, no cualquier tipo de nodo.
La distinción entre nodeList y HTMLCollection tiene poco impacto en la forma en que se usa (por lo que puedo decir), pero los diseñadores de HTML5 ahora han hecho esa distinción.
Por ejemplo, la propiedad element.children devuelve una HTMLCollection en vivo.
Node es para implementar una estructura de árbol, por lo que sus métodos son para firstChild , lastChild , childNodes , etc. Es más una clase para una estructura de árbol genérica.
Y luego, algunos objetos Node también son objetos Element . Element hereda del Node . Element objetos de Element realidad representan los objetos según lo especificado en el archivo HTML por las etiquetas como <div id="content"></div> . La clase Element define propiedades y métodos como attributes , id , innerHTML , clientWidth , blur() y focus() .
Algunos objetos de Node son nodos de texto y no son objetos de Element . Cada objeto Node tiene una propiedad nodeType que indica qué tipo de nodo es, para documentos HTML:
1: Element node
3: Text node
8: Comment node
9: the top level node, which is document
Podemos ver algunos ejemplos en la consola:
> document instanceof Node
true
> document instanceof Element
false
> document.firstChild
<html>...</html>
> document.firstChild instanceof Node
true
> document.firstChild instanceof Element
true
> document.firstChild.firstChild.nextElementSibling
<body>...</body>
> document.firstChild.firstChild.nextElementSibling === document.body
true
> document.firstChild.firstChild.nextSibling
#text
> document.firstChild.firstChild.nextSibling instanceof Node
true
> document.firstChild.firstChild.nextSibling instanceof Element
false
> Element.prototype.__proto__ === Node.prototype
true
La última línea anterior muestra que el Element hereda del Node . (esa línea no funcionará en IE debido a __proto__ . __proto__ usar Chrome, Firefox o Safari).
Por cierto, el objeto de document es la parte superior del árbol de nodos, y el document es un objeto de Document , y el Document hereda de Node también:
> Document.prototype.__proto__ === Node.prototype
true
Aquí hay algunos documentos para las clases de Nodo y Elemento:
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element
Nodo: http://www.w3schools.com/js/js_htmldom_nodes.asp
El objeto Nodo representa un solo nodo en el árbol de documentos. Un nodo puede ser un nodo de elemento, un nodo de atributo, un nodo de texto o cualquier otro tipo de nodo explicado en el capítulo Tipos de nodo.
Elemento: http://www.w3schools.com/js/js_htmldom_elements.asp
El objeto Element representa un elemento en un documento XML. Los elementos pueden contener atributos, otros elementos o texto. Si un elemento contiene texto, el texto se representa en un nodo de texto.
duplicar :