JavaScript se usa para agregar interactividad a una página HTML estática; Pero para agregar interactividad, necesita acceder a los elementos HTML presentes en el DOM. JavaScript ofrece una serie de métodos para acceder a los elementos HTML presentes en DOM. Aquí discutiremos la mayoría de ellos con gran detalle:

Cómo acceder a un elemento DOM por su ID usando JavaScript

Uno de los métodos más comunes para acceder a un elemento en HTML DOM es getElementById () que accede a un elemento basado en el valor de su atributo de identificación. Se supone que el valor de los atributos de identificación es único y no hay dos elementos en una sola página HTML debería tener IDS similares. Incluso si hay múltiples elementos que tienen la misma identificación, el getElementById () El método devuelve solo un elemento (el primer elemento con esa identificación en el archivo HTML).

Ahora echaremos un vistazo a un ejemplo para comprender mejor cómo getElementById () El método funciona.

Nota: La consola del navegador se utiliza para la demostración de ejemplos en este artículo.

El siguiente archivo HTML se utilizará para este ejemplo; El JavaScript se agregará dentro del Etiquetas que se utilizan específicamente para incrustar el código JavaScript directamente dentro de un archivo HTML.

Cómo obtener elementos en JavaScript del DOM?

Cómo acceder a un elemento DOM por su identificación?

getElementById ()

En el archivo HTML dado anteriormente tenemos un párrafo con una ID única I.mi. ID de ejemplo. Si queremos acceder a este elemento de párrafo, podemos usar el getElementById () método:

Ahora podemos usar la variable de párrafo recién creado para manipular la ID de ejemplo Elemento directamente de JavaScript E.G Si queremos cambiar el fondo y el color de texto del párrafo, entonces:

Cómo acceder a los elementos DOM por su clase

El getElementsByClassName () El método se puede usar para obtener múltiples elementos que tienen el mismo valor de atributo de clase. Para mostrar cómo el getElementsByClassName () El método funciona, modificaremos nuestro archivo HTML de la siguiente manera:

Cómo obtener elementos en JavaScript del DOM?

Cómo acceder a los elementos DOM por su clase?

getElementsByClassName ()

El getElementsByClassName () El método devuelve todos los elementos que tienen una clase específica en forma de una matriz. Entonces, si queremos modificar solo uno de los elementos presentes dentro de la matriz devuelta, necesitaremos acceder a ella con su número de índice:

Podemos usar un bucle for si queremos aplicar los mismos cambios a todos los elementos de la matriz:

Cómo acceder a los elementos DOM por su etiqueta

JavaScript también proporciona el getElementsBytagName () Método que se puede utilizar para acceder a todos los elementos que tienen la misma etiqueta HTML:

Cómo obtener elementos en JavaScript del DOM?

• método getElementById ()


• método getElementsByClassName ()


• método getElementsByName ()


• método getElementsByTagName ()


• método QuerySelector ()


• método QuerySelectorAll ()

Podemos usar nuevamente un bucle para aplicar los mismos cambios a todos los elementos presentes dentro de la nueva matriz:

Cómo acceder a los elementos DOM utilizando los métodos de selectores de consultas

JavaScript también tiene el QuerySelector () y el QuerySelectorAll () Métodos que se pueden utilizar para acceder a los elementos HTML DOM. Para acceder a un solo elemento podemos usar el QuerySelector () método; Si hay múltiples elementos con la misma identificación o clase, entonces el QuerySelector () El método devuelve el primer elemento:

Cómo obtener elementos en JavaScript del DOM?

método getElementById ()

método getElementsByClassName ()

método getElementsByName ()

método getElementsByTagName ()

método QuerySelector ()

método QuerySelectorAll ()

El # El signo es el selector del atributo de identificación, mientras que el . El signo es el selector para el atributo de clase.

El QuerySelectorAll () El método devuelve una matriz que contiene todos los elementos DOM con un nombre de clase específico o una ID:

Cómo obtener elementos en JavaScript del DOM?

método getElementById ()

método getElementsByClassName ()

método getElementsByName ()

método getElementsByTagName ()

método QuerySelector ()

método QuerySelectorAll ()

Podemos realizar diferentes métodos como .para cada() método en las matrices devueltas por el QuerySelectorAll (). Estos métodos no funcionan con las matrices devueltas por getelement métodos.

Conclusión

Acceder a los elementos HTML DOM y hacerlos interactivos a través de JavaScript es la parte más básica pero esencial de cualquier trabajo de Develoepr. Aquí hemos enumerado los cinco métodos más comunes utilizados en JavaScript para acceder a DOM Elements.