用JavaScript查找父元素的子元素

最有效的方法是只使用纯javascript找到特定父元素的子元素(带class或ID)。不使用jQuery或其他框架。

在这种情况下，我需要找到child1或父的child2，假设DOM树中可以有多个child1或child2类元素。我只想要父的元素

<div class="parent">
<div class="child1">
<div class="child2">
</div>
</div>
</div>
462659 次浏览
小开
最佳答案

children属性返回一个元素数组，如下所示:

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

有querySelector的替代品，如document.getElementsByClassName('parent')[0]，如果你愿意的话。

编辑:现在我想到了，你可以只使用querySelectorAll来获得具有child1类名的parent的后代:

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

qS和qSA的区别在于后者返回匹配选择器的所有元素，而前者只返回第一个这样的元素。

小开

如果你已经有var parent = document.querySelector('.parent');，你可以这样做，将搜索范围扩大到parent的子节点:

parent.querySelector('.child')
小开

只是补充另一个想法，你可以使用子选择器来获得直接的子

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

是否应该返回类.child1的所有直接子类

小开
你有一个父元素，你想要得到所有特定属性的子元素 1. 找到父母 2. 通过parent.nodeName.toLowerCase()获取父节点名，将节点名转换为小写，例如DIV将是DIV 3.为了更具体的目的，获取父类的属性，例如parent.getAttribute("id")。这将给你父类的id 4. 然后使用document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " );如果你想输入父节点

的子节点 

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")

小开

Element.querySelector ()是最好的方法;

const parent = document.querySelector('.parent');
// Do anything next //When you want
parent.querySelector('.child1'); // <div class="child1">

提交答案