Explicar varios tipos de métodos HTML DOM

Posted on by Rudeus Greyrat

Hay algunos casos en los que el marcado HTML debe manipularse dinámicamente sin cambiar realmente el código fuente HTML. Para lograr esto, los usuarios pueden hacer uso de una variedad de métodos HTML DOM presentes en JavaScript a su disposición. En primer lugar, es importante comprender qué es el modelo de objeto de documento HTML (DOM) . En palabras simples, se puede clasificar como una interfaz de programaciónpara documentos HTML y XML ( lenguaje de marcado extensible ) . Define la estructura lógica de los documentos en forma de un árbol de objetos donde cada elemento HTML se representa como un Node y también describe la forma en que se pueden manipular estos documentos como se mencionó anteriormente.

Ahora que llegamos a los métodos HTML DOM, hay seis métodos diferentes en los que los usuarios pueden acceder o manipular elementos HTML usando JavaScript:

Estos métodos se ilustran con algunos fragmentos de código de muestra a continuación:

HTML DOM getElementById(): este método se usa cuando los desarrolladores han definido ciertos elementos HTML con ID que identifican de forma única los mismos elementos en todo el documento. Devuelve un objeto Element que coincide con el ID especificado en el método. Si el ID no existe en el documento, simplemente devuelve nulo .

Sintaxis:

document.getElementById(id);

Parámetro: Tiene un solo parámetro como se mencionó anteriormente y se describe a continuación:

  • id: El ID del elemento a ubicar en el documento HTML. Debe ser una string que distinga entre mayúsculas y minúsculas.

Valor devuelto: Devuelve el objeto correspondiente al ID pasado en el método, o nulo si no se encuentra ninguna coincidencia.

Ejemplo: El siguiente ejemplo demuestra claramente el uso del método getElementById() .

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h2>GFG</h2>
  
    <!-- Paragraph element with an id of "geeks" -->
    <p id="geeks">Geeks</p>
  
    <script>
        const paragraph = 
              document.getElementById("geeks");
        console.log(
          "The selected element is " + paragraph
        );
    </script>
</body>
  
</html>

Producción:

HTML DOM getElementsByClassName(): este método se utiliza cuando hay varios elementos HTML con el mismo nombre de clase. Devuelve una colección de todos los objetos que coinciden con la clase especificada en el método.

Sintaxis:

document.getElementsByClassName(className);

Parámetro: Tiene un solo parámetro como se mencionó anteriormente y se describe a continuación:

  • className : el nombre de clase de los elementos que se ubicarán en el documento HTML. Debe ser una string que distinga entre mayúsculas y minúsculas.

Valor devuelto: Devuelve una colección de objetos correspondientes al nombre de clase pasado en el método.

Ejemplo : El siguiente ejemplo demuestra claramente el uso del método getElementByClassName(). Dado que este método devuelve una colección de objetos, también se pueden seleccionar objetos individuales mediante la indexación (rango de 0 – (longitud de la colección-1))

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h2>GFG</h2>
  
    <!-- Div elements with class names
    of "geeks-for-geeks" -->
    <div class="geeks-for-geeks">Geeks</div>
    <div class="geeks-for-geeks">For</div>
    <div class="geeks-for-geeks">Geeks</div>
    <script>
        const divs = document.getElementsByClassName(
          "geeks-for-geeks"
        );
        console.log(divs);
  
        // Select first element with
        // class "geeks-for-geeks"
        console.log(divs[0]);
    </script>
</body>
  
</html>

Producción: 

HTML DOM getElementsByName() : en Javascript, getElementsByName() devuelve una lista de Nodes de objetos que coinciden con un atributo de nombre particular en el documento HTML.

Sintaxis:

document.getElementsByName(nameAttribute);

Parámetro: Tiene un solo parámetro como se mencionó anteriormente y se describe a continuación:

  • nameAttribute: El atributo de nombre de los elementos a ubicar en el documento HTML. Debe ser una string que distinga entre mayúsculas y minúsculas.

Valor devuelto: Devuelve una NodeList de objetos correspondientes al atributo de nombre pasado en el método.

Ejemplo: El siguiente ejemplo demuestra claramente el uso del método getElementByName() . Dado que este método devuelve una lista de Nodes de objetos, los objetos individuales también se pueden seleccionar indexando (rango de 0 – (longitud de NodeList-1)) (igual que getElementsByClassName).

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h2>GFG</h2>
  
    <!-- Input elements with name 
    attributes of "geek" -->
    <input type="text" placeholder="Text input"
           name="geek" />
    <input type="number" placeholder="Number input"
           name="geek" />
    <script>
        const inputs = document.getElementsByName("geek");
        console.log(inputs);
  
        // Select second element with
        // name attribute "geek"
        console.log(inputs[1]);
    </script>
</body>
  
</html>

Producción: 

HTML DOM getElementsByTagName() : getElementsByTagName() devuelve una colección HTML de objetos que coinciden con un nombre de etiqueta en el documento HTML.

Sintaxis:

document.getElementsByTagName(tagName);

Parámetro: Tiene un solo parámetro como se mencionó anteriormente y se describe a continuación:

  • tagName: el nombre de etiqueta de los elementos que se ubicarán en el documento HTML. Debe ser una string que distinga entre mayúsculas y minúsculas.

Valor de retorno: Devuelve una HTMLCollection de objetos correspondientes al nombre de la etiqueta pasada en el método.

Ejemplo: El siguiente ejemplo demuestra claramente el uso del método getElementByTagName(). Dado que este método devuelve una HTMLCollection de objetos, los objetos individuales también se pueden seleccionar indexando (rango de 0 – (longitud de HTMLCollection-1))

HTML

<!DOCTYPE html>
<html>
  
<body>
    <!-- Various HTML elements with
    different tag names -->
    <div>GFG</div>
    <p>Geeks</p>
    <p>For</p>
    <p>Geeks</p>
  
    <script>
        const p = document.getElementsByTagName("p");
        console.log(p);
  
        // Select third element with tag name "p"
        console.log(p[2]);
    </script>
</body>
  
</html>

Producción: 

HTML DOM querySelector(): este método devuelve la primera coincidencia de un elemento que se encuentra dentro del documento HTML con el selector específico. Si no hay ninguna coincidencia , se devuelve nulo .

Sintaxis:

document.querySelector(selector);

Parámetro: Tiene un solo parámetro como se mencionó anteriormente y se describe a continuación:

  • selector: una string que contiene uno o más selectores para hacer coincidir elementos ubicados en el documento HTML.

Valor devuelto: Devuelve la primera aparición del objeto correspondiente al selector pasado en el método.

Ejemplo: El siguiente ejemplo demuestra claramente el uso del método querySelector() .

HTML

<!DOCTYPE html>
<html>
  
<body>
    <!-- Various HTML elements with
    different tag names -->
    <div class="gfg">GFG</div>
    <p>Geeks</p>
    <p id="para">For</p>
    <p>Geeks</p>
  
    <script>
  
        // Using "." for prefix class selector
        const div = 
              document.querySelector(".gfg");
  
        // Using tag name for tag selector
        const firstParagraph = 
              document.querySelector("p");
  
        // Using "#" prefix for ID selector
        const secondParagraph = 
              document.querySelector("#para");
        console.log(
          div, firstParagraph, secondParagraph
        );
    </script>
</body>
  
</html>

Producción:

HTML DOM querySelectorAll(): este método devuelve una lista de Nodes estática de todos los elementos que se encuentran dentro del documento HTML con el selector específico.

Sintaxis:

document.querySelectorAll(selector);

Parámetro: Tiene un solo parámetro como se mencionó anteriormente y se describe a continuación:

  • selector: una string que contiene uno o más selectores para hacer coincidir elementos ubicados en el documento HTML.

Valor devuelto: Devuelve una NodeList de los objetos correspondientes al selector pasado en el método.

Ejemplo: El siguiente ejemplo demuestra claramente el uso del método querySelectorAll() .

HTML

<!DOCTYPE html>
<html>
  
<body>
    <!-- Various HTML elements with
    different tag names -->
    <div class="gfg">GFG</div>
    <div class="gfg">G</div>
    <div class="gfg">F</div>
    <div class="gfg">G</div>
    <p>Geeks</p>
  
    <script>
          
        // Using "." for prefix class selector
        const divs = 
              document.querySelectorAll(".gfg");
        console.log(divs);
    </script>
</body>
  
</html>

Producción: 

Publicación traducida automáticamente

Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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