Encontrar elemento hijo de javascript puro padre

142

¿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>
Blyde
fuente
1
La identificación sería la forma más fácil. Tienen que ser únicos, por lo que puedes hacerlo document.getElementById('element-id').
Felix Kling
1
Use consultas regulares de dom, luego: lea esta mejor manera de obtener nodos secundarios
Elias Van Ootegem

Respuestas:

152

La childrenpropiedad devuelve una matriz de elementos, así:

parent = document.querySelector('.parent');
children = parent.children; // [<div class="child1">]

Hay alternativas a querySelector, como document.getElementsByClassName('parent')[0]si así lo deseas.


Editar: Ahora que lo pienso, podría usar querySelectorAllpara obtener descendientes de parenttener un nombre de clase de child1:

children = document.querySelectorAll('.parent .child1');

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.

Rick Viscomi
fuente
182

Si ya lo tiene var parent = document.querySelector('.parent');, puede hacer esto para abarcar la búsqueda de parentlos hijos de:

parent.querySelector('.child')
csch
fuente
1
También puede parent.querySelectorAll('.child')devolver una NodeList
schmijos
20

Simplemente agregando otra idea, podría usar un selector de hijos para obtener hijos inmediatos

document.querySelectorAll(".parent > .child1");

debería devolver todos los hijos inmediatos con la clase .child1

Waleed
fuente
He estado viendo que todos sugieren querySelector que getElementBy **. ¿Es más eficiente?
Andre
Tal vez esto ayude. stackoverflow.com/questions/14377590/…
Waleed
2

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 eg parent.getAttribute("id"). esto le dará idel padre 4. Luego, use document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " ); si desea ingresar hijos del nodo padre

let parent = document.querySelector("div.classnameofthediv")
let parent_node = parent.nodeName.toLowerCase()
let parent_clas_arr = parent.getAttribute("class").split(" ");
let parent_clas_str = '';
  parent_clas_arr.forEach(e=>{
     parent_clas_str +=e+'.';
  })
let parent_class_name = parent_clas_str.substr(0, parent_clas_str.length-1)  //remove the last dot
let allchild = document.querySelectorAll(parent_node+"."+parent_class_name+" input")

Adio Azeez
fuente