标签: selectors-api

for循环querySelectorAll

Mozilla声称"for for循环将正确地循环NodeList对象".(来源:https://developer.mozilla.org/en-US/docs/Web/API/NodeList)但是,这在Chrome 43中不起作用.这是不正确的文档还是浏览器错误?

复选的示例代码在页面上使用复选框:

var list = document.querySelectorAll( 'input[type=checkbox]' );
for (var item of list) {
  item.checked = true;
}
Run Code Online (Sandbox Code Playgroud)

javascript for-loop mozilla google-chrome selectors-api

11
推荐指数
2
解决办法
5297
查看次数

我可以在document.querySelectorAll中放置逻辑运算符吗?如果是这样,怎么样?

假设我想找到所有div元素和span内部p.是否有可能在单个`querySelectorAll'调用中获得我想要的所有内容?

从概念上讲,它应该是document.querySelectorAll("div | p span")(如果|手段).

javascript css dom selector selectors-api

11
推荐指数
1
解决办法
4294
查看次数

为什么querySelector('#id')映射到document.getElementById('id')?

我最近进入了选择器性能,当我传递document.getElementById一个简单的时候,当前实现Selectors API的浏览器不会使用它,这让我很烦恼#id.

性能损失是巨大的,因此库作者继续以自己的方式实现.

有任何想法吗?

javascript browser css-selectors selectors-api

10
推荐指数
1
解决办法
4242
查看次数

Firefox,查询选择器和可见的伪选择器

无论如何使用带有Firefox的querySelector()或querySelectorAll()函数的伪选择器来检测可见性?特别是我希望能够做到这样的事情:

elem.querySelector('#list .list-item:visible');
elem.querySelector('#section .sub-section:visible .title');
Run Code Online (Sandbox Code Playgroud)

无需担心浏览器不一致或其他实现,只需Firefox.谢谢!

编辑:可见是通过显示不是可见性未被隐藏来定义的.

javascript firefox selectors-api

10
推荐指数
4
解决办法
2万
查看次数

querySelectorAll是否支持id中的句点(.)字符?

querySelectorAll是否支持id中的句点(.)字符?

我的意思是如果我追加一个如下元素:

var div = document.createElement('div');
div.id='my.divid';
document.body.appendChild(div);
Run Code Online (Sandbox Code Playgroud)

然后我使用querySelectorAll如下:

document.querySelectorAll('#my.divid');
Run Code Online (Sandbox Code Playgroud)

然后我什么都没得到!

因此句点是id的合法字符,而querySelectorAll是Firefox提供的官方方法; 我无法相信该方法不支持id中的句点(.).我犯了一些错误吗?

javascript css-selectors selectors-api

10
推荐指数
2
解决办法
3985
查看次数

使用 querySelector 选择“Text”节点

我正在编写一个解析器,它应该从以下 html 中提取“提取此文本”

<div class="a">
    <h1>some random text</h1>
    <div class="clear"></div>
    Extract This Text
    <p></p>
    <h2></h2>
</div>
Run Code Online (Sandbox Code Playgroud)

我试过使用:

document.querySelector('div.a > :nth-child(3)');
Run Code Online (Sandbox Code Playgroud)

甚至通过使用下一个兄弟

document.querySelector('div.a > :nth-child(2) + *');
Run Code Online (Sandbox Code Playgroud)

但是他们都跳过它并只返回“p”元素。

我在这里看到的唯一解决方案是选择上一个节点,然后使用nextSibling它来访问它。

可以querySelector选择文本节点吗?
文本节点: https : //developer.mozilla.org/en-US/docs/Web/API/Text

selectors-api

10
推荐指数
1
解决办法
4809
查看次数

jQuery相当于querySelector

什么是jQuery等价的querySelector?到目前为止我找到的唯一方法是选择所有然后选择第一个选择:

$(selectorString)[0]
Run Code Online (Sandbox Code Playgroud)

有了上面的表达式,jQuery是否足够智能,在找到第一个匹配后停止?

更新:@Mutnowski建议使用eq()和第一个,但在阅读jQuery文档后,这两个方法似乎有相同的缺点:jQuery将首先获得所有匹配,然后只过滤掉第一个元素.

javascript jquery jquery-selectors selectors-api

9
推荐指数
2
解决办法
1万
查看次数

querySelector如何在引擎盖下工作?

每个人都知道DOM选择器喜欢document.getElementByID(...)document.querySelector(...)做什么,以及如何将它与类,属性,id等一起使用.

但我无法找到它是如何工作的(我可以找到性能测试比较,但我对理论感兴趣).我知道html页面是加载的,由浏览器解析并构建DOM树.但是每个选择器如何遍历DOM树以找到元素.

我已经看了一个解析算法规范并阅读了很好的解释浏览器是如何工作的,但它也提供了关于HTML,CSS解析和渲染流程的优秀解释,它没有解释每个选择器如何遍历这个树来查找元素.

我假设为了找到类似的东西.black或者span它需要遍历整个树,但是发现#id它可能会遍历一些额外的数据结构,从而使它更快.请不要写下您的假设,我正在寻找具备备份到规范或在某些浏览器中实现的具体知识.

javascript dom internals selectors-api

9
推荐指数
1
解决办法
951
查看次数

使用querySelector()获取最后一个td元素

我有一个变量,它是dom的一个节点.我已经设法一路走到接近我想要的地方:

myvar.querySelector('.tblItinPriceSummary tr')
Run Code Online (Sandbox Code Playgroud)

给我这个:

<tr>
    <td>Subtotal</td>
    <td align="right">$189.00</td>
</tr>
Run Code Online (Sandbox Code Playgroud)

我想要的是第二个td $ 189的textContent.

我可以在querySelector中添加任何内容,以便我可以使用.textContent附加它来获取这段数据吗?

javascript selectors-api

9
推荐指数
1
解决办法
9261
查看次数

是否有可能使querySelectorAll像getElementsByTagName一样生活?

getElementsByTagName()有两个很棒的功能:它很快,它是现场.但如果我想得到怎么办呢p strong.当然我可以getElementsByTagName()再次使用精炼选项,但是我不会失去新p标签的实时效果吗?

有没有办法querySelectorAll变成现场选择器?

或者......是否有一种方法可以使用getElementsByTagName()getElementsByClassName()创建一个以类似的方式工作的函数(至少与后代一样),querySelectorAll但是生存?

javascript dom css-selectors selectors-api getelementsbytagname

9
推荐指数
1
解决办法
2237
查看次数