标签: selectors-api

我正在尝试使用我的应用程序从维基百科页面中抓取一些信息Node.js，使用jsdom. 这是我正在做的一个例子：

jsdom.env({
    url: "https://en.wikipedia.org/wiki/Bill_Gates",
    features: {
        FetchExternalResources: ['script'],
        ProcessExternalResources: ['script'],
        SkipExternalResources: false,
    },
    done: function (err, window) {
        if (err) {
            console.log("Error: ", err)
            return;
        }

        var paras = window.document.querySelectorAll('p');
        console.log("Paras: ", paras)
    }
});

奇怪的是，它querySelectorAll('p')返回一个NodeList空元素：

Paras:  NodeList {
  '0': HTMLParagraphElement {},
  '1': HTMLParagraphElement {},
  '2': HTMLParagraphElement {},
  '3': HTMLParagraphElement {},
  '4': HTMLParagraphElement {},
  '5': HTMLParagraphElement {},
  '6': HTMLParagraphElement {},
  '7': HTMLParagraphElement {},
  ...
  62': HTMLParagraphElement {} }

知道可能是什么问题吗？谢谢！

编辑：

window.document.querySelectorAll('p') …

在HTML5中,CSS选择器似乎与data-*属性一起运行良好.例如:

<style>
div[data-foo='bar'] {
  background:#eee;
}
</style>
<div data-foo='bar'>colored</div>
<div>not colored</div>

将适当的风格第一.但是,尝试使用selectors-api选择此类元素失败.例子:

var foos = document.querySelectorAll("div[data-foo]='bar'");

要么

var foos = document.querySelectorAll("div data-foo='bar'");

在Chrome和Safari中,这会产生一个神秘的错误:

SYNTAX_ERR:DOM异常12

关于如何使用selectors-api根据data-*属性正确选择元素的任何想法？

我通常会听到,因为实时NodeLists是"坏" (参见这篇Zakas文章),并且通知了querySelectorAll返回静态的决定HTMLCollection.为什么人们认为实时NodeLists是一件坏事？代码示例可能有助于我理解这一点.

如果,每当我关心使用缓存的节点集合的值进行任何计算时,集合恰好不是一个陈旧的快照,我就不能真正看到它是一个"坏"的东西.

我完全理解用CSS Selector字符串选择元素有多么有用,但如果我只能在获取它后立即可靠地运行代码,那么它似乎比live更有用NodeList.

我使用webdriver并经常使用css选择器,并想知道我写入遍历每个级别的代码量是否可以减少.以下是访问元素的javascript代码,java中的类似代码将出现在我的代码中.

在下面的例子中,我使用了3个css选择器来遍历3个级别,我可以将它们组合在一起或至少简化.

document.querySelector('.datagrid').querySelectorAll(".even")[3].querySelectorAll('tbody tr')

我正在使用CasperJS自动填写在线表格.每当您尝试提交填写了包含无效数据的任何必填字段的表单时,每个包含无效数据的字段都会显示一条错误消息,提醒您问题所在.我想收集所有这些消息并将它们连接成一个 - 无论是通过数组还是其他方法对我来说都无关紧要.错误消息的CSS如下所示:

<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="Name.Last">
    <span class="" for="Name_Last" generated="true">
        The Last Name field is required.
    </span>
</span>

<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="Address.City">
    <span class="" for="Address_City" generated="true">
        The City field is required.
    </span>
</span>

在浏览器控制台中,我成功地做到了这一点:

var arr = document.querySelectorAll('.field-validation-error');
for (var i = 0; i < arr.length; i++) { 
    var err = arr[i]; console.log(err.textContent);
}

它让我回复:

"The Last Name field is required."
"The City field is required."

我打算在CasperJS中做同样的事情,但我无法得到相同的结果.这是我的代码到目前为止(一个更大的文件的片段,所以我不会发布我casper.start或任何东西):

var results = self.evaluate(function() {
    var arr =  document.querySelectorAll('.field-validation-error');
    return …

我有这个代码:

<a href="javascript:alert('something1')">Click</a>
<a href="javascript:prompt('something2')">Click</a>
<a href="javascript:alert('something3')">Click</a>
<a href="javascript:prompt('something4')">Click</a>

现在,使用console.log(document.querySelectorAll("a[href^='javascript:prompt('],a[href^='javascript:alert(']"));将获取所有这些元素作为NodeList.

但是,我有不同的字母大小写的HTML文本javascript.也就是说,看下面的代码:

<a href="javaSCRIPT:alert('something1')">Click</a>
<a href="JaVaScRIPt:prompt('something2')">Click</a>
<a href="javaSCRIpt:alert('something3')">Click</a>
<a href="JAVAscrIPt:prompt('something4')">Click</a>

我提到了这个,但使用*=而不是^=没有帮助.我知道^=等同于'开头',但是什么*=意思？

如何querySelectorAll为所有这些排列编写通用的javascript？

在编写代码时，我遇到了一些非常奇怪的事情。

下面的代码工作得很好：

document.querySelectorAll("button").forEach(function(e) {
    e.addEventListener("click", function() {
        console.log(e);
    });
});

但是，以下情况不会：

document.getElementsByTagName("button").forEach(function(e) {
    e.addEventListener("click", function() {
        console.log(e);
    });
})

我在这里很困惑。据我所知，document.getElementsByTagName("button")返回与document.querySelectorAll("button"). 我错了吗？这里有什么问题？和 有关系forEach吗？

边注：

我遇到了这篇文章，但它没有回答我的问题。

只是强调：我没有使用 jQuery。

PS - 我已经知道forEachvs 常规for循环之间的差异和优缺点，所以除非forEach是这两个函数无法以相同方式工作的具体原因，否则forEachvsfor辩论与我的问题无关。

我有一个列表/一组复选框,由php制作; 放入name ="item []"html属性,然后按照以下步骤操作:

 var list = document.querySelectorAll("input[name^='item[']")

到目前为止,效果很好.我只需要计算已检查的那些,而不是全部像:

 list.length

如何访问每个人的值以检查"已检查"属性或值？

我想使用 document.querySelector() 中的选择器来选择所有带有文本“print”的标签。

<a href="https://www.google.co.in">print</a>

我怎样才能选择相同的。我不想使用 jQuery。我不必只是 querySelector 但任何其他选择器都可以。

我想选择所有名称为 的列表项'viewer'。

这将返回一个空的NodeList：

document.querySelectorAll('[name="viewer"]');

但这会返回一个包含正确项目的数组：

[...document.querySelectorAll('li')].filter(({ name }) => name == 'viewer');

列表项是这样创建的：

const listItem = document.createElement('li');
listItem.name = 'viewer';
listItem.id = 'viewer-1337';

当我在控制台中检查它们时，我id在它们的 HTML 中看到它们，但在它们的name. 例如

<li id="viewer-1337">foo</li>

似乎他们确实name设置了属性，但无法通过document.querySelectorAll其 HTML访问或可见。

为什么不？

const names = ['foo', 'bar'];
names.forEach(name => {
  const li = document.createElement('li');
  li.id = 'viewer-' + name;
  li.name = 'viewer';
  li.innerHTML = name;
  const ul = document.querySelector('ul');
  ul.appendChild(li);
});

const nodeList = document.querySelectorAll('[name="viewer"]');
console.log([...nodeList]);

const array …