我可以这样做:
<div id="myDiv">
<div class="foo"></div>
</div>
myDiv = getElementById("myDiv");
myDiv.querySelectorAll("#myDiv > .foo");
也就是说，我可以成功地检索myDiv元素的所有具有类.foo的直接子元素。
问题是，它困扰我，我必须包括在选择器中的#myDiv，因为我是在myDiv元素上运行查询(所以它显然是多余的)。
我应该能够离开#myDiv关闭，但选择器是不合法的语法，因为它以>开始。
有人知道如何编写一个选择器，它只获取选择器所运行的元素的直接子元素吗?
当前回答
我想补充的是，您可以通过为当前节点分配临时属性来扩展:scope的兼容性。
let node = [...];
let result;
node.setAttribute("foo", "");
result = window.document.querySelectorAll("[foo] > .bar");
// And, of course, you can also use other combinators.
result = window.document.querySelectorAll("[foo] + .bar");
result = window.document.querySelectorAll("[foo] ~ .bar");
node.removeAttribute("foo");
其他回答
我用这个:
你可以避免键入“myDiv”两次并使用箭头。 当然，总是有更多的可能性。 可能需要一个现代的浏览器。
<!-- Sample Code -->
<div id="myDiv">
<div class="foo">foo 1</div>
<div class="foo">foo 2
<div class="bar">bar</div>
</div>
<div class="foo">foo 3</div>
</div>
// Return HTMLCollection (Matches 3 Elements)
var allMyChildren = document.querySelector("#myDiv").children;
// Return NodeList (Matches 7 Nodes)
var allMyChildren = document.querySelector("#myDiv").childNodes;
// Match All Children With Class Of Foo (Matches 3 Elements)
var myFooChildren = document.querySelector("#myDiv").querySelectorAll(".foo");
// Match Second Child With Class Of Foo (Matches 1 Element)
var mySecondChild = document.querySelector("#myDiv").querySelectorAll(".foo")[1];
// Match All Children With Class Of Bar (Matches 1 Element)
var myBarChild = document.querySelector("#myDiv").querySelector(".bar");
// Match All Elements In "myDiv" (Matches 4 Elements)
var myDescendants = document.querySelector("#myDiv").querySelectorAll("*");
如果你确定元素是唯一的(比如你的ID case):
myDiv.parentElement.querySelectorAll("#myDiv > .foo");
对于一个更“全局”的解决方案:(使用matchesSelector shim)
function getDirectChildren(elm, sel){
var ret = [], i = 0, l = elm.childNodes.length;
for (var i; i < l; ++i){
if (elm.childNodes[i].matchesSelector(sel)){
ret.push(elm.childNodes[i]);
}
}
return ret;
}
elm是父元素，sel是选择器。完全可以作为一个原型。
我创建了一个函数来处理这种情况，我想我会分享它。
getDirectDecendent(elem, selector, all){
const tempID = randomString(10) //use your randomString function here.
elem.dataset.tempid = tempID;
let returnObj;
if(all)
returnObj = elem.parentElement.querySelectorAll(`[data-tempid="${tempID}"] > ${selector}`);
else
returnObj = elem.parentElement.querySelector(`[data-tempid="${tempID}"] > ${selector}`);
elem.dataset.tempid = '';
return returnObj;
}
本质上，你所做的是生成一个随机字符串(randomString函数在这里是一个导入的npm模块，但你可以自己做)，然后使用这个随机字符串来确保你在选择器中得到你期望的元素。然后你就可以自由使用>了。
我没有使用id属性的原因是id属性可能已经被使用了，我不想重写它。
下面是一个用普通JS编写的灵活方法，它允许你只对元素的直接子元素运行CSS选择器查询:
var count = 0;
function queryChildren(element, selector) {
var id = element.id,
guid = element.id = id || 'query_children_' + count++,
attr = '#' + guid + ' > ',
selector = attr + (selector + '').replace(',', ',' + attr, 'g');
var result = element.parentNode.querySelectorAll(selector);
if (!id) element.removeAttribute('id');
return result;
}
我想补充的是，您可以通过为当前节点分配临时属性来扩展:scope的兼容性。
let node = [...];
let result;
node.setAttribute("foo", "");
result = window.document.querySelectorAll("[foo] > .bar");
// And, of course, you can also use other combinators.
result = window.document.querySelectorAll("[foo] + .bar");
result = window.document.querySelectorAll("[foo] ~ .bar");
node.removeAttribute("foo");
