DOM entendimiento con JavaScript

En este artículo, vamos a aprender sobre DOM con JavaScript, la manipulación de DOM con JavaScript y HTML con JavaScript .
Colocación de JS con HTML | Obtención de HTML usando JavaScript | Cambio de textos en HTML usando JS | Creación y eliminación de elementos HTML a través de JS.

Introducción:

¿Cuál es el modelo de objetos de documento (DOM) ? En primer lugar, comprender documento es cualquier archivo como una hoja de cálculo, la palabra y en class de JavaScript HTML. En HTML vemos diferentes tipos de etiquetas, que define el cuerpo, la cabeza, título, botones o formas, estos son los objetos y cómo hemos estructurado define el modelo.

Ejemplo:

Understanding DOM with JavaScript - 4

Ver cómo el HTML documentado está estructurado de una manera específica ? Todo está bajo & lt; html & gt; & lt; / html & gt; y la cabeza de este documento tiene el título, y el cuerpo de la HTML estará dentro de la & lt; body & gt; & Lt; / body & gt; (etiquetas del cuerpo) y esta es su estructura. En las próximas secciones, discutiremos cómo manipular HTML usando JavaScript?

vinculación con HTML JavaScript [Sección 1]:

Hemos creado dos archivos, uno es index.html que será nuestro archivo HTML y otros case MyScript.js nuestro script class todas las manifestaciones .

index.html

<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>Document</title>
</head>
<body>
<H1>This is my new file</H1>
<script src="myScript.js"></script>
</body>
</html>

Ahora, esta es nuestra index.html mirada archivo que tiene una secuencia de comandos de marcado donde llamamos a la cual enlace MyScript.js con src fuente, el nombre de nuestro guión.

MyScript.js

    alert("JavaScript is Loaded")

Consejo: Mantenga los dos archivos en el mismo directorio si no causará algún problema más adelante.

Resultado:

Understanding DOM with JavaScript - 5

Ahora manteniendo index.html mismo vamos a hacer cambios en JavaScript para entender.

datos de Captación de HTML utilizando JS [Sección 2]:

Para traer cualquier tipo de datos de HTML que vamos a utilizar documento objeto.

Cambio en MyScript.js

    console.log(document);

Así que esta línea consolará cerrar la sesión del documento HTML .

Understanding DOM with JavaScript - 6

Esto será a la consola de su navegador, ver aquí todo el documento HTML está mostrando.

Podemos acceder a las etiquetas específicas también. Al igual que somechanges, hicimos en nuestro archivo JavaScript.

MyScript.js

    console.log(document.head);
console.log(document.body);

Ahora, utilizando el siguiente formato de “document.tags” podemos acceder a la etiqueta específica.

Veamos un ejemplo:

Understanding DOM with JavaScript - 7

Incluso es posible recuperar las URL del documento que hicimos después es inverosímil URL después de cambiar MyScript.js :

    console.log(document.URL);

Understanding DOM with JavaScript - 8

tenemos dos salidas desde que la consola vence dos etiquetas de la cabeza y el cuerpo. Podemos hacer varias etiquetas también, class más etiquetas visitan: MDN Documento documentación

Ahora vamos a ver un último ejemplo:

podemos obtener los datos desde cualquier etiqueta como & lt; p & gt; o & lt; H1 & gt; , vamos a ver cómo se hace.

index.html

<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>Document</title>
</head>
<body>
<H1>This is my new file</H1>
<p>This is first para</p>
<p id='ID'>This is second para with an ID</p>
<p class="classone">Third para with class</p>
<script src="myScript.js"></script>
</body>
</html>

MyScript.js

    console.log(document.getElementById('ID'))
console.log(document.getElementsByClassName('classone')[0]);
console.log(document.querySelector('H1'));
console.log(document.querySelectorAll('p'));

pantalla de la consola:

Understanding DOM with JavaScript - 9

Utilizamos getElemenById a buscar cualquier etiqueta con su nombre de ID y la misma en el segunda línea, pero en lugar de ID, se utilizó nombre class (utilizamos [0] porque main devuelve todo el y sólo necesita su primer elemento). En las dos últimas líneas utilizamos querySelector y querySelectorAll que puede conseguir cualquier etiqueta, querySelector se for la primera etiqueta HTML en ese partido, mientras que querySelectorAll se class todas las etiquetas.

Consejo: ¿Dónde colocar la secuencia de comandos en el HTML?

Bueno, es una discusión bastante usual sobre el lugar donde hay que añadir nuestra secuencia de comandos en HTML.

dicen algunos, habría que añadir que en el ‘Head’ del HTML de modo que cuando la página se cargará se cargará el guión también, así que tenga un buen rendimiento, mientras que hay quienes sostienen que hay que poner en el pasado en el cuerpo por lo que la página HTML se cargan más rápido. ¿Quién tiene razón?

bien ambos tienen razón y ambos están equivocados, así (* guiño *) permítanme explicarlo con un ejemplo:

Ahora voy a hacer cambios en nuestra index.html programa, poniendo nuestra secuencia de comandos en la etiqueta de la cabeza .

index.html

<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>Document</title>
<script src="myScript.js"></script>
</head>
<body>
<H1>This is my new file</H1>
<p>This is first para</p>
<p id='ID'>This is second para with an ID</p>
<p class="classone">Third para with class</p>
</body>
</html>

Mientras que los MyScript.js es igual que en el último ejemplo, ahora vamos a ver la pantalla de la consola :

Understanding DOM with JavaScript - 10

Do te fijas, todos los valores anteriores cambiado a class o indefinido. ¿Por qué? Debido a que nos pusieron a nuestro script en la cabeza y cuando la cabeza se cargó y o RAN guión, pero ese momento el cuerpo resto no estaba allí, por lo tanto class o indefinido, en lugar de ello se había colocado en la parte inferior del cuerpo se va a producir el resultado correcto como en el ejemplo anterior.

Así que la posición de la scriptis totalmente dependiendo lo que el propósito de nuestra guión es.

modificar los textos en HTML usando JS [Artículo 3]:

Hasta ahora hemos aprendido cómo conectar nuestra JavaScript con nuestro HTML más adelante, la forma de obtener los datos del documento HTML usando JavaScript. Ahora, en esta sección, vamos a aprender cómo cambiar los textos en el HTML con JS.

La mayor parte del tiempo nuestra index.html permanecerá igual.

index.html

<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>Document</title>
</head>
<body>
<H1>This is my new file</H1>
<p>This is first para</p>
<p id='ID'>This is second para with an ID</p>
<p class="classone">Third para with class</p>
<script src="myScript.js"></script>
</body>
</html>

Ahora vamos a tratar de cambiar el título de nuestra página web.

Así que nuestra MyScript.js

    alert('Title will change using JavaScript')
document.title = 'IncludeHelp'

Pusimos una alerta para que podamos ver el cambio (de lo contrario va a cambiar muy rápido). Nuestra página web será :

Understanding DOM with JavaScript - 11

Aviso del título aquí, y al hacer clic en “ok” que el cambio de título a “IncludeHelp” :

Understanding DOM with JavaScript - 12

Ahora tenemos párrafos y una rúbrica aquí, así que podemos cambiar esto también?

intento Vamos a cambiar también. Ahora la cosa es de anotar, no podemos cambiar el contenido de texto de cualquier etiqueta como título hicimos antes, pero hay un ligero cambio ya que estas etiquetas contienen otros atributos que no sean de texto.

MyScript.js

    alert('Text in H1 will change using JavaScript')
let element = document.querySelector('H1')
element.textContent = 'Successfully changed'

Utilizamos “textContent” que es obvio, que será el texto de la etiqueta y por lo tanto lo cambiamos.

vamos a ver el cuerpo de nuestra página web …

Understanding DOM with JavaScript - 13

Ahora en el próximo ejemplo usaremos un bucle para cambiar todo el & lt; p & gt; etiquetas:

MyScript.js

let element =document.querySelector('H1')
element.textContent = 'Successfully changed'
let PElement =document.querySelectorAll('p')
PElement.forEach((para,index)=>{
para.textContent = `Para ${index}: Paragraph changed using Javascript`
})

Hemos utilizado querySelectorAll class & lt; p & gt; etiqueta que le dará una matriz de todos los párrafos en el documento HTML para que podamos usar método foreach () pasó una función flecha y nuestra página web cambiará a …

Understanding DOM with JavaScript - 14

Creación y eliminación de los Elementos [artículo 4]:

hemos aprendido a cambiar el texto en una sección anterior, ahora vamos a ver cómo crear y eliminar cualquier elemento.

Utilizaremos mismo documento HTML en esta sección,

index.html

<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>Document</title>
</head>
<body>
<p>This para is added via HTML</p>
<script src="myScript.js"></script>
</body>
</html>

Aquí sólo hay una etiqueta de párrafo en & lt; body & gt; .

Ahora vamos a ver a cabo MyScript.js :

const myNewParaElement = document.createElement('p')
myNewParaElement.textContent = 'This para is via JS'
document.querySelector('body').appendChild(myNewParaElement)

Ahora, esta línea creará el elemento de párrafo, veamos cómo.

En la primera línea, se utilizó el documento createElement ()

método y pasamos p como una etiqueta de párrafo cadena class & lt; p & gt; . Ahora llegamos a cabo etiqueta de párrafo, pero aún así, no hay texto en ella por lo que utilizar lo que hemos aprendido en nuestra última sección para agregar el contenido de texto en cualquier etiqueta.

Así que tenemos un elemento de párrafo completo, pero no se coloca en el documento HTML todavía, así que lo que vamos a hacer es, que añadirlo al HTML usando la tercera exposición de los MyScript.js utilizamos consulta de selección y elegir el cuerpo (donde queremos añadirlo) y luego agregar (poner en el último) nuestro elemento como su hijo. Voila! Hemos creado con éxito y añadimos un elemento en nuestro documento HTML usando JavaScript.

Understanding DOM with JavaScript - 15

Ahora cómo eliminar un elemento ? Es bastante simple, que me demuestro.

Con misma index.html sólo hacemos Además menor en nuestras MyScript.js para eliminar un párrafo.

MyScript.js

const myNewParaElement = document.createElement('p')
myNewParaElement.textContent = 'This para is via JS'
document.querySelector('body').appendChild(myNewParaElement)
document.querySelector('p').remove()

Así que acabamos de agregar una línea, a nuestra versión anterior de MyScript.js y este uso declaración de un método simple remove () y le van a quitar ese elemento.

Understanding DOM with JavaScript - 16


Deja un comentario

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