假设我们有这个HTML结构:
<div id='test-div'>
<div class='random-class-1'>
<div class='useless-element-1'>
</div>
<div class='useless-element-2'>
</div>
<p>Just a paragraph, and useless</p>
</div>
<div class='random-class-2'>
<div class='useless-element-3'>
</div>
<div class='useless-element-4'>
</div>
<div class='useless-element-5'>
</div>
</div>
</div>
我需要在第一个DIV(在这个例子中使用id ='test-div')中选择所有子元素“DIV元素”(而不是孙子元素),而不是从文档而是从元素(div)本身。
所以,我不想使用下面的“查询”,因为我已经选择了元素DIV [object HTMLDivElement]:
// I don't want to use this query
var children = document.querySelectorAll("div > div");
只是一个实现这个的例子(https://jsfiddle.net/t4gxt65k/):
// I already have selected DIV element
var el = document.getElementById("test-div")
// OR var el = document.querySelectorAll("#test-div");
var children = el.querySelectorAll(":scope > div");
但由于浏览器不兼容,我不想使用“:scope”
真正的问题是:
如何使用纯JavaScript获取[object HTMLDivElement]的子项(仅DIV元素)?
要获得元素的直接子元素,请使用parentNode.children或parentNode.childNodes和Array.prototype.reduce的组合,如下所示:
var children = Array.prototype.reduce.call(el.children, function(acc, e) {
if(e.tagName == "DIV")
acc.push(e);
return acc;
}, []);
作为一个选项,您可以为scope元素设置一个临时唯一属性,然后使用querySelectorAll()
作为其父级,其中属性选择器前置于:scope
选择器之后的位置:
// The `scope` variable stores a reference to a scope element.
var attrName = '_scope' + Date.now();
scope.setAttribute(attrName, '');
var children = scope.parentNode.querySelector('[' + attrName + '] > DIV');
我不确定它有多快。
Fwiw,专门用于获取子元素,有children
DOM属性:
var children = scope.children;
类似于@Ibrahims answer在选择孩子时却不那么复杂,因为它没有解决原型并减少。相反,它使用Array.from
,Array.filter
和Element.matches
。 Element.matches使它更加通用,因为它使用普通的选择器字符串(就像你在querySelectorAll
中那样)。
Array.from(rootElement.children)
.filter(elm => elm.matches('div'))
const rootElement = document.getElementById('test-div')
Array.from(rootElement.children)
.filter(elm=>elm.matches('div'))
.forEach(elm=>elm.classList.add('matched'))
div {
padding: 1rem;
box-shadow: 0 0 0 1px gray inset;
}
.matched {
box-shadow: 0 0 0 1px red inset;
}
<div id='test-div'>
<div class='random-class-1'>
<div class='useless-element-1'></div>
<div class='useless-element-2'></div>
<p>Just a paragraph, and useless</p>
</div>
<div class='random-class-2'>
<div class='useless-element-3'></div>
<div class='useless-element-4'></div>
<div class='useless-element-5'></div>
</div>
</div>