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

Question

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

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

的元素

<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 之间的区别在于，后者返回与选择器匹配的all元素，而前者仅返回第一个这样的元素。

Answer 3

只需添加另一个想法，您可以使用子选择器来获取直接子代

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

应返回班级 .child1 的所有直接子级

Answer 4

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

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

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

Answer 6

您可以用来获取父母

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

使用父级来获取特定的子级

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

所有子项都可以使用

获取

let  childrens = parent.children;

我们也可以通过索引获取单个孩子

let secondChild = parent.children[1]