Modelo de objetos de documento (DOM)

(Las imágenes provienen de Internet)

HTML DOM es el modelo de objetos de documento HTML o abreviatura de. HTML DOM es un estándar del W3C (World Wide Web Consortium) que define elementos HTML como objetos. Cada elemento HTML (es decir, <h1>, <p>, <a>, etc.) puede considerarse como un objeto que contiene :

Métodos (acciones que se pueden realizar sobre elementos HTML)
Propiedades (valores HTML que se pueden configurar o cambiar)
Eventos (cosas que pueden sucederle a los elementos HTML)

Por tanto, el HTML DOM define:

Estándar para acceder a documentos HTML
Propiedades, métodos y eventos para todos los elementos HTML.

HTML DOM proporciona un estándar para que:

Cambiar elementos y atributos HTML existentes
Agregar y eliminar elementos y atributos HTML
Cambiar el estilo de los elementos HTML
Responder o agregar eventos HTML

Objeto de documento DOM

El objeto del documento se encuentra en la parte superior del DOM HTML y es el padre de todos los demás objetos cargados en la página. Si necesitamos acceder a cualquier otro elemento de la página, ahora comencemos con el objeto Documento.

Cuando se analiza cómo ejecutar JavaScript cuando se activa el evento onclick de un botón (es decir, se hace clic en el botón).

En las siguientes secciones, se estudiarán los siguientes métodos :

obtenerElementoPorId

También se examinarán las tres propiedades siguientes :

HTML interno
estilo
atributo

método getElementById

El objeto de documento tiene un método especial llamado getElementById , que se utiliza de la siguiente manera:

document.getElementById(id)

Un ejemplo práctico:

<!DOCTYPE html>
<html>
<body>
    <button onclick="getById()">Push me</button>
    <p id="test">Lets learn some JavaScript!</p>
    <script>
        function getById() {
            document.getElementById("test");           
        }
    </script>
</body>
</html>

En el ejemplo anterior, se llama a la función getById cuando se produce el evento onclick del botón y luego:

Usamos el método getElementById para obtener el elemento por id test , en este caso es el párrafo

¿Qué pasa entonces? Bueno, nada... No le hicimos nada a ese elemento.

propiedad HTML interna

La sección anterior muestra cómo obtener un elemento por su identificación. Ahora hagamos algo con eso.

<!DOCTYPE html>
<html>
<body>
    <button onclick="changeHTML()">Push me</button>
    <p id="test">Lets learn some JavaScript!</p>
    <script>
        function changeHTML() {
            document.getElementById("test").innerHTML = "We are learning JavaScript!";
        }
    </script>
</body>
</html>

En el ejemplo anterior, cuando ocurre el evento onclick del botón, se llama a la función changeHTML y luego:

Usamos el método getElementById para obtener el elemento por id test , en este caso es el párrafo
Cambiamos el contenido del párrafo asignando el valor "¡Estamos aprendiendo JavaScript!" a su atributo HTML interno .

atributo de estilo

Otra propiedad que se puede cambiar al obtener un elemento por id. Por favor mire el código a continuación:

<!DOCTYPE html>
<html>
  <body>
    <button onclick="changeColour()">Push me</button>
    <p id="test">Lets learn some JavaScript!</p>   
    <script>
      function changeColour() {
        document.getElementById("test").style.color = "blue";
      }
    </script>
  </body>
</html>

En el ejemplo anterior, cuando ocurre el evento de clic en el botón, se llama a la función changeColor y luego:

Utilice el método getElementById para obtener el elemento mediante la prueba de identificación , en este caso el párrafo
Cambie el color del texto en un párrafo asignando el valor "azul" a su propiedad style.color

Aquí hay otro código de ejemplo:

<html>
  <body>
    <button onclick="changeColour()">Push me</button>
    <p id="test">Lets learn some JavaScript!</p>   
    <script>
      function changeColour() {
        document.getElementById("test").style.fontSize = "40px";
      }
    </script>
  </body>
</html>

Este contiene un botón y un párrafo. Cuando se hace clic en el botón, changeColour() se llama a una función de JavaScript. Esta función document.getElementById("test") obtiene un id="test" elemento con y luego usa style.fontSize el atributo para establecer el tamaño de fuente de ese elemento en "40px". Es decir, cuando se hace clic en el botón, el texto del párrafo se representará a 40 píxeles.

atributo atributo

¿Cómo cambio el valor de un atributo HTML? En este caso el atributo src de la imagen.

<!DOCTYPE html>
<html>
  <body>
    <button onclick="changeImage()">Push me</button>
    <img id="someImage" src="smile.png">  
    <script>
      function changeImage() {
        document.getElementById("someImage").src = "frown.png";
      }
    </script>
  </body>
</html>

Este contiene un botón y una imagen. Cuando se hace clic en el botón, changeImage() se llama a una función de JavaScript. Esta función document.getElementById("someImage") obtiene un id="someImage" elemento con y luego usa src el atributo para cambiar la dirección de la imagen del elemento a "frown.png". Es decir, cuando se hace clic en el botón, la imagen cambiará de "smile.png" a "frown.png".

método crearElement

<!DOCTYPE html>
<html>
<body>
  <button onclick="create()">Push me</button>
  <script>
    function create() {
      let paragraph = document.createElement("p");   
      paragraph.innerHTML = "This is a paragraph.";   
    }
  </script>
</body>
</html>

En el código anterior:

Crea un elemento HTML y asígnalo a una variable.
y configurando el HTML interno del elemento

¿Qué pasa entonces? Bueno, nada... Aún no hemos añadido ese elemento al documento.

método appendChild

No basta con crear un nuevo elemento. También es necesario agregarlo al documento.

<!DOCTYPE html>
<html>
<body>
  <button onclick="create()">Push me</button>
  <script>
    function create() {
      let paragraph = document.createElement("p");
      paragraph.innerHTML = "This is a paragraph.";
      document.body.appendChild(para);
    }
  </script>
</body>
</html>

En el código anterior, después de crear el elemento y asignar la cadena al elemento internalHTML, se utiliza el método appendChild para agregar el elemento al documento.

eliminar método

<!DOCTYPE html>
<html>
<body>
  <button onclick="remove()">Push me</button>
  <p id="someText">This is a paragraph.</p>
  <script>
    function remove() {
      let paragraph = document.getElementById("someText")
      paragraph.remove();
    }
  </script>
</body>
</html>

El código anterior contiene un botón y un párrafo. Cuando se hace clic en el botón, remove() se llama a una función de JavaScript. Esta función document.getElementById("someText") toma un id="someText" elemento y luego usa remove() el método para eliminar completamente el elemento del documento. En otras palabras, cuando se hace clic en el botón, el párrafo se eliminará de la página.