Métodos HTML DOM

querySelector ()

El método Document querySelector()devuelve el firstelemento dentro del documento que coincide con el selector o grupo de selectores especificado. Si no se encuentran coincidencias, se devuelve un valor nulo.

Contenido HTML:

 element-example 

Contenido de JavaScript:

document.querySelector("#id-example"); // Returns the element with id "id-example" document.querySelector(".class-example"); // Returns the element with class "class-example" document.querySelector("a"); // Returns the "a" element 

Note querySelector()devuelve el primer elemento coincidente, para devolver todas las coincidencias, utilice el método querySelectorAll () en su lugar.

 First Second 
document.querySelector("#example"); // Returns only the element containing 'First'

innerHTML

El innerHTMLaccesorio devuelve el contenido HTML dentro de un elemento seleccionado y también le permite definir un nuevo contenido HTML.

Obtener contenido del elemento

Demo

var element = document.getElementById("demo"); console.log(element.innerHTML) //logs 

Demo

Establecer el contenido del elemento

var element = document.getElementById("demo"); element.innerHTML = " Demo ";

El HTML ahora será como

 Demo 

Consideraciones de Seguridad

El valor establecido innerHTMLdebe provenir de fuentes confiables, ya que Javascript colocará cualquier cosa dentro de ese elemento y se ejecutará como HTML simple.

Ejemplo:

Establecer un alert();valor " " hará que se active la función "alert ()" de Javascript:

var element = document.getElementById("demo"); element.innerHTML = "alert();";

Este tipo de ataque se denomina Cross Site Scripting, o XSS para abreviar.

Esta es una de las formas más comunes de cometer un ataque XSS. Si quieres aprender un poco más y aprender a defenderte, consulta este recurso.

getElementById ()

El getElementById()método devuelve el elemento que tiene el atributo id con el valor especificado. Se necesita un argumento, que es una cadena que distingue entre mayúsculas y minúsculas del id del elemento que desea.

Este método es uno de los métodos más comunes en HTML DOM, y se usa casi cada vez que desea manipular u obtener información de un elemento en su documento. Aquí tienes un ejemplo simple de sintaxis:

Contenido HTML:

Contenido de JavaScript:

document.getElementById("demo"); // Returns the element with id "demo"

Si tiene más de un elemento con el mismo valor de id(¡mala práctica!), getElementByIdDevolverá el primer elemento encontrado:

 First Second 
document.getElementById("demo"); // Returns the element with id "demo" containing 'First'

Más información:

document.getElementById ()

Soluciones alternativas:

Una alternativa de uso común document.getElementByIdes usar un selector de jQuery, sobre el cual lee más aquí.

Más información sobre HTML DOM

Con HTML DOM, JavaScript puede acceder y cambiar todos los elementos de un documento HTML.

Cuando se carga una página web, el navegador crea una D DOCUMENTO O bject M odelo de la página.

El modelo HTML DOM se construye como un árbol de objetos:

Cada elemento del DOM también se denomina nodo.

   My title    My Link 

My header

El DOM para el HTML anterior es el siguiente:

DOM tree

Con el modelo de objetos, JavaScript obtiene todo el poder que necesita para crear HTML dinámico:

  • JavaScript can change all the HTML elements in the page
  • JavaScript can change all the HTML attributes in the page
  • JavaScript can change all the CSS styles in the page
  • JavaScript can remove existing HTML elements and attributes
  • JavaScript can add new HTML elements and attributes
  • JavaScript can react to all existing HTML events in the page
  • JavaScript can create new HTML events in the page