¿Cuál sería el método más eficiente para encontrar un elemento hijo de (con clase o ID) de un elemento padre particular usando solo JavaScript puro? No jQuery u otros marcos.
En este caso, necesitaría encontrar child1 o child2 de los padres , en el supuesto de que el árbol DOM podría tener múltiples child1 o child2 elementos de la clase en el árbol. Solo quiero los elementos de padre
<div class="parent">
<div class="child1">
<div class="child2">
</div>
</div>
</div>
javascript
dom
Blyde
fuente
fuente
document.getElementById('element-id')
.Respuestas:
La
children
propiedad devuelve una matriz de elementos, así:Hay alternativas a
querySelector
, comodocument.getElementsByClassName('parent')[0]
si así lo deseas.Editar: Ahora que lo pienso, podría usar
querySelectorAll
para obtener descendientes deparent
tener un nombre de clase dechild1
:La diferencia entre qS y qSA es que este último devuelve todos los elementos que coinciden con el selector, mientras que el primero solo devuelve el primer elemento.
fuente
Si ya lo tiene
var parent = document.querySelector('.parent');
, puede hacer esto para abarcar la búsqueda deparent
los hijos de:fuente
parent.querySelectorAll('.child')
devolver una NodeListSimplemente agregando otra idea, podría usar un selector de hijos para obtener hijos inmediatos
debería devolver todos los hijos inmediatos con la clase .child1
fuente
Tiene un elemento padre, desea obtener todos los hijos de un atributo específico 1. obtener el padre 2. obtener el nombre del nombre principal mediante
parent.nodeName.toLowerCase()
convertir el nombre del nombre a minúscula, por ejemplo, DIV será div 3. para un propósito específico adicional, obtenga un atributo de el padre egparent.getAttribute("id")
. esto le daráid
el padre 4. Luego, usedocument.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " );
si desea ingresar hijos del nodo padrefuente