Question

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

在这种情况下，我需要找到 child1 的 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

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

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

应该返回所有.class1类的直接子对象。

Answer 4

您有一个父元素，您想获取所有具有特定属性的子元素 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 5

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

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

寻找父纯javascript的子元素

5 个答案: