我尝试使用document.querySelectorAll()
,但IE8抛出错误,那
Object不支持此属性或方法
var titleCheckBox = document.querySelectorAll("");
Run Code Online (Sandbox Code Playgroud)
这里写的http://www.quirksmode.org/dom/w3c_core.html#t13,IE8支持这种方法.我做错了什么?
让我们假设您有一个嵌套子列表的列表.
<ul>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>
Run Code Online (Sandbox Code Playgroud)
并用于document.querySelectorAll()
做出选择:
var ul = document.querySelectorAll("ul");
Run Code Online (Sandbox Code Playgroud)
我如何使用该ul
集合来获取直接的子元素?
ul.querySelectorAll("> li");
// Gives 'Error: An invalid or illegal string was specified'
Run Code Online (Sandbox Code Playgroud)
让我们假定ul
以某种方式缓存(否则我可以ul > li
直接完成).
在jQuery中,这有效:
$("ul").find("> li");
Run Code Online (Sandbox Code Playgroud)
但它不是原生的querySelectorAll
.有解决方案吗
我想知道在Javascript中是否可以<select multiple>
使用Selctors API 在字段中获取当前选择的选项,而不是对所有选项进行"愚蠢"迭代.
select.querySelectorAll('option[selected="selected"]')
只返回在原始HTML中标记为预选的选项,这不是我正在寻找的选项.有任何想法吗?
以下语句为我提供了第一个具有泰坦尼克类的元素
element = document.querySelector('.titanic');
Run Code Online (Sandbox Code Playgroud)
我如何检索具有相同类的第二个元素?
令我感到惊讶的是,Sizzle(jQuery使用的选择器引擎)带有内置:nth-child()
选择器,但缺少:nth-of-type()
选择器.
为了说明和之间的区别:nth-child()
并:nth-of-type()
说明问题,请考虑以下HTML文档:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>:nth-of-type() in Sizzle/jQuery?</title>
<style>
body p:nth-of-type(2n) { background: red; }
</style>
</head>
<body>
<p>The following CSS is applied to this document:</p>
<pre>body p:nth-of-type(2n) { background: red; }</pre>
<p>This is paragraph #1.</p>
<p>This is paragraph #2. (Should be matched.)</p>
<p>This is paragraph #3.</p>
<p>This is paragraph #4. (Should be matched.)</p>
<div>This is not a paragraph, but a <code>div</code>.</div>
<p>This is paragraph …
Run Code Online (Sandbox Code Playgroud) 我应该如何在css/js attibute选择器中转义属性[attr=value]
?
具体来说,这是正确的吗?
document.querySelector('input[name="test[33]"]')
Run Code Online (Sandbox Code Playgroud)
我正在寻找这样做的"标准方法",如果有的话,因为我不希望Sizzle使用繁重的执行回退功能
queryAll
和之间有什么区别querySelectorAll
.
DOM标准的评估逻辑如下,但我不够聪明,无法理解它.
query
& queryAll
要将相对选择器字符串relativeSelectors与集匹配,请运行以下步骤:
设s是解析来自relativeSelectors的相对选择器的结果.[SELECTORS]
如果s失败,则抛出JavaScript TypeError.
使用:scope元素集返回评估选择器的结果.[SELECTORS]
查询(relativeSelectors)方法必须返回运行的第一个结果匹配相对选择器字符串relativeSelectors与由上下文对象组成的集合,如果结果是空列表,则返回null.
queryAll(relativeSelectors)方法必须返回一个使用运行结果初始化的Elements数组,将一个相对选择器字符串relativeSelectors与一个由上下文对象组成的集合匹配.
querySelector
& querySelectorAll
要将选择器字符串选择器与节点进行范围匹配,请运行以下步骤:
设s是解析选择器选择器的结果.[SELECTORS]
如果s失败,则抛出JavaScript TypeError.
使用作用域根节点和范围过滤的作用域方法,返回评估选择器s对节点根的结果.[SELECTORS].
querySelector(selectors)方法必须返回对上下文对象运行scope-match选择器字符串选择器的第一个结果,否则返回null如果结果是空列表.
querySelectorAll(selectors)方法必须针对上下文对象返回运行scope-match选择器字符串选择器的静态结果.
我想知道所有浏览器都支持querySelector吗?它不是什么替代它使用?
我用IE8,FF3,Chrome 4进行了测试.对我来说很好.我没有旧的浏览器.所以我想知道旧浏览器是否会给我带来问题?
我有一个dom对象,我想把它的父母,所有的父母,与选择器相匹配querySelectAll()
,但是对于父母而不是孩子.类似于jQuery的.parents('selector')方法,但我不需要任何后向兼容性.另外,请不要图书馆.我将取一个布尔返回值.
我可以自己写这个作为递归函数/ for/while使用matchesSelector()
.我正在寻找鲜为人知的方法或更有效的代码.
保存任何处理都是值得的.想想成千上万的匹配检查,甚至更多.
XPath可以完成querySelector可以做的所有事情,还有更多,所以你什么时候选择后者呢?我没有看到任何速度基准比较两者,所以现在我选择基于语法简洁,这似乎是任意的.
编辑:我可能应该说我正在为Firefox编写Greasemonkey脚本,所以我不担心跨浏览器的兼容性,宁愿不包含任何库.
selectors-api ×10
javascript ×9
css ×2
dom ×2
greasemonkey ×1
html ×1
html-select ×1
jquery ×1
parents ×1
w3c ×1
xpath ×1