Se puede acceder a los elementos HTML utilizando los métodos JavaScript. Los métodos JavaScript acceden a los elementos HTML de DOM (estructura lógica similar a un árbol de los documentos web). JavaScript proporciona soporte de cinco métodos que usan nombre, identificación, nombre de clase, nombre de etiqueta o el selector CSS para acceder a los objetos. Al acceder a elementos HTML usando JavaScript, puede manipular elementos HTML. Este artículo proporciona una demostración de posibles formas de acceder a elementos HTML utilizando métodos JavaScript.

Cómo acceder a los elementos HTML utilizando métodos JavaScript

Los cinco métodos de JavaScript ayudan a acceder a los elementos HTML y estos métodos se describen a continuación.

Cómo acceder a los elementos HTML por ID

El atributo de identificación identifica de manera única el elemento HTML, y el siguiente método de JavaScript ayudaría a obtener los elementos HTML por ID.

La identificación se refiere al elemento HTML y JavaScript lo utiliza para acceder a ese elemento HTML. El objeto (en DOM) que coincide con la identificación se devolvería.

Ejemplo:

El código proporcionado a continuación ejerce el getElementById () Método de JavaScript.

El código anterior accede al elemento que tiene id = un1 y luego el valor de ese elemento se manipula a "Hola mundo!".

Producción

Desde la salida, se observa que el contenido original de

ha sido cambiado a "Hola mundo!".

Cómo acceder a los elementos HTML por nombre

JavaScript también puede utilizar el atributo de nombre de los elementos para acceder a los elementos HTML. Sin embargo, un solo nombre puede asociarse con múltiples elementos HTML. El código proporcionado hace uso del getElementsByName () método.

Dos párrafos tienen los mismos nombres; Por lo tanto, tenemos que definir el número de índice de cada párrafo (al momento de usar el método). El número de índice del primer párrafo se conoce como [0] y el segundo párrafo como [1].

Producción

Se observa a partir de la salida que el contenido del párrafo (en el índice [1]) ha cambiado.

Cómo acceder a los elementos HTML por TagName

El método JavaScript getElementsBytagName () se usa aquí para acceder a los elementos por sus nombres de etiquetas.

El código anterior accede al párrafo (en el índice [0]) y cambia su valor a "se accede al párrafo".

Nota: Un documento HTML comprende varias etiquetas y si va a acceder a ellas usando JavaScript's getElementsBytagName () método, debe mencionar el número de índice del elemento.

Producción

La salida muestra que el contenido del párrafo en el índice 0 ha cambiado.

Cómo acceder a los elementos HTML por classname

El getElementsByClassName () El método de JavaScript se usa aquí para acceder a los elementos HTML.

El código anterior accede a la clase llamada "dos"Y cambia su contenido. Un documento puede contener varias clases de los mismos nombres; Por lo tanto, un número de índice también es obligatorio en este caso.

Producción

La salida muestra que el contenido del nombre de la clase (nombrado dos) ha sido cambiado.

Cómo acceder a los elementos HTML por QuerySelector

Un elemento HTML puede tener clases e identificaciones, que pueden usarse para cambiar los estilos de los elementos. El QuerySelector () El método de JavaScript le permite obtener los elementos que coinciden con el selector CSS específico. El queryselector se divide aún más en dos métodos;

• El QuerySelector () El método devuelve el primer elemento (que coincide con la expresión)
• El QuerySelectorAll () El método devuelve todos los elementos coincidentes

Nota: Para acceder a la clase, debe poner el punto (.) Antes del nombre de clase y para ID, debe usar el (#) signo antes del nombre de ID.

Ejemplo 1: Uso del método QuerySelector ()

El código escrito a continuación usa el QuerySelector () método para obtener el primer elemento que coincida con la condición.

En el código anterior, el QuerySelector () El método se aplica a los elementos que tienen class = "LH".

Producción

La salida muestra que se ha accedido al primer párrafo (que coincide con el nombre de clase y la ID) y se actualiza su contenido.

Ejemplo 2: Uso del método QuerySelectorAll ()

Como se discutió anteriormente el QuerySelector () El método solo accede a la primera coincidencia. Puedes usar el QuerySelectorAll () método para acceder al elemento de su elección como lo hemos hecho en el siguiente ejemplo.

El código anterior practica el QuerySelectorAll () Método para acceder a los elementos que tienen id = "Naciones Unidas". El número de índice es obligatorio para poner y hemos usado [1] aquí.

Producción

Se concluye de la salida que los selectores CSS, como la clase y la identificación, han sido utilizados por el QuerySelectorAll () Método para acceder/cambiar el contenido del párrafo en el índice 1.

Conclusión

El JavaScript puede acceder a los elementos HTML utilizando el Nombre, ID, ClassName, TagName y Queryselector de los elementos HTML. Estos métodos también se pueden usar para manipular el contenido de un elemento HTML. Este artículo demuestra los cinco métodos de JavaScript que acceden a los elementos HTML por varios medios. El id, nombre de clase y nombre de etiqueta Los métodos tienden a acceder directamente a los elementos HTML. sin embargo, el QuerySelector ()/QuerySelectorAll () El método utiliza selectores CSS para acceder y cambiar los elementos HTML.