El DOM elementos HTML

Aquí, vamos a aprender acerca de los elementos HTML DOM , que significa class Documento módulo de objeto con HTML y JavaScript.

El HTML DOM destaca for de objetos de documento Modelo y es una estructura de árbol similar a los datos que se carga cada vez que una página HTML es cargado por el navegador.

El DOM es un árbol genérico con el & lt; html & gt; etiqueta como el nodo raíz. Basado en el código HTML que sigue, el árbol tiene varios otros nodos y estos nodos tienen algún tipo de relación entre sí. Cada nodo del árbol se denomina elemento DOM . Estos elementos DOM son algo que se obtiene una referencia a través de JavaScript para cambiar dinámicamente el contenido o inyectar en nuestra aplicación web.

En este artículo, vamos a ver diversos métodos para obtener una referencia a estos elementos DOM .

Ir a la carpeta deseada y crear un archivo index.html con el siguiente código de arranque,

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM Elements</title>
</head>
<body>
<h1>DOM Elements</h1>
<h3>Today we'll learn about DOM elements</h3>
<div class="content">
<p id="lorem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde impedit quisquam
eveniet atque consectetur, magni dolore laudantium maxime neque quibusdam
mollitia excepturi modi suscipit sapiente totam, facilis alias nemo rem.
</p>
</div>
<span>This is a span tag</span>
<script>
</script>
</body>
</html>

salida

The HTML DOM Elements - 4

Ahora tenemos nuestra configuración repetitivo. vamos a tratar de manipular los datos en el DOM por conseguir una referencia a los elementos DOM y vamos a ver algo más que un método para hacer esto. En primer lugar, vamos a identificar todos los elementos DOM.

Tenemos & lt; html & gt;

, & lt; head & gt; , & lt; title & gt; , & lt; h1 & gt; , & lt; h3 & gt; , & lt; div & gt; , & lt; p & gt; y una & lt; lapso & gt; . Podríamos añadir más para ilustrar los ejemplos, pero usted tiene una idea de cuáles son los elementos DOM realmente son?

Bueno, ahora vamos a ver varios métodos para obtener una referencia a estos elementos.

elementos Finding HTML ID

El & lt; p & gt;

dentro de la & lt; div & gt; con contenido for tiene un Identificación . Podemos obtener esta Identificación y almacenar la referencia a la presente & lt; p & gt; usando el getElementById () método. Así que vamos a hacer esto.

<script>
var para=document.getElementById('lorem');
console.log(para);
</script>

salida

<p id = "lorem">...</p>

En la consola, verá todo el texto lorem bajo la & lt; p & gt; . Por lo tanto, si tenemos un elemento HTML con una duda dada Identificación , podemos obtener fácilmente una referencia a él mediante el getElemenById () método por el que pasa el Identificación del elemento que queremos una referencia a y almacenarla en una variable.

elementos HTML Finding por nombre class

Nuestra & lt; div & gt; tiene un nombre class de contenido. Podemos obtener una referencia a este elemento utilizando el método getElementsByClassName () . Tenga en cuenta que este método tiene elementos en plural, a diferencia de la getElementById () método que tiene el elemento como singular. Esto implica que desde Identificación se asigna a ser único sólo tenemos una referencia a un elemento, mientras que el getElementsByClassName () método obtiene una referencia a todos los elementos asociados con el nombre class.

<script>
var content =document.getElementsByClassName('content');
console.log(content);
</script>

salida

HTMLCollection [div.content]

Esto se puede ver los registros de un objeto HTML Colección en la consola. Este objeto tiene un propiedad innerHTML , donde podemos ver todo el contenido, es decir, el & lt; p & gt; junto con el ipsum lorem.

vamos a añadir otro elemento con el mismo class.

<section class="content">
<p>This is some text under section with class content</p>
</section>
<script>
var content = document.getElementsByClassName('content');
console.log(content);
</script>

salida

HTMLCollection(2) [div.content, section.content]

Ahora vamos a llegar un objeto de colección HTML con dos objetos en su interior. Tenga en cuenta que un archivo HTML Colección es diferente de una matriz o un objeto. Que puede ser similar, pero no puede utilizar directamente los métodos de matriz o métodos de objetos en ellos.

Finding elementos HTML mediante la etiqueta Nombre

Alternativamente, se puede capturar varios elementos atacando directamente a sus etiquetas HTML.

<script>
var text = document.getElementsByTagName('span');
console.log(text);
</script>

salida

HTMLCollection [span]

Ahora se puede ver la etiqueta span conectado a la consola. De nuevo, si hay múltiples & lt; lapso & gt; en el documento, se hará referencia a nuestra todos aquellos & lt; intervalo & gt; .

elementos Finding HTML CSS Selectores de

La manera más fácil y conveniente de obtener una referencia a un elemento HTML es mediante el uso de los selectores CSS . En todos los métodos anteriores, hemos visto que el uso de nombres class o nombres de etiqueta no es un buen método para obtener una bodega de nuestros elementos como en los casos en los que tenemos que trabajar con un único elemento que tiene el mismo class como una gran cantidad de otros elementos en nuestro documento. El uso de selectores CSS simplemente pasar el selector CSS que queremos adjuntar una referencia a. Esto significa que cualquier identificación tendrá un prefijo de # y cualquier class tendrá un prefijo de.

<script>
var title=document.querySelector('h1');
var mainContent=document.querySelector('.content');
var para=document.querySelector('#lorem');
console.log(title,mainContent,para);
<script>

salida

<h1>DOM Elements </h1>
<div class="content">...</div>
<p id="lorem">...</p>

Por lo tanto el uso de la querySelector podemos tomar cualquier elemento que queremos. Mientras se trabaja con la manipulación DOM, es la mejor manera de obtener una referencia a los elementos DOM con tiempos excepcionales en los que solamente podemos utilizar los otros métodos.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *