我能够做到这一点:
<div id="myDiv">
<div class="foo"></div>
</div>
myDiv = getElementById("myDiv");
myDiv.querySelectorAll("#myDiv > .foo");
也就是说,我可以成功检索myDiv具有类的元素的所有直接子元素.foo.
问题是,让我困扰的是我必须#myDiv在选择器中包含它,因为我在myDiv元素上运行查询(所以它显然是多余的).
我应该能够离开#myDiv,但是选择器不是合法的语法,因为它以a开头>.
有谁知道如何编写一个选择器,它只获取运行选择器的元素的直接子元素？
注意:在假设此问题重复之前,此问题底部有一个部分解决了为什么一些类似的问题无法提供我正在寻找的答案.
我们都知道将NodeList转换为数组很容易,有很多方法可以做到:
[].slice.call(someNodeList)
// or
Array.from(someNodeList)
// etc...
我所追求的是相反的; 如何将节点数组转换为静态NodeList？
在没有深入研究的情况下,我正在创建一种新方法来查询页面上的元素,即:
Document.prototype.customQueryMethod = function (...args) {...}
为了坚持如何querySelectorAll工作,我想要返回静态集合NodeList而不是数组.
到目前为止,我已经以三种不同的方式解决了这个问题:
function createNodeList(arrayOfNodes) {
let fragment = document.createDocumentFragment();
arrayOfNodes.forEach((node) => {
fragment.appendChild(node);
});
return fragment.childNodes;
}
虽然这确实返回了NodeList,但这不起作用,因为调用appendChild会从DOM中的当前位置(它应该保留的位置)中移除节点.
另一种变化涉及cloning节点并返回克隆.但是,现在您将返回克隆节点,这些节点没有引用DOM中的实际节点.
const FakeNodeList = (() => {
let fragment = document.createDocumentFragment();
fragment.appendChild(document.createComment('create a nodelist'));
function NodeList(nodes) {
let scope = this;
nodes.forEach((node, i) => {
scope[i] = node;
});
}
NodeList.prototype = …假设我们有这样的 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 中的所有子级“DIV 元素”（不是孙子级）（在本例中为 id='test-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 = …基本上我正在尝试解析 HTML 字符串并使用Cheerio.js提取一些信息。
我的 HTML 如下（当然我减少并简化了它）：
<html>
<head></head>
<body>
<div>
<table>
<tr>
<td>
<a href="/link_1.php">Link 1</a>
</td>
<td>
<a href="/link_2.php">Link 2</a>
<a href="/link_3.php">Link 3</a>
</td>
<td>
<a href="/link_4.php">Link 4</a>
<a href="/link_5.php">Link 5</a>
</td>
</tr>
</table>
</div>
</body>
</html>
我的代码是这样的：
var cheerio = require("cheerio");
var $ = cheerio.load(html);
var page = $.root();
var tr = page.find("tr");
console.log(tr.find("> :nth-child(2) a").length);
你可以在这里尝试一下。
我期望的是返回的代码，2因为该元素的第二个直接子元素中有两个链接tr。但是，这将返回5，返回 中的所有链接tr。
我用 jQuery 尝试了同样的事情，结果应该是这样，请参阅。
我还注意到删除<html>标签可以使其正常工作，但我不知道为什么。 …
例如，在 jQuery 中，如果我想要所有<div>和<p>元素，我会这样做：
var $x = $("p, div");
然后如果我想要<div>x 中的所有元素，那么我这样做：
var $divs = $x.filter("div");
那么我如何filter在 vanilla JavaScript 中做这个简单的事情呢？
例如，要选择全部<div>和<p>，然后我可以这样做：
var x = document.querySelectorAll("div, p");
但是 vanilla JavaScript 没有像 jQuery 那样的过滤功能，所以我不能这样做：
var divs = x.filter("div"); // ERROR
希望有人能帮我解决这个问题:-)
提前致谢。
更新
一些评论/答案建议使用.tagName == "DIV" 之类的方法来查找 div，但是，我想要一个像 jQuery 一样带有字符串选择器的解决方案。
原因是因为我还想使用属性、类甚至多个选择器进行过滤，您可以在其中放置逗号。并且字符串选择器必须是动态的。
这意味着，我不知道选择器中有什么。它可以是“div[foo='asd'], .bar”或“#hello, [xx='yy'], p”
所以我不能硬编码 .tagName == "DIV"，因为我不知道选择器字符串中的内容。