El DOM a menudo se denomina árbol DOM porque está formado por un árbol de objetos llamados nodos. Aprendió qué es el Modelo de objetos de documento (DOM), cómo acceder al objeto de documento y cambiar sus propiedades usando la consola, y también aprendimos la diferencia entre el código fuente HTML y DOM.
En este manual, encontrará la terminología HTML necesaria para trabajar con JavaScript y el DOM, aprenderá qué es un árbol y nodos DOM y aprenda a identificar los tipos de nodos más comunes. También puede crear un programa JavaScript en la consola para cambiar el DOM de forma interactiva.
Terminología HTMLComprender los términos de HTML y JavaScript es fundamental para trabajar con el DOM. Echemos un vistazo rápido a los términos principales.
Mira este elemento HTML:
Hogar
Tiene un ancla, que es un enlace a index.html.
Todo lo que se encuentra entre las etiquetas de apertura y cierre es un elemento HTML.
Volvamos al archivo index.html del tutorial anterior:
Aprendiendo el DOM
Modelo de objeto de documento
La forma más fácil de acceder a un elemento con JavaScript es con el atributo id. Agreguemos el enlace anterior al archivo index.html con id="nav".
...
Modelo de objeto de documento
Hogar
...
Cargue (o actualice) la página en una ventana del navegador y mire el DOM para asegurarse de que el código se haya actualizado.
Luego use el método getElementById() para acceder a todo el elemento. Ingrese lo siguiente en la consola:
documento.getElementById("navegación");
Hogar
El método getElementById() recuperará el elemento completo. Ahora, en lugar de tener que escribir este objeto y método cada vez que necesite acceder al enlace de navegación, puede colocar el elemento en una variable para que sea más fácil trabajar con él.
let navLink = document.getElementById("nav");
La variable navLink contiene el ancla. Aquí puede cambiar fácilmente los atributos y valores. Por ejemplo, para cambiar la ubicación de un enlace, cambie el atributo href:
navLink.href = "https://www.wikipedia.org";
También puede cambiar el texto reasignando la propiedad textContent:
navLink.textContent = "Navegar a Wikipedia";
Ahora, si visualiza este elemento en la consola o marca la etiqueta Elementos, verá cómo se ha actualizado.
enlace de navegación;
Navegar a Wikipedia
Los cambios también se reflejarán en el front-end.
Actualizar la página devolverá todos los valores originales.
En este punto, debe comprender cómo usar el método del documento para acceder a un elemento, cómo asignar un elemento a una variable y cómo cambiar las propiedades y los valores de un elemento.
Árbol y nodos DOMTodos los elementos en el DOM se definen como nodos. Hay muchos tipos de nodos, pero hay tres principales con los que trabajará con más frecuencia:
Cuando un elemento HTML es un elemento en el DOM, se denomina nodo de elemento. Cualquier texto único fuera de un elemento es un nodo de texto, y comentario HTML– un nodo de comentario. Aparte de estos tres tipos de nodos, el objeto de documento en sí mismo es el nodo de documento, que es el nodo raíz de todos los demás nodos.
El DOM consta de una estructura de árbol de nodos anidados, a menudo denominado árbol DOM. Probablemente sepa qué es un árbol genealógico: es una representación esquemática de los lazos familiares, que consiste en padres, hijos y familia inmediata. Los nodos en el DOM también se denominan nodos principales y secundarios en función de su relación con otros nodos.
Por ejemplo, cree un archivo nodes.html. agregue un nodo de texto, así como nodos de comentarios y elementos.
Aprender acerca de los nodos
Un nodo de elemento
Un nodo de texto.
El nodo del elemento html es el padre. head y body son nodos secundarios html. body contiene tres nodos secundarios, y todos están en el mismo nivel; el tipo de nodo no afecta el nivel de anidamiento.
Nota: cuando se trabaja con DOM generado por HTML, el relleno código fuente HTML crea una gran cantidad de nodos de texto vacíos que no serán visibles en la pestaña Elementos de DevTools. Más sobre esto en el enlace.
Definición de tipo de nodoCada nodo de un documento tiene un tipo, al que se accede a través de la propiedad nodeType. La red de desarrolladores de Mozilla tiene una lista actualizada de todas las constantes de tipo de nodo. A continuación se muestra una tabla de los tipos de nodos más comunes.
En la pestaña Elementos de las Herramientas para desarrolladores, puede notar que cada vez que hace clic y selecciona cualquier línea en el DOM, aparece el valor == $0 junto a ella. Esto es muy manera conveniente acceder al elemento activo actual.
En la consola de node.html, haga clic en el primer elemento del cuerpo (h1).
Usando la consola, averigüe el tipo del nodo seleccionado usando la propiedad nodeType.
$0.tipodenodo;
1
Al seleccionar el elemento h1, verá 1 como salida, que se refiere a ELEMENT_NODE. Haz lo mismo con otros nodos y te devolverán 3 y 8 respectivamente.
Al saber cómo acceder a un elemento, puede ver el tipo de nodo sin resaltar los elementos en el DOM.
documento.cuerpo.nodoTipo;
1
Además de nodeType, también puede usar la propiedad nodeValue para obtener el valor de un nodo de texto o comentario, y nodeName para obtener la etiqueta del elemento.
Cambiando el DOM con EventosHasta ahora, ha visto cómo cambiar el DOM en la consola y se sabe que dichos cambios son temporales; cada vez que se actualiza la página, se pierden todos los cambios. En se actualizó el color de fondo de la página en la consola. Intente combinar lo que ha aprendido en este tutorial con lo que ya sabe para crear un botón interactivo que cambie el color de fondo.
Regrese al archivo index.html y agregue un elemento de botón con una identificación. También debe agregar un enlace al nuevo archivo en el nuevo directorio js js/scripts.js.
Aprendiendo el DOM
Modelo de objeto de documento
Cambiar color de fondo
Un evento en JavaScript es una acción que realiza el usuario. El usuario se desplaza sobre un elemento, hace clic en él o presiona una determinada tecla en el teclado: todos estos son eventos. En este caso particular, el botón debe realizar una acción cuando el usuario hace clic en él. Para hacer esto, debe agregar un detector de eventos. Cree un archivo scripts.js y guárdelo en un nuevo directorio js. Debe definir un elemento de botón en el archivo y asignarlo a una variable.
Usando el método addEventListener(), el botón escuchará los clics y ejecutará su función después del clic.
...
button.addEventListener("clic", () => (
// la acción irá aquí
});
Dentro de la función, debes colocar el código del manual anterior para cambiar el color de fondo a fucsia.
...
Así es como se ve el guión:
let button = document.getElementById("changeBackground");
button.addEventListener("clic", () => (
document.body.style.backgroundColor = "fucsia";
});
Guarde y cierre el archivo. Actualice la página index.html en el navegador. Haga clic en el botón nuevo y el color de fondo de la página cambiará.
Etiquetas: ,La herramienta principal para el trabajo y los cambios dinámicos en la página es el DOM (Document Object Model), un modelo de objetos utilizado para documentos XML/HTML.
Según el modelo DOM, un documento es una jerarquía.
Cada etiqueta HTML forma un elemento de nodo separado, cada fragmento de texto forma un elemento de texto, y así sucesivamente.
En pocas palabras, el DOM es una representación de un documento como un árbol de etiquetas. Este árbol está formado por una estructura anidada de etiquetas más fragmentos de texto de la página, cada uno de los cuales forma un nodo independiente.
El DOM más simpleConstruyamos, para empezar, el árbol DOM para el próximo documento.
Encabezado Hermoso documento
La etiqueta más externa es , por lo que el árbol comienza a crecer a partir de ella.
Dentro hay dos nodos: y - se convierten en nodos secundarios para .
Formulario de etiquetas nodos de elementos(nodo de elemento). Texto enviado nodos de texto(nodo de texto). Ambos son nodos pares del árbol DOM.
Ejemplo más complicadoConsidere ahora una página más vital:
Sobre los alces La verdad sobre los alces.
El elemento raíz de la jerarquía es html. Tiene dos descendientes. El primero es cabeza, el segundo es cuerpo. Y así sucesivamente, cada etiqueta anidada es un elemento secundario de la etiqueta anterior:
En esta figura, los elementos de los nodos están marcados en azul, los elementos de texto están marcados en negro.
El árbol está formado por elementos de nodo azul: etiquetas HTML.
Y así es como se ve el árbol si lo dibujas directamente en la página HTML:
Por cierto, el árbol de esta figura no tiene en cuenta el texto que consta solo de caracteres de espacio en blanco. Por ejemplo, dicho nodo de texto debería aparecer inmediatamente después de . DOM que no contiene tales nodos "vacíos" se llama "normalizado".
Veamos un documento un poco más complejo.
Documento de datos
La etiqueta superior es html , tiene elementos secundarios de cabeza y cuerpo, y así sucesivamente. El resultado es un árbol de etiquetas:
Atributos
En este ejemplo, los nodos tienen atributos: estilo, clase, id. En general, los atributos también se consideran nodos en el DOM cuyo padre es el elemento DOM en el que se especifican.
Sin embargo, en la programación web, estas junglas no suelen escalarse, y los atributos se consideran simplemente propiedades del nodo DOM, que, como veremos más adelante, se pueden establecer y cambiar a petición del programador.
En realidad, esto es un secreto, pero DOCTYPE también es un nodo DOM y está ubicado en el árbol DOM a la izquierda del HTML (este hecho está oculto en la figura).
PD En cuanto al secreto, por supuesto, una broma, pero no todos lo saben realmente. Es difícil imaginar dónde tal conocimiento puede ser útil...
Normalización en varios navegadoresAl analizar HTML explorador de Internet inmediatamente crea normalizado DOM que no crea nodos a partir de texto vacío.
Firefox tiene una opinión diferente, crea un elemento DOM de cada fragmento de texto.
Por lo tanto, en Firefox, el árbol de este documento se ve así:
En la figura, por razones de brevedad, los nodos de texto se indican simplemente mediante un hash. cuerpo tiene 7 hijos en lugar de 3.
Opera también tiene algo de lo que presumir. Puede agregar un elemento extra vacío "solo de sí misma".
Para ver esto, abra el documento. Devuelve el número de nodos secundarios de document.body , incluidos los nodos de texto.
Obtengo 3 para IE, 7 para Firefox y 8 (!?) para Opera.
En la práctica, esta incompatibilidad no crea grandes problemas, pero debe recordarlo. Por ejemplo, la diferencia puede manifestarse en el caso de la enumeración de los nodos del árbol.
El poder del DOM¿Por qué, además de hermosos dibujos, necesitamos un modelo DOM jerárquico?
Muy simple:
Cada elemento DOM es un objeto y proporciona propiedades para manipular su contenido, para acceder a padres e hijos.
El objeto de documento se utiliza para la manipulación de DOM.
Usando document , puede obtener el elemento deseado del árbol y cambiar su contenido.
Por ejemplo, este código toma el primer elemento con la etiqueta ol, elimina dos elementos de la lista en secuencia y luego los agrega en orden inverso:
Var ol = document.getElementsByTagName("ol") var hiter = ol.removeChild(ol.firstChild) var kovaren = ol.removeChild(ol.firstChild) ol.appendChild(kovaren) ol.appendChild(hiter)
Para ver un ejemplo del trabajo de dicho script, haga clic en el texto en la página del alce
En manuales y scripts más antiguos, es posible que vea modificaciones en el código HTML de la página llamando directamente a document.write .
En los scripts modernos, este método casi nunca se usa, algunos casos aplicación correcta se puede contar con los dedos.
Evite document.write.. A menos que realmente sepa lo que está haciendo (y por qué está leyendo un tutorial, ya es un gurú)
Echemos un vistazo más de cerca a los métodos de acceso y las propiedades de los elementos DOM.
Acceso a elementosTodos los accesos y cambios al DOM se originan en el objeto del documento.
Comencemos en la parte superior del árbol.
documento.documentElementEtiqueta superior. En el caso de una página HTML válida, sería .
cuerpo del documentoLa etiqueta, si está presente en el documento (debe estarlo).
El siguiente ejemplo, cuando se hace clic en el botón, mostrará la representación textual de los objetos document.documentElement y document.body. La cadena en sí depende del navegador, aunque los objetos son los mismos en todas partes.
función ir () (alerta (documento.documentElement) alerta (documento.cuerpo))
Tipos de elementos DOMCada elemento en el DOM tiene un tipo. Su número se almacena en el atributo elem.nodeType
En total, hay 12 tipos de elementos en el DOM.
Normalmente solo se utiliza uno: Node.ELEMENT_NODE , cuyo número es 1. Las etiquetas HTML corresponden a elementos de este tipo.
A veces también es útil el tipo Node.TEXT_NODE, que es igual a 3. Estos son elementos de texto.
Otros tipos en programación javascript no se usan
En el siguiente ejemplo, cuando se hace clic en el botón, se imprimirán los tipos de document.documentElement y luego el tipo del último elemento secundario del nodo document.body. Es un nodo de texto.
función ir () (alerta (document.documentElement.nodeType) alerta (document.body.lastChild.nodeType)) Texto
EjemploPor ejemplo, así es como se vería el documento del ejemplo anterior en un navegador si cada elemento visible estuviera enmarcado con un número de tipo de nodo en la esquina superior derecha.
... Datos
Aquí solo se muestran los elementos dentro del cuerpo, ya que son los únicos que se muestran en la página. Para elementos de tipo 1 (etiquetas), la etiqueta correspondiente se indica entre paréntesis, para elementos de texto (tipo 3) es solo un número.
Elementos secundariosEl siguiente ejemplo recorre todos los elementos secundarios de document.body .
For(var i=0; i CUERPO
estiloEsta propiedad controla el estilo. Es similar a establecer un estilo en CSS.
Por ejemplo, puede establecer element.style.width :
Código fuente de este botón:
Comer regla general reemplazos: si el atributo CSS tiene guiones, para establecer el estilo, debe reemplazarlos con mayúscula letras.
Por ejemplo, para establecer la propiedad del índice z en 1000, establecería:
elemento.estilo.zIndex = 1000
HTML internoEsta propiedad una vez solo fue compatible con IE. Ahora es compatible con todos los navegadores modernos.
Contiene todo el HTML dentro del nodo y se puede cambiar.
La propiedad innerHTML se usa principalmente para cambiar dinámicamente el contenido de una página, por ejemplo:
Document.getElementById("pie de página").innerHTML = "¡Adiós!"
Quizás innerHTML es una de las propiedades de elementos DOM más utilizadas.
nombre de la claseEsta propiedad especifica la clase del elemento. Es completamente análogo al atributo de "clase" html.
Elem.className = "nuevaclase"
onclick, onkeypress, onfocus...Y otras propiedades que comienzan con "on..." almacenan las funciones correspondientes del controlador de eventos. Por ejemplo, puede asignar un controlador eventos al hacer clic.
Para obtener más información sobre estas propiedades y controladores de eventos, consulte
Trabajar con el modelo DOM
Cada objeto Ventana tiene una propiedad de documento que hace referencia a un objeto Documento. Este objeto Documento no es un objeto independiente. Es el objeto central de una rica API conocida como Document Object Model (DOM), que define cómo se accede al contenido de un documento.
Descripción general del DOMEl Modelo de objetos de documento (DOM) es una interfaz de programación de aplicaciones fundamental que brinda la capacidad de trabajar con el contenido de documentos HTML y XML. La interfaz de programación de aplicaciones (API) DOM no es particularmente compleja, pero hay muchas características arquitectónicas que debe tener en cuenta.
En primer lugar, debe entenderse que los elementos anidados de documentos HTML o XML se representan como un árbol de objetos DOM. La vista de árbol de un documento HTML contiene nodos que representan elementos o etiquetas como y
Y nodos que representan líneas de texto. Un documento HTML también puede contener nodos que representan comentarios HTML. Considere el siguiente documento HTML simple:
Documento de muestra Este es un documento HTML
Ejemplo simple texto.
La representación DOM de este documento se muestra en el siguiente diagrama:
Para aquellos que aún no están familiarizados con las estructuras de árboles en la programación de computadoras, es útil saber que la terminología para describirlos se tomó prestada de los árboles genealógicos. El nodo inmediatamente superior al nodo dado se llama de los padres con respecto a este nodo. Los nodos que están un nivel por debajo de otro nodo son subsidiarias con respecto a este nodo. Los nodos que están en el mismo nivel y tienen el mismo padre se llaman fraternal. Los nodos ubicados cualquier número de niveles por debajo de otro nodo son sus hijos. Padre, abuelo y cualquier otro nodo por encima de este nodo son sus ancestros.
Cada rectángulo en este diagrama es un nodo de documento, que está representado por un objeto Nodo. Tenga en cuenta que la figura muestra tres varios tipos nodos. La raíz del árbol es el nodo Documento, que representa el documento completo. Los nodos que representan elementos HTML son nodos de tipo Elemento y los nodos que representan texto son nodos de tipo Texto. Documento, Elemento y Texto son subclases de la clase Nodo. Documento y Elemento son las dos clases más importantes en el DOM.
El tipo de Nodo y sus subtipos forman la jerarquía de tipos que se muestra en el siguiente diagrama. Tenga en cuenta las diferencias formales entre los tipos genéricos de Documento y Elemento, y los tipos HTMLDocument y HTMLElement. El tipo Documento representa un documento HTML y XML, y la clase Elemento representa un elemento de ese documento. Las subclases HTMLDocument y HTMLElement representan específicamente un documento HTML y sus elementos:
En este diagrama, también se debe tener en cuenta que un número grande subtipos de la clase HTMLElement que representan tipos concretos de elementos HTML. Cada uno de estos define propiedades de JavaScript que reflejan los atributos HTML de un elemento o grupo de elementos en particular. Algunas de estas clases específicas definen propiedades o métodos adicionales que no reflejan la sintaxis del lenguaje de marcado HTML.
Selección de elementos del documentoEl funcionamiento de la mayoría de los programas cliente en JavaScript de alguna manera relacionado con la manipulación de los elementos del documento. Durante la ejecución, estos programas pueden utilizar la variable global document, que hace referencia al objeto Document. Sin embargo, para realizar cualquier manipulación en los elementos del documento, el programa debe obtener, o seleccionar, de alguna manera, los objetos Element que se refieren a esos elementos del documento. El DOM define varias formas de seleccionar elementos. Puede seleccionar un elemento o elementos de un documento:
por el valor del atributo id;
por el valor del atributo de nombre;
por nombre de etiqueta;
por el nombre de la clase o clases de CSS;
en consonancia con cierta Selector de CSS.
Todas estas técnicas de selección de elementos se describen en las siguientes subsecciones.
Selección de elementos por valor de atributo de identificaciónTodos los elementos HTML tienen atributos de identificación. El valor de este atributo debe ser único dentro del documento; dos elementos en el mismo documento no deben tener el mismo valor de atributo id. Seleccionar artículo por valor único El atributo id se puede hacer usando el método getElementById() del objeto Document:
Var sección1 = documento.getElementById("sección1");
Esta es la forma más fácil y común de seleccionar elementos. Si el script necesita poder manipular un conjunto específico de elementos del documento, asigne valores a los atributos de identificación de esos elementos y use la capacidad de buscarlos por esos valores.
EN Versiones de Internet El explorador debajo del método getElementById() de IE8 busca valores de atributo de ID sin distinguir entre mayúsculas y minúsculas y también devuelve elementos que coinciden con el valor del atributo de nombre.
Selección de elementos por el valor del atributo de nombreEl atributo de nombre HTML se diseñó originalmente para nombrar elementos de formulario y el valor de este atributo se usó cuando los datos del formulario se enviaron al servidor. Al igual que el atributo id, el atributo name asigna un nombre a un elemento. Sin embargo, a diferencia de id, el valor del atributo de nombre no tiene que ser único: varios elementos pueden tener el mismo nombre a la vez, lo cual es bastante común cuando se usa en botones de radio y formularios de casillas de verificación. Además, a diferencia de id, el atributo de nombre solo se permite en ciertos elementos HTML, incluidos formularios, elementos de formulario y elementos y .
Puede seleccionar elementos HTML en función de los valores de sus atributos de nombre utilizando el método getElementsByName() del objeto Documento:
Var radiobuttons = document.getElementsByName("color_favorito");
El método getElementsByName() no está definido por la clase Document, sino por la clase HTMLDocument, por lo que solo está disponible en documentos HTML y no está disponible en documentos XML. Devuelve un objeto NodeList que se comporta como una matriz de solo lectura de objetos Element.
En IE, el método getElementsByName() también devuelve elementos cuyos valores de atributo de identificación coinciden con el valor especificado. Para garantizar la compatibilidad con diferentes versiones navegadores, debe tener cuidado al elegir los valores de los atributos y no usar las mismas cadenas para los valores de los atributos de nombre e identificación.
Selección de elementos por tipoEl método getElementsByTagName() del objeto Documento le permite seleccionar todos los elementos HTML o XML del tipo especificado (o por nombre de etiqueta). Por ejemplo, para obtener un objeto similar a una matriz de solo lectura que contenga los objetos Element de todos los elementos del documento, puede hacer lo siguiente:
var tramos = documento.getElementsByTagName("span");
Al igual que el método getElementsByName(), getElementsByTagName() devuelve un objeto NodeList. Los elementos del documento se incluyen en la matriz NodeList en el mismo orden en que aparecen en el documento, es decir, primer elemento
En un documento, puede elegir:
Var firstParagraph = document.getElementsByTagName("p");
Los nombres de las etiquetas HTML no distinguen entre mayúsculas y minúsculas, y cuando se aplica getElementsByTagName() a un documento HTML, se compara con el nombre de la etiqueta sin distinguir entre mayúsculas y minúsculas. La variable spans creada anteriormente, por ejemplo, también incluirá todos los elementos que se escriben como .
Puede obtener una lista de nodos que contenga todos los elementos de un documento pasando el comodín "*" al método getElementsByTagName().
Además, la clase Element también define el método getElementsByTagName(). Actúa exactamente como la versión del método en la clase Document, pero solo selecciona elementos que son hijos del elemento en el que se llama al método. Es decir, encuentra todos los elementos dentro del primer elemento.
Es posible de la siguiente manera:
Var firstParagraph = document.getElementsByTagName("p"); var firstParagraphSpans = firstParagraph.getElementsByTagName("span");
Por razones históricas, la clase HTMLDocument define propiedades especiales para acceder a ciertos tipos de nodos. Propiedades imágenes, formularios Y Enlaces, por ejemplo, se refieren a objetos que se comportan como matrices de solo lectura que contienen elementos , Y (pero solo esas etiquetas , que tienen un atributo href). Estas propiedades se refieren a los objetos HTMLCollection, que son muy parecidos a los objetos NodeList, pero además se pueden indexar por los valores de los atributos id y name.
El objeto HTMLDocument también define incrustaciones y propiedades sinónimas de complementos, que son colecciones de elementos HTMLCollection. La propiedad de anclas no es estándar, pero se puede usar para acceder a elementos que tiene un atributo de nombre pero no un atributo href. La propiedad scripts está definida por el estándar HTML5 y es una colección de elementos HTMLCollection.
Además, el objeto HTMLDocument define dos propiedades, cada una de las cuales no hace referencia a una colección, sino a un solo elemento. La propiedad document.body representa un elemento de documento HTML y la propiedad document.head representa el . Estas propiedades siempre están definidas en el documento: incluso si no hay elementos y en el documento original, el navegador los creará implícitamente. La propiedad documentElement del objeto Document hace referencia al elemento raíz del documento. En los documentos HTML, siempre representa el .
Selección de elementos por clase CSSEl valor del atributo de clase HTML es una lista de cero o más identificadores separados por espacios. Hace posible definir conjuntos de elementos de documentos relacionados: cualquier elemento que tenga el mismo identificador en el atributo de clase es parte del mismo conjunto. La clase de palabra está reservada en JavaScript, por lo que JavaScript del lado del cliente usa la propiedad className para almacenar el valor del atributo de clase HTML.
Por lo general, el atributo de clase se usa junto con las hojas de estilo en cascada de CSS para aplicar un estilo de visualización común a todos los miembros de un conjunto. Sin embargo, además, el estándar HTML5 define el método getElementsByClassName(), que le permite seleccionar conjuntos de elementos de documentos en función de los identificadores en sus atributos de clase.
Al igual que el método getElementsByTagName(), se puede llamar al método getElementsByClassName() tanto en documentos HTML como en elementos HTML, y devuelve un objeto NodeList "en vivo" que contiene todos los descendientes de documentos o elementos que coinciden con los criterios de búsqueda.
El método getElementsByClassName() toma un único argumento de cadena, pero la propia cadena puede contener varios identificadores separados por espacios. Todos los elementos cuyos atributos de clase contengan todos los identificadores especificados se considerarán coincidentes. El orden de los identificadores no importa. Tenga en cuenta que tanto en el atributo de clase como en el argumento del método getElementsByClassName(), los identificadores de clase están separados por espacios, no por comas.
Los siguientes son algunos ejemplos del uso del método getElementsByClassName():
// Buscar todos los elementos con clase "advertencia" var advertencias = document.getElementsByClassName("advertencia"); // Encuentra todos los descendientes del elemento con id "log" // con clases "error" y "fatal" var log = document.getElementById("log"); var fatal = log.getElementsByClassName("error fatal");
Selección de elementos mediante selectores CSSLas hojas de estilo en cascada CSS tienen construcciones sintácticas muy poderosas conocidas como selectores que le permiten describir elementos o conjuntos de elementos en un documento. Junto con la estandarización de los selectores CSS3, otro estándar del W3C conocido como la API de selectores define Métodos JavaScript para obtener elementos que coincidan con el selector especificado.
La clave de esta API es el método querySelectorAll() del objeto Document. Toma un único argumento de cadena con un selector CSS y devuelve un objeto NodeList que representa todos los elementos del documento que coinciden con el selector.
Además del método querySelectorAll(), el objeto de documento también define un método querySelector(), similar a un método querySelectorAll(), con la diferencia de que devuelve solo el primer elemento coincidente (en el orden del documento), o nulo si no hay elementos coincidentes.
Estos dos métodos también están definidos por la clase Elementos. Cuando se invocan en un elemento, se busca en todo el documento una coincidencia con el selector dado y, a continuación, se filtra el resultado para que solo queden los descendientes del elemento utilizado. Este enfoque puede parecer contrario a la intuición, ya que significa que la cadena de selección puede incluir los ancestros del elemento que se busca.
Estructura del documento y navegación del documentoDespués de seleccionar un elemento del documento, a veces es necesario encontrar partes del documento relacionadas estructuralmente (principal, hermanos, elemento secundario). El objeto Documento se puede considerar como un árbol de objetos Nodo. El tipo de Nodo define las propiedades que le permiten navegar a través de dicho árbol. Hay otra interfaz de aplicación para navegar por el documento, como un árbol de objetos Element.
Documentos como árboles de nodosEl objeto Documento, sus objetos Elemento y los objetos Texto que representan los fragmentos de texto en el documento son todos objetos Nodo. La clase Node define las siguientes propiedades importantes:
padreNodoEl nodo principal de este nodo, o nulo para los nodos que no tienen ningún elemento principal, como Documento.
childNodesUn objeto similar a una matriz legible (NodeList) que proporciona una representación de los nodos secundarios.
primer hijo, último hijoEl primer y último nodo hijo, o nulo si el nodo dado no tiene hijos.
siguienteHermano, anteriorHermanoLos nodos hermanos siguientes y anteriores. Los nodos hermanos son dos nodos que tienen el mismo padre. Su orden corresponde al orden en el documento. Estas propiedades vinculan nodos en una lista doblemente vinculada.
tipo de nodoEl tipo de este nodo. Los nodos de tipo Documento tienen un valor de 9 en esta propiedad. Nodos de tipo Elemento - valor 1. Nodos de tipo Texto - valor 3. Nodos de tipo Comentarios - valor 8 y nodos de tipo Fragmento de documento - valor 11.
valor de nodoEl contenido de texto de los nodos Texto y Comentario.
nombre del nodoEl nombre de la etiqueta de un elemento en el que todos los caracteres se convierten a mayúsculas.
Con estas propiedades de la clase Nodo, puede hacer referencia al segundo nodo secundario del primer nodo secundario del objeto Documento, como se muestra a continuación:
Document.childNodes.childNodes == documento.firstChild.firstChild.nextSibling
Digamos que el documento en cuestión se ve así:
Prueba ¡Hola mundo!
Luego, el segundo nodo secundario del primer nodo secundario será el elemento . Contiene el valor 1 en la propiedad nodeType y el valor "BODY" en la propiedad nodeName.
Sin embargo, tenga en cuenta que esta API es extremadamente sensible a los cambios en el texto del documento. Por ejemplo, si agrega una sola línea nueva entre las etiquetas y en este documento, ese carácter de línea nueva se convertirá en el primer nodo secundario (nodo de texto) del primer nodo secundario, y el segundo nodo secundario será el elemento, no el .
Documentos como árboles de elementosCuando los elementos del documento en sí son de interés principal, en lugar del texto dentro de ellos (y el espacio en blanco entre ellos), es mucho más conveniente usar una API que le permita interpretar el documento como un árbol de objetos Element, ignorando el texto. y Nodos de comentarios que también forman parte del documento.
La primera parte de esta API es la propiedad secundaria de los objetos Element. Al igual que la propiedad childNodes, su valor es un objeto NodeList. Sin embargo, a diferencia de la propiedad childNodes, la lista de elementos secundarios solo contiene objetos Element.
Tenga en cuenta que los nodos Texto y Comentario no tienen nodos secundarios. Esto significa que la propiedad Node.parentNode descrita anteriormente nunca devuelve nodos Text o Comment. El valor de la propiedad parentNode de cualquier objeto Element siempre será otro objeto Element o la raíz del árbol, un objeto Document o DocumentFragment.
La segunda parte de la API de navegación del elemento del documento son las propiedades del objeto Elemento, similar a las propiedades de acceso a los nodos secundarios y hermanos del objeto Nodo:
firstElementChild, lastElementChildSimilar a las propiedades firstChild y lastChild, pero devuelve elementos secundarios.
siguienteElementoHermano, anteriorElementoHermanoSimilar a las propiedades nextSibling y previousSibling, pero devuelve elementos hermanos.
childElementCountEl número de elementos secundarios. Devuelve el mismo valor que la propiedad children.length.
Estas propiedades de acceso para niños y hermanos están estandarizadas e implementadas en todos navegadores actuales excepto IE.
El modelo de objeto de documento, o "DOM", es interfaz de software acceso a elementos de páginas web. Básicamente, es una API de página que le permite leer y manipular el contenido, la estructura y los estilos de la página. Veamos cómo funciona y cómo funciona.
¿Cómo se construye una página web?El proceso de convertir un documento HTML de origen en una página interactiva, estilizada y renderizable se denomina "Ruta de representación crítica". Si bien este proceso se puede dividir en varios pasos, como describí en Comprensión de la ruta de representación crítica, estos pasos se pueden agrupar aproximadamente en dos pasos. En el primero, el navegador analiza el documento para determinar qué se mostrará finalmente en la página, y en el segundo, el navegador realiza la representación.
El resultado de la primera etapa es lo que se denomina un "árbol de renderizado". El árbol de renderizado es una vista. elementos HTML, que se mostrarán en la página y sus estilos asociados. Para construir este árbol, el navegador necesita dos cosas:
DOM es una representación de objetos del documento HTML original. Tiene algunas diferencias, como veremos a continuación, pero esencialmente es un intento de transformar la estructura y el contenido de un documento HTML en modelo de objeto, que puede ser utilizado por varios programas.
La estructura de los objetos DOM está representada por lo que se llama un "árbol de nodos". Se llama así porque puede considerarse como un árbol con un solo padre que se ramifica en varias ramas secundarias, cada una de las cuales puede tener hojas. En este caso, el "elemento" principal es el elemento raíz, las "ramas" secundarias son elementos anidados y las "hojas" son el contenido dentro de los elementos.
Tomemos este documento HTML como ejemplo:
Mi primera página web ¡Hola, mundo!
¿Cómo estás?
Este documento se puede representar como el siguiente árbol de nodos:
En el ejemplo anterior, parece que el DOM es un mapeo 1:1 del documento HTML original. Sin embargo, como dije, hay diferencias. Para comprender completamente qué es el DOM, debemos ver lo que no es.
DOM no es una copia del HTML originalAunque el DOM se crea a partir de un documento HTML, no siempre es exactamente igual. Hay dos casos en los que el DOM puede diferir del HTML original.
1. Cuando HTML contiene errores de marcadoEl DOM es una interfaz para acceder a los elementos reales (es decir, ya representados) de un documento HTML. En el proceso de creación del DOM, el propio navegador puede corregir algunos errores en el código HTML.
Considere este documento HTML como un ejemplo:
¡Hola Mundo!
El documento carece de elementos, lo cual es un requisito para HTML. Pero si observamos el árbol DOM resultante, podemos ver que esto se ha solucionado:
Además de ser la interfaz para ver el contenido de un documento HTML, el propio DOM también se puede modificar.
Podemos, por ejemplo, crear nodos adicionales para el DOM usando Javascript.
Var nuevoParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("¡Soy nuevo!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph);
Este código cambiará el DOM, pero los cambios no se reflejarán en el documento HTML.
El DOM no es lo que ves en el navegador (es decir, el árbol de representación)En la ventana gráfica del navegador, verá el árbol de representación, que, como dije, es una combinación de DOM y CSSOM. Lo que hace que el DOM sea diferente de un árbol de renderizado es que este último solo consiste en lo que eventualmente se renderizará en la pantalla.
Dado que el árbol de representación solo se ocupa de lo que se muestra, excluye los elementos que están visualmente ocultos. Por ejemplo, elementos que tienen estilos con display: none .
¡Hola Mundo!
DOM incluirá el elemento
Sin embargo, el árbol de representación y, por lo tanto, lo que se ve en la ventana gráfica, no se incluirán en este elemento.
Esta diferencia es un poco menor porque DevTools Element Inspector proporciona la aproximación más cercana al DOM que tenemos en un navegador. Sin embargo, el inspector de DevTools contiene Información adicional, que no está en el DOM.
El mejor ejemplo de esto son los pseudo-elementos CSS. Los pseudoelementos creados con los selectores ::before y ::after son parte del CSSOM y del árbol de representación, pero técnicamente no son parte del DOM. Esto se debe a que el DOM solo se genera a partir del documento HTML original, sin incluir los estilos aplicados al elemento.
Aunque los pseudo-elementos no son parte del DOM, están en nuestro inspector de elementos de devtools.
Resumen DOM es una interfaz para un documento HTML. Los navegadores lo utilizan como el primer paso para determinar qué representar en la ventana gráfica y el código Javascript para cambiar el contenido, la estructura o el estilo de una página.
HTML interno
vartext = elemento.innerHTML;
elemento.innerHTML = "";
Asignar un nuevo HTML interno sobrescribe el código, incluso si el nuevo valor se agrega al actual (+=). Los scripts agregados de esta manera no se ejecutan.
exteriorHTML
Contiene el elemento completo y no se puede modificar. Técnicamente, escribir en esta propiedad crea un nuevo elemento que reemplaza al anterior. Las referencias al elemento anterior en las variables no cambian.
datos
textNode.data - contenido de nodos de texto y comentarios
contenido del texto
element.textContent: texto dentro del elemento sin etiquetas.
También hay una propiedad innerText no estándar que tiene mucho en común con textContent.
oculto
elemento.oculto = verdadero
El atributo oculto no es compatible con IE11.
La mayoría de los atributos estándar en el DOM se convierten en propiedades del objeto:
elemento.id = "id"
Para atributos no estándar, no se crea ninguna propiedad (indefinido)
Puedes crear tus propias propiedades DOM:
elemento.misDatos = (nombre:"Juan", apellido:"Smith");
y métodos:
element.myFunc = function()(alert this.nodeName);
Esto funciona porque los nodos DOM son objetos JavaScript regulares. Estas propiedades y métodos no estándar no afectan la visualización de la etiqueta y solo son visibles en JavaScript.
Acceso a los atributos de la etiqueta:
elemento.hasAttribute(nombre)
elemento.getAttribute(nombre)
elemento.setAttribute(nombre, valor)
elemento.removeAttribute(nombre)
element.attributes es una pseudo matriz de atributos.
Los atributos no distinguen entre mayúsculas y minúsculas (html) y las propiedades distinguen entre mayúsculas y minúsculas (javaScript).
El valor del atributo es siempre una cadena.
Atributo: a.getAttribute("href") - muestra exactamente lo que está en el HTML
Propiedad: a.href - puede diferir del valor del atributo
La mayoría de las veces, una propiedad depende de un atributo, pero no al revés. Cambiar la propiedad no afecta el atributo.
El atributo de clase tiene dos propiedades:
nombre de clase - cadena
classList - objeto
métodos de objeto classList:
element.classList.contains("clase") - comprueba si un objeto contiene una clase dada
elemento.classList.add("clase")
elemento.classList.remove("clase")
elemento.classList.toggle("clase")
classList es una pseudo-matriz, se puede iterar a través de en bucle.
atributos de datosLos atributos de datos personalizados están disponibles no solo como atributos, sino también a través de la propiedad del conjunto de datos
data-about = "algún valor"
elemento.conjunto.de.datos.sobre
parent.contains(child) - verdadero o falso
comprueba si el nodo secundario está anidado en el padre
nodeA.compareDocumentPosition(nodeB): proporciona información sobre el contenido y el orden relativo de los elementos. El valor devuelto es una máscara de bits:
Adición y eliminación de nodosvardiv = documento.createElement("div")
documento.createTextNode("texto")
parent.appendChild(element) - el elemento se agrega al final del padre
parent.insertBefore(element, nextSibling) - el elemento se agrega antes de nextSibling
parent.insertBefore(element, parent.firstChild) - añadido al principio
parent.insertBefore(element, null) - funciona como appendChild
Todos los métodos de inserción devuelven el nodo insertado.
Al mover un elemento, no necesita quitarlo primero del lugar anterior, los métodos de inserción lo hacen automáticamente.
element.insertAdjacentHTML(where, html): inserta código HTML arbitrario en cualquier parte del documento. Where especifica dónde insertar html en relación con el elemento: beforeBegin, afterBegin, beforeEnd, afterEnd.
elemento.insertarElementoAdyacente(donde, nuevoElemento)
element.insertAdjacentText(donde, texto)
los dos últimos métodos no son compatibles con Firefox
node.append(...nodes) - inserta nodos al final del nodo,
node.prepend(...nodes) - inserta nodos al comienzo del nodo,
node.after(...nodes) - inserta nodos después del nodo,
node.before(...nodes) - inserta nodos antes de node ,
node.replaceWith(...nodes) - Inserta nodos en lugar de node .
aquí los nodos son nodos o cadenas, en cualquier número y combinación, separados por comas.
var fragment = document.createDocumentFragment() - simula un nodo DOM que desaparece cuando se inserta en un documento, dejando solo a sus elementos secundarios. EN navegadores modernos No recomendado.
element.cloneNode(true) - copia profunda del elemento
element.cloneNode (falso) - copia sin hijos
padre.removeChild(elemento)
parent.replaceChild(nuevoElemento, elemento)
element.remove() - elimina el elemento directamente, sin referencia al padre.
Los métodos devuelven el host remoto
