最有效的方法是只使用纯javascript找到特定父元素的子元素(带class或ID)。不使用jQuery或其他框架。
在这种情况下,我需要找到parent的child1或child2,假设DOM树中可以有多个child1或child2类元素。我只想要父母的元素
<div class="parent">
<div class="child1">
<div class="child2">
</div>
</div>
</div>
最有效的方法是只使用纯javascript找到特定父元素的子元素(带class或ID)。不使用jQuery或其他框架。
在这种情况下,我需要找到parent的child1或child2,假设DOM树中可以有多个child1或child2类元素。我只想要父母的元素
<div class="parent">
<div class="child1">
<div class="child2">
</div>
</div>
</div>
当前回答
children属性返回一个元素数组,如下所示:
parent = document.querySelector('.parent');
children = parent.children; // [<div class="child1">]
querySelector还有其他选择,如document.getElementsByClassName('parent')[0]。
编辑:现在我想到了,你可以使用querySelectorAll来获取父类的后代,类名为child1:
children = document.querySelectorAll('.parent .child1');
qS和qSA之间的区别是,后者返回所有匹配选择器的元素,而前者只返回第一个这样的元素。
其他回答
children属性返回一个元素数组,如下所示:
parent = document.querySelector('.parent');
children = parent.children; // [<div class="child1">]
querySelector还有其他选择,如document.getElementsByClassName('parent')[0]。
编辑:现在我想到了,你可以使用querySelectorAll来获取父类的后代,类名为child1:
children = document.querySelectorAll('.parent .child1');
qS和qSA之间的区别是,后者返回所有匹配选择器的元素,而前者只返回第一个这样的元素。
如果你已经有var parent = document.querySelector('.parent');你可以这样做,搜索范围到父母的孩子:
parent.querySelector('.child')
只是补充另一个想法,你可以使用子选择器来获得直接的子
document.querySelectorAll(".parent > .child1");
是否应该返回类.child1的所有直接子类
You have a parent element, you want to get all child of specific attribute 1. get the parent 2. get the parent nodename by using parent.nodeName.toLowerCase() convert the nodename to lower case e.g DIV will be div 3. for further specific purpose, get an attribute of the parent e.g parent.getAttribute("id"). this will give you id of the parent 4. Then use document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " ); if you want input children of the parent node
let parent = document.querySelector("div.classnameofthediv") let parent_node = parent.nodeName.toLowerCase() let parent_clas_arr = parent.getAttribute("class")。分割(" "); 让parent_clas_str = "; parent_clas_arr.forEach (e = > { parent_clas_str + = e +“。”; }) 让parent_class_name = parent_clas_str。Substr (0, parent_clas_str.length-1) //删除最后一个点 let allchild = document.querySelectorAll(parent_node+"。输入“+ parent_class_name +)
Element.querySelector()是最好的方法;
const parent = document.querySelector('.parent');
// Do anything next //When you want
parent.querySelector('.child1'); // <div class="child1">