查找父纯javascript的子元素

Posted 2023-02-21

【中文标题】查找父纯javascript的子元素

【英文标题】：Finding child element of parent with JavaScript

【发布时间】：2013-04-24 12:00:37

【问题描述】：

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

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

的元素

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

【问题讨论】：

***.com/questions/7815374/…

ID 将是最简单的方法。它们必须是独一无二的，所以你可以这样做document.getElementById('element-id')。

使用常规的 dom 查询，然后：阅读此best way to get child nodes

【参考方案1】：

如果您已经拥有var parent = document.querySelector('.parent');，您可以这样做以将搜索范围限定为parent 的孩子：

parent.querySelector('.child')

【讨论】：

你也可以parent.querySelectorAll('.child')返回一个NodeList

【参考方案2】：

children 属性返回一个元素数组，如下所示：

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

如果您愿意，还有querySelector 的替代品，例如document.getElementsByClassName('parent')[0]。

---

编辑：现在我考虑一下，您可以使用 querySelectorAll 来获取类名为 child1 的 parent 的后代：

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

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

【参考方案3】：

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

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

应该返回类为 .child1 的所有直系子节点

【讨论】：

我看到每个人都建议使用 querySelector 而不是 getElementBy**。效率更高吗？

也许这会有所帮助。 ***.com/questions/14377590/…

这不会返回.child2，以及@Blyde 要求的其他孩子

【参考方案4】：

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

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

【参考方案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")