查找父纯JavaScript的子元素

142

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

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

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

javascript dom

— 布莱德
source

stackoverflow.com/questions/7815374/...

— 梅德Volokh

1

ID将是最简单的方法。它们必须是唯一的，因此您可以这样做document.getElementById('element-id')。

— Felix Kling

1

使用常规dom查询，然后：阅读此获取子节点的最佳方法

— Elias Van Ootegem 2013年

152

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

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

有其他替代方法querySelector，例如，document.getElementsByClassName('parent')[0]如果您愿意。

编辑：现在我考虑了一下，您可以使用拥有类名称的querySelectorAll后裔：parentchild1

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

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

— 里克·维斯科米（Rick Viscomi）
source

182

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

parent.querySelector('.child')

— csch
source

1

您还parent.querySelectorAll('.child')可以返回NodeList

— schmijos，

19

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

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

应该返回所有具有.child1类的直接孩子

— 瓦利德
source

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

— 安德烈（Andre）

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

— Waleed

2

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