Métodos para acceder/obtener elementos en el DOM | explicado con ejemplos

JavaScript es el lenguaje de secuencias de comandos más utilizado para cambiar los elementos de una página web, a decir verdad, ningún lenguaje de secuencias de comandos puede interactuar directamente con los elementos HTML. El lenguaje de secuencias de comandos interactúa con el Domina (modelo de objeto de documento) y el DOM interactúa con los elementos HTML porque DOM es una interfaz de aplicación neutral en el lenguaje (API).

En esta publicación, vamos a aprender sobre diferentes métodos que podemos usar en JavaScript que nos ayudarán a alterar los elementos HTML utilizando la interfaz DOM.

Access \ get métodos

JavaScript nos proporciona 5 métodos diferentes a través de los cuales podemos interactuar con DOM para acceder a un elemento en la página web. Estos métodos son a saber:

• getElementById (ID)
• GetElementsByClassName (ClassName)
• getElementsBytagName (TagName)
• QuerySelector (css_selector)
• QuerySelectorAll (css_selector)

Uso de acceso \ get métodos

Para demostrar el uso de estos métodos Get \ Access, primero debemos configurar un archivo HTML y vincular un archivo JavaScript utilizando la siguiente línea:

Ahora, necesitamos configurar elementos dentro de nuestro archivo HTML, podemos hacerlo usando las siguientes líneas:

Tengo la identificación de "Demoid"


Tengo la clase "prueba"
También tengo la clase "prueba"


Tengo la etiqueta "artículo"
También tengo la etiqueta "artículo"


Tengo la consulta como "QuerySelect"


Tengo la consulta como "QuerySelectall"

También tengo la consulta como "QuerySelectall"

Como puede ver, tenemos algunos con identificación, algunos con clases Y hemos usado un Etiqueta también. Ejecutar este archivo HTML nos dará el siguiente resultado:

Acceder a un elemento usando su identificación

El primer método que vamos a probar es el getElementById (), Vamos a acceder al elemento con la identificación "Demoid" Y vamos a cambiar su estilo utilizando las siguientes líneas de código en nuestro archivo JavaScript:

VAR DEMOID = documento.getElementById ("Demoid");
demo.estilo.backgroundColor = "Yellow";

Después de ejecutar el archivo obtenemos la siguiente salida en nuestro navegador:

Como puede ver, pudimos acceder al elemento usando su IDENTIFICACIÓN y luego cambie el estilo del elemento usando JavaScript.

Acceder a elementos usando su nombre de clase

El método GetElementByClassName () devuelve varios elementos que tienen el mismo nombre de clase. Podemos acceder a elementos usando su nombre de clase con la siguiente línea de código:

var testClass = documento.GetElementsByClassName ("Test");

Dado que tenemos 2 elementos con el nombre de clase "prueba", por eso nuestra variable "TestClass" es de la matriz de tipos y si queremos cambiar los atributos de los elementos dentro de la matriz, tenemos que referirnos a ellos utilizando sus índices de matriz como

TestClass [0].estilo.borde = "2px de verde sólido";
TestClass [1].estilo.borde = "2px sólido marrón";

Al ejecutar obtenemos la siguiente salida:

Acceso a elementos usando su nombre de etiqueta

Para seleccionar elementos usando su nombre de etiqueta, usamos el método getElementBytagName (), En nuestro ejemplo, para seleccionar los elementos con el nombre de la etiqueta "artículo" Usamos la siguiente línea:

var tagSelect = documento.getElementsBytagName ("Artículo");

De nuevo, tenemos dos elementos con el mismo nombre de la etiqueta "artículo" Por lo tanto, vamos a cambiar manualmente sus atributos utilizando sus índices de matriz:

tagSelect [0].innerhtml = 'He cambiado mi texto';
tagSelect [1].innerhtml = 'También he cambiado mi texto';

Si ejecutamos el archivo ahora, obtenemos la siguiente salida en nuestro navegador:

Como puede ver, hemos cambiado el texto de los elementos con el Nombre de la etiqueta "Artículo".

Acceder a un elemento usando el selector de consultas

Podemos seleccionar elementos utilizando un selector de consultas, para hacer que usamos el método documento.QuerySelector (), y si queremos seleccionar un elemento con un identificación, Usamos el "#" símbolo en el selector de consultas como

var QuerySelect = documento.QuerySelector ("#QuerySelect");

Después de haber accedido al elemento, podemos cambiar su borde con la siguiente línea:

consulta.estilo.borde = "1px rojo sólido";

Obtendrá el siguiente resultado en su navegador:

Acceder a un elemento utilizando todos los selectores de consultas

Podemos seleccionar todos los elementos con la misma consulta utilizando el método QuerySelectorAll (). Agregue la siguiente línea en el archivo JavaScript:

const deloqueryall = documento.QuerySelectorall (".QuerySelectall ");

Para cambiar los atributos de ambos elementos accedidos por este QuerySelectorAll (), use las siguientes líneas de código:

demoqueryal.foreach ((consulta) =>
consulta.estilo.borde = "1px de verde sólido";
);

Obtendrá los siguientes resultados en su navegador:

Eso es todo para acceder a elementos utilizando todos los métodos ofrecidos por JavaScript.

Conclusión

Hay 5 métodos principales proporcionados por JavaScript que nos ayudan a acceder a los elementos de una página web HTML con la ayuda de la interfaz DOM. En esta publicación, aprendimos sobre los 5 métodos, implementamos todos esos métodos cambiando los atributos de los elementos que accedimos. Necesitamos la interfaz DOM para hacer todas estas alteraciones porque ningún lenguaje de secuencias de comandos puede acceder directamente a los elementos HTML, sino que el DOM funciona como API para el lenguaje de secuencias de comandos.