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

Question

仅使用纯JavaScript，没有jQuery或其他框架，找到特定父元素的子元素（带类或ID）的最有效方法是什么？

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

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

- Blyde

---

https://dev59.com/omsz5IYBdhLWcg3wj4kc - Dmitry Volokh

ID可能是最简单的方法。它们必须是唯一的，所以您可以使用document.getElementById('element-id')。 - Felix Kling

使用常规的DOM查询，然后：阅读此获取子节点的最佳方法。 - Elias Van Ootegem

Answer 1

如果你已经有了var parent = document.querySelector('.parent');，你可以这样做来限定搜索范围到parent的子元素：

parent.querySelector('.child')

- csch

---

你也可以使用 parent.querySelectorAll('.child') 来返回一个 NodeList。 - schmijos

Answer 2

children 属性返回一个类似以下的元素数组：

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

如果您愿意，可以使用 document.getElementsByClassName('parent')[0] 等替代 querySelector。

---

编辑：现在我想了想，您也可以使用 querySelectorAll 来获取具有类名 child1 的 parent 的后代元素：

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

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

- Rick Viscomi

---

我知道这个答案已经有10多年的历史了，但是因为它可能仍然会在Google上找到... 从技术上讲，children不返回array，而是返回一个HTMLCollection。 就像 Array.isArray(document.children) == false一样。 您需要使用Array.from(document.children)将其转换为正确的数组。 - Jorjon

Answer 3

你可以使用子选择器来获取直接子元素，这是另一个可行的想法。

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

应该返回所有具有类名“child1”的直接子元素。

- Waleed

---

我已经看到很多人建议使用querySelector而不是getElementBy**。它是否更有效率？ - Andre

也许这会有所帮助。 https://dev59.com/wmYq5IYBdhLWcg3wkRYo - Waleed

这不会像@Blyde所要求的那样返回.child2和其他子元素。 - Esger

Answer 4

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

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

- FATCHOLA

---

当我使用查询选择器针对一个父元素，该父元素有三个具有.img-fluid的img元素时，只返回第一个img元素。如何选择所有的元素？ - b_dubb

@b_dubb，你可以使用querySelectorAll来获取所有元素。 - Mhd Saleh

Answer 5

如果您有一个父元素，想要获取特定属性的所有子元素，则需要执行以下步骤： 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")

- Adio Azeez

Answer 6

你可以使用`parent()`来获取父元素。

let parent = document.querySelector('.parent'); 

使用 parent 来获取特定的子元素

let child1 = parent.querySelectorAll('.child');

所有的孩子都可以使用以下方式获取

let  childrens = parent.children;

我们也可以通过索引获取单个子元素。

let secondChild = parent.children[1]

- Mawiz Khan