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

Question

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

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

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

score 288 · Accepted Answer

如果您已经拥有var parent = document.querySelector('.parent');，则可以执行此操作以将搜索范围限定为parent的孩子：

parent.querySelector('.child')

score 203 · Accepted Answer

该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 的区别在于后者返回所有匹配选择器的元素，而前者只返回第一个这样的元素。

score 23 · Accepted Answer

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

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

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

score 6 · Accepted Answer

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

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

score 3 · Accepted Answer

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

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

5 回答 5

Related

Reference