javascript 查找父纯javascript的子元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16302045/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Finding child element of parent pure javascript
提问by Blyde
What would the most efficient method be to find a child element of (with class or ID) of a particular parent element using pure javascript only. No jQuery or other frameworks.
最有效的方法是仅使用纯 javascript 查找特定父元素的（带有类或 ID）的子元素。没有 jQuery 或其他框架。
In this case, I would need to find child1or child2of parent, assuming that the DOM tree could have multiple child1or child2class elements in the tree. I only want the elements of parent
在这种情况下，我需要找到child1或的child2的父，假设DOM树可以有多个child1或的child2树类元素。我只想要父元素
<div class="parent">
<div class="child1">
<div class="child2">
</div>
</div>
</div>
回答by csch
If you already have var parent = document.querySelector('.parent');you can do this to scope the search to parent's children:
如果您已经有了，var parent = document.querySelector('.parent');您可以这样做以将搜索范围限定为parent的孩子：
parent.querySelector('.child')
回答by Rick Viscomi
The childrenproperty returns an array of elements, like so:
该children属性返回一个元素数组，如下所示：
parent = document.querySelector('.parent');
children = parent.children; // [<div class="child1">]
There are alternatives to querySelector, like document.getElementsByClassName('parent')[0]if you so desire.
有替代方案querySelector，例如，document.getElementsByClassName('parent')[0]如果您愿意的话。
Edit: Now that I think about it, you could just use querySelectorAllto get decendents of parenthaving a class name of child1:
编辑：现在我考虑了一下，您可以使用以下querySelectorAll方法获得parent具有以下类名的后代child1：
children = document.querySelectorAll('.parent .child1');
The difference between qS and qSA is that the latter returns allelements matching the selector, while the former only returns the first such element.
qS 和 qSA 的区别在于，后者返回匹配选择器的所有元素，而前者只返回第一个这样的元素。
回答by Waleed
Just adding another idea you could use a child selector to get immediate children
只需添加另一个想法，您就可以使用子选择器来获取直接子项
document.querySelectorAll(".parent > .child1");
should return all the immediate children with class .child1
应该返回所有具有 class .child1 的直系孩子
回答by Adio Azeez
You have a parent element, you want to get all child of specific attribute
1. get the parent
2. get the parent nodename by using parent.nodeName.toLowerCase()convert the nodename to lower case e.g DIV will be div
3. for further specific purpose, get an attribute of the parent e.g parent.getAttribute("id"). this will give you idof the parent
4. Then use document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " );if you want input children of the parent node
您有一个父元素，您想获取特定属性 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")