寻找父纯javascript的子元素

Question

最有效的方法是使用纯javascript查找特定父元素(具有类或ID)的子元素是什么.没有jQuery或其他框架.

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

<div class="parent">
    <div class="child1">
        <div class="child2">
        </div>
    </div>
</div>

Answer 1

如果你已经拥有,var parent = document.querySelector('.parent');你可以这样做,以搜索范围parent的孩子:

parent.querySelector('.child')

Answer 2

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

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

还有其他选择querySelector,比如document.getElementsByClassName('parent')[0]你的愿望.

编辑:现在我考虑一下,你可以querySelectorAll用来让后代parent拥有一个类名child1:

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

qS和qSA之间的区别在于后者返回与选择器匹配的所有元素,而前者仅返回第一个这样的元素.

Answer 3

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

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

Answer 4

只需添加另一个想法,您就可以使用子选择器来获得直接的孩子

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

应该返回班级.child1的所有直系孩子