使用JavaScript查找父元素的子元素

Finding child element of parent with JavaScript(使用JavaScript查找父元素的子元素)

问题描述

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

在本例中，我需要找到父的Child 1或Child 2，假设DOM树在树中可以有多个Child 1或Child 2类元素。我只需要父级

的元素

    <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获取parent的子集，类名为child1：

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

QS和QSA的区别在于，后者返回与选择器匹配的所有元素，而前者仅返回第一个此类元素。

这篇关于使用JavaScript查找父元素的子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！