Cómo encontrar y obtener elementos HTML en JavaScript
Este artículo discutirá los procedimientos de encontrar y obtener elementos HTML en JavaScript. Además, los ejemplos relacionados con los métodos GetElementById (), GetElementsByTagName (), GetElementsByClassName () y QuerySelectorAll () se demostrarán en este artículo. Entonces, comencemos!
Cómo encontrar y obtener elementos HTML por ID en JavaScript
La mayoría de los desarrolladores de JavaScript utilizaron el getElementById () Método para encontrar y obtener elementos HTML que tengan identificaciones únicas. Si ha pasado una ID que no pertenece a ningún elemento HTML, el método getElementById () mostrará el valor nulo.
Sintaxis del método GetElementById ()
documento.getElementById (ElementId)Aquí el "elemento"Representa la identificación única del elemento HTML que desea encontrar y obtener en su código JavaScript.
Ejemplo: Busque y obtenga elementos HTML por ID en JavaScript
Agregaremos elementos HTML como un encabezado con el
etiqueta y tres elementos de párrafo con el
Etiqueta en el siguiente ejemplo. Tenga en cuenta que también hemos agregado "IDS"Con los elementos del párrafo:
Esto es linuxhint.comunicarse
Encuentre y obtenga elementos HTML por ID en JavaScript
Este es un programa JavaScript que utiliza el método "getElementsByID"
En el siguiente paso, encontraremos y obtendremos el elemento que tiene la identificación "P1"Al usar el"documento.getElementById ()" método. Después de Ding So, cambiaremos el contenido del elemento HTML recuperado:
Ejecute el programa anterior en su editor de código favorito o en cualquier Sandbox de codificación en línea; Sin embargo, utilizaremos el JSBIN para este propósito:
La ejecución del programa JavaScript anterior mostrará el siguiente resultado:
Cómo encontrar y obtener elementos HTML por TagName en JavaScript
Puedes utilizar el "getElementsBytagName ()"Método JavaScript para encontrar y obtener un elemento HTML específico por su nombre de etiqueta.
Sintaxis del método GetElementsBytagName ()
documento.getElementsBytagName (TagName)Aquí, el nombre de etiqueta representa el nombre de la etiqueta del elemento HTML que desea recuperar.
Ejemplo: Busque y obtenga elementos HTML por TagName en JavaScript
El ejemplo dado a continuación encontrará y obtendrá todos los elementos HTML que tengan el nombre de la etiqueta "pag"Uso del método GetElementsBytagName (). Después de eso, mostrará el contenido del HTML presente en el primer índice de la colección de objetos:
Esto es linuxhint.comunicarse
Buscar y obtener elementos HTML por nombre de la etiqueta en JavaScript
Este es un programa JavaScript que utiliza el método "getElementsByTagName"
Como puede ver, el texto del primer párrafo de nuestro programa JavaScript se muestra correctamente:
Cómo encontrar y obtener elementos HTML por ClassName en JavaScript
El "getElementsByClassName ()El método se utiliza para encontrar y obtener elementos HTML que tengan la misma clase. Al utilizar el nombre de la clase, cuando intente obtener un elemento HTML, el intérprete JavaScript devolverá todos los objetos que pertenecen a la misma clase. Después de eso, puede realizar operaciones específicas en esos elementos HTML.
Sintaxis del método GetElementsByClassName ()
documento.GetElementsByClassName (ClassName)Aquí el "nombre de la clase"Representa el nombre de clase de los elementos HTML que debe encontrar y obtener en su programa.
Ejemplo: Busque y obtenga elementos HTML por ClassName en JavaScript
En el siguiente ejemplo, hemos agregado un encabezado y algunos elementos de párrafo con el nombre de clase "C1":
Esto es linuxhint.comunicarse
Encuentre y obtenga elementos HTML por nombre de clase en JavaScript
texto en el primer párrafo
texto en el segundo párrafo
A continuación, buscaremos los elementos HTML que tienen "C1"Como su clase utilizando el método GetElementsByClassName () y almacenará las colecciones de los objetos en" "a":
Aquí está el resultado que obtuvimos al ejecutar el programa JavaScript anterior:
Cómo encontrar y obtener elementos HTML de CSS Selector en JavaScript
En html, el QuerySelectorAll () El método devuelve un objeto nudelista estático que comprende una colección de los elementos infantiles de un elemento coincidente con los selectores CSS especificados. Los números de índice se utilizan para encontrar y obtener los nodos, comenzando en 0.
Sintaxis del método QuerySelectorAll ()
elemento.QuerySelectorAll (selectores)El método QuerySelectorAll () toma "selectoresComo argumento, una cadena DOM comprende uno o más selectores CSS válidos.
Ejemplo: Busque y obtenga elementos HTML por el selector CSS en JavaScript
En el programa JavaScript otorgado a continuación, hemos utilizado el método QuerySelectorAll () para encontrar y obtener los elementos HTML del párrafo que tienen "C1"Como nombre de clase:
Esto es linuxhint.comunicarse
Encuentre y obtenga elementos HTML por nombre de clase en JavaScript
texto en el primer párrafo
texto en el segundo párrafo
Consulte la salida del método JavaScript QuerySelectorAll ():
Conclusión
getElementById (), GetElementsBytagName (), GetElementSByClassName () y QuerySelectorAll () son los métodos JavaScript más comunes que se utilizan para encontrar y obtener elementos en un programa JavaScript. Puede usar cualquiera de los métodos mencionados para buscar un elemento HTML específico en el código. Este artículo sobre los procedimientos de encontrar y obtener elementos HTML en JavaScript. Además, los ejemplos relacionados con los métodos GetElementById (), GetElementsByTagName (), GetElementsByClassName () y QuerySelectorAll () también se demuestran en este artículo.