002. Métodos del DOM

Los métodos HTML DOM son acciones que pueden realizar (en elementos HTML). Las propiedades HTML DOM son valores (de elementos HTML) que pueden configurar o cambiar.

El DOM Programming Interface

El DOM HTML puede ser accedido con Javascript (y con otros lenguajes de programación). En el DOM, todos los elementos HTML son definidos como objetos. La interfaz de programación son las propiedades y métodos de cada objeto.

  • Una propiedad es un valor que puede obtener o establecer (como cambiar el contenido de un elemento HTML).
  • Un método es una acción que puedes realizar (como añadir o eliminar un elemento HTML).

Ejm

En el siguiente ejm cambiaremos el contenido de un elemento <p> con su id=”demo”. mediante la propiedad innerHTML.

Ejm

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cambiar el valor de un elemento p</title>
  </head>

  <body>
    <h1>Cambiar el valor de un elemento p</h1>

    <p id="demo"></p>

    <script>
      document.getElementById("demo").innerHTML = "Hola Mundo";
    </script>
  </body>
</html>

En el ejm de arriba, getElementById() es un método, mientras que innerHTML es una propiedad.

El método getElementById

La manera más común de acceder a un elemento HTML es utilizando el identificador (id) de dicho elemento. En el ejm de arriba, se usa el método getElementById(id) para encontrar el elemento.

La propiedad innerHTML

La manera más rápida de obtener el contenido de un elemento es usando la propiedad innerHTML, la cual se utilizar para obtener o actualizar el contenido de elementos HTML, y puede también utilizarse con las etiquetas <html> y <body>.

Scroll al inicio