Obtenga elementos infantiles por nombre de la etiqueta usando JavaScript
Mientras se programan en JavaScript, puede haber múltiples elementos contra el mismo nombre de etiqueta que debe obtenerse para realizar una funcionalidad específica. Estos elementos se pueden utilizar para asociar los elementos de los padres e hijos. En tal caso, escenarios, obtener elementos infantiles por nombre de la etiqueta usando JavaScript es de gran ayuda para simplificar la complejidad del código y proporcionar una utilidad al usuario final.
Este tutorial explicará los enfoques para obtener elementos infantiles por nombre de la etiqueta en JavaScript.
Cómo obtener elementos infantiles usando el nombre de la etiqueta en JavaScript?
Para obtener elementos infantiles por nombre de la etiqueta en JavaScript, aplique los siguientes métodos:
- "QuerySelectorAll () "
- "getElementById ()" y "getElementsBytagName ()" métodos.
Método 1: Obtenga elementos infantiles por nombre de la etiqueta en JavaScript usando el método QuerySelectorAll ()
El "QuerySelectorAll ()El método "obtiene todos los elementos que coinciden con un selector (s) CSS y devuelven una lista de nodos. Este método se puede aplicar para obtener los elementos infantiles correspondientes refiriéndose al "identificación"Del elemento principal y el nombre de la etiqueta de los elementos infantiles de una vez.
Sintaxis
documento.QuerySelectorAll (selectores)
En la sintaxis dada:
- "selectores"Corresponde a uno o más de un selector CSS.
Ejemplo
Veamos el siguiente ejemplo:
Esta es una imagen
En el fragmento de código anterior:
- Incluir la "div"Elemento tiene el declarado"identificación".
- Además, agregue un encabezado y una imagen como "niño"Elementos, respectivamente.
- En el código de JavaScript, acceda al "div"Elemento (padre) por su"identificación"Y el encabezado (niño) y la imagen (niño) por su"etiqueta" nombre.
- Esto devolverá los elementos infantiles obtenidos por los nombres de las etiquetas en el último paso.
Producción
La salida anterior significa que los elementos infantiles se obtienen con éxito. Pasemos al siguiente enfoque para lograr la misma funcionalidad.
Método 2: Obtenga elementos infantiles por nombre de la etiqueta en JavaScript usando getElementById () y getElementsBytagName () métodos
El "getElementById ()El método "proporciona un elemento que tiene la identificación correspondiente y el"getElementsBytagName ()El método devuelve una colección de todos los elementos que tienen el nombre de la etiqueta. Estos métodos se pueden implementar también para obtener el elemento principal por su identificación y los elementos infantiles por su nombre de etiqueta. Pero aquí, se requieren métodos separados para realizar la funcionalidad especificada por separado.
Sintaxis
documento.getElementById (ID)
En la sintaxis anterior:
- "IDENTIFICACIÓN"Señala el elemento asociado"identificación"
documento.getElementsBytagName (etiqueta)
En la sintaxis proporcionada:
- "etiqueta"Representa el nombre de la etiqueta del elemento.
Ejemplo
Pasemos por el siguiente ejemplo:
Nombre Edad Ciudad Harry 25 los Angeles
Aplique los siguientes pasos que se dan en el código anterior:
- Especifica el "mesa"Elemento (padre) tiene el especificado"identificación".
- Después de eso, agregue el "datos de tabla"
elemento que tiene los datos especificados dentro del "fila de la tabla" elemento. - En el código JavaScript, en primer lugar, obtenga el elemento principal por su ID usando el "getElementById ()" método.
- Además, acceda al elemento infantil por su nombre de etiqueta usando el "getElementsBytagName ()"Método simultáneamente.
- Esto dará como resultado obtener todos los elementos infantiles correspondientes al nombre de la etiqueta establecido.
Producción
En la salida anterior, se puede observar que todos los "TD"Los elementos infantiles dentro de la tabla (padre) se obtienen con éxito.
Conclusión
El "QuerySelectorAll ()"Método, el"getElementById ()", o el "getElementsBytagName ()Los métodos se pueden utilizar para obtener elementos infantiles por nombre de la etiqueta usando JavaScript. El método anterior se puede aplicar para acceder al elemento principal por su identificación y los elementos infantiles por sus nombres de etiquetas por separado. Los últimos métodos se pueden implementar para obtener la identificación del elemento principal y los nombres de etiquetas de los elementos infantiles utilizando métodos separados para cada funcionalidad. Este blog demostró obtener los elementos infantiles por nombre de la etiqueta en JavaScript.