Diferencia entre HTMLCollection, NodeLists y matrices de objetos
Siempre me he sentido confundido entre colecciones HTML, objetos y matrices cuando se trata de DOM. Por ejemplo...
- ¿ Cuál es la diferencia entre
document.getElementsByTagName("td")y$("td")? $("#myTable")y$("td")son objetos (objetos jQuery). ¿Por qué console.log también muestra la matriz de elementos DOM junto a ellos, y no son objetos ni una matriz?- ¿De qué se tratan las elusivas "NodeLists" y cómo selecciono una?
Proporcione también cualquier interpretación del siguiente guión.
[123,"abc",321,"cba"]=[123,"abc",321,"cba"]
{123:123,abc:"abc",321:321,cba:"cba"}=Object { 123=123, abc="abc", 321=321, more...}
Node= Node { ELEMENT_NODE=1, ATTRIBUTE_NODE=2, TEXT_NODE=3, more...}
document.links= HTMLCollection[a #, a #]
document.getElementById("myTable")= <table id="myTable">
document.getElementsByClassName("myRow")= HTMLCollection[tr.myRow, tr.myRow]
document.getElementsByTagName("td")= HTMLCollection[td, td, td, td]
$("#myTable")= Object[table#myTable]
$("td")= Object[td, td, td, td]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Collections?</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
console.log('[123,"abc",321,"cba"]=',[123,"abc",321,"cba"]);
console.log('{123:123,abc:"abc",321:321,cba:"cba"}=',{123:123,abc:"abc",321:321,cba:"cba"});
console.log('Node=',Node);
console.log('document.links=',document.links);
console.log('document.getElementById("myTable")=',document.getElementById("myTable"));
console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow"))
console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td"));
console.log('$("#myTable")=',$("#myTable"));
console.log('$("td")=',$("td"));
});
</script>
</head>
<body>
<a href="#">Link1</a>
<a href="#">Link2</a>
<table id="myTable">
<tr class="myRow"><td>td11</td><td>td12</td></tr>
<tr class="myRow"><td>td21</td><td>td22</td></tr>
</table>
</body>
</html>
Primero explicaré la diferencia entre NodeListy HTMLCollection.
Ambas interfaces son colecciones de nodos DOM. Se diferencian en los métodos que proporcionan y en el tipo de nodos que pueden contener. Si bien a NodeListpuede contener cualquier tipo de nodo, HTMLCollectionse supone que an solo contiene nodos de elementos.
An HTMLCollectionproporciona los mismos métodos que a NodeListy además un método llamado namedItem.
Las colecciones siempre se utilizan cuando se debe proporcionar acceso a múltiples nodos; por ejemplo, la mayoría de los métodos selectores (como getElementsByTagName) devuelven múltiples nodos u obtienen una referencia a todos los hijos ( element.childNodes).
Para obtener más información, consulte la especificación DOM4 - Colecciones .
¿ Cuál es la diferencia entre
document.getElementsByTagName("td")y$("td")?
getElementsByTagNamees el método de la interfaz DOM. Acepta un nombre de etiqueta como entrada y devuelve un HTMLCollection(consulte la especificación DOM4 ).
$("td")Es presumiblemente jQuery. Acepta cualquier selector CSS/jQuery válido y devuelve un objeto jQuery.
La mayor diferencia entre las colecciones DOM estándar y las selecciones de jQuery es que las colecciones DOM generalmente están activas (aunque no todos los métodos devuelven una colección activa), es decir, cualquier cambio en el DOM se refleja en las colecciones si se ven afectados. Son como una vista en el árbol DOM, mientras que las selecciones de jQuery son instantáneas del árbol DOM en el momento en que se llamó la función.
¿Por qué console.log también muestra la matriz de elementos DOM junto a ellos, y no son objetos ni una matriz?
Los objetos jQuery son objetos similares a matrices , es decir, tienen propiedades numéricas y una lengthpropiedad (tenga en cuenta que las matrices son solo objetos en sí). Los navegadores tienden a mostrar matrices y objetos similares a matrices de una manera especial, como [ ... , ... , ... ].
¿De qué se tratan las elusivas "NodeLists" y cómo selecciono una?
Vea la primera parte de mi respuesta. No se pueden seleccionar NodeList mensajes, son el resultado de una selección.
Hasta donde yo sé, ni siquiera hay una manera de crear NodeListmensajes de correo electrónico mediante programación (es decir, crear uno vacío y agregar nodos más adelante), solo son devueltos por algunos métodos/propiedades DOM.
0. ¿ Cuál es la diferencia entre an HTMLCollectiony a NodeList?
Aquí te dejamos algunas definiciones.
Especificaciones de nivel 1 de DOM: definiciones de objetos varios :
Interfaz HTMLColección
Una HTMLCollection es una lista de nodos. Se puede acceder a un nodo individual mediante el índice ordinal o el nombre del nodo o los atributos de identificación. Nota: Se supone que las colecciones en HTML DOM están activas, lo que significa que se actualizan automáticamente cuando se cambia el documento subyacente.
Especificaciones DOM nivel 3 - Lista de nodos
Lista de nodos de interfaz
La interfaz NodeList proporciona la abstracción de una colección ordenada de nodos, sin definir ni restringir cómo se implementa esta colección. Los objetos NodeList en el DOM están activos.
Se puede acceder a los elementos de NodeList a través de un índice integral, comenzando desde 0.
Por lo tanto, ambos pueden contener datos en vivo, lo que significa que el DOM se actualizará cuando lo hagan sus valores. También contienen un conjunto diferente de funciones.
Si inspecciona la consola si ejecuta sus scripts, notará que el tableelemento DOM contiene tanto a childNodes NodeList[2]como a children HTMLCollection[1]. ¿Por qué son diferentes? Como HTMLCollectionsolo puede contener nodos de elementos, NodeList también contiene un nodo de texto.
1. ¿Cuál es la diferencia entre document.getElementsByTagName("td")y $("td")?
document.getElementsByTagName("td")devuelve una matriz de elementos DOM (a NodeList), $("td")se llama objeto jQuery que tiene los elementos en document.getElementsByTagName("td")sus propiedades 0,,, etc. 1La 2principal diferencia es que el objeto jQuery es un poco más lento de recuperar pero da acceso a todas las funciones útiles. Funciones jQuery.
2. $("#myTable")y $("td")son objetos ( jQueryobjetos). ¿Por qué console.logtambién se muestra la matriz de elementos DOM junto a ellos, y no son objetos ni una matriz?
Son objetos con sus propiedades 0, 1, 2, etc. establecidas en los elementos DOM. Aquí hay un ejemplo simple: de cómo funciona:
jsFiddle
var a = {
1: "first",
2: "second"
}
alert(a[1]);
3. ¿De qué se tratan las elusivas "NodeLists" y cómo selecciono una?
Los ha estado recuperando en su código getElementsByClassNamey getElementsByTagNameambos devuelven NodeLists
Nota adicional
¿Cuál es la diferencia entre HTMLCollection y NodeList?
Una HTMLCollection contiene sólo nodos de elementos ( etiquetas ) y una NodeList contiene todos los nodos .
Tipos de nodos más importantes:
- nodo elemento
- nodo de atributo
- nodo de texto
- nodo de comentario
tipos de nodos
Los espacios en blanco dentro de los elementos se consideran texto y el texto se considera nodos.
Considera lo siguiente:
<ul id="myList">
<!-- List items -->
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
Espacio en blanco:<ul id="myList"> <li>List item</li></ul>
Sin espacios en blanco:<ul id="myList"><li>List item</li></ul>
Jun 01 '2018 10:06