querySelector、querySelectorAll和CSS3 Selectors一起来-阿里云开发者社区

querySelector、querySelectorAll和CSS3 Selectors一起来

2017-11-12 1132

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

从IE9开始DOM开始支持支持CSS的选择器了，DOM提供了两个接口

querySelector 得到一个DOM

querySelectorAll 得到一组DOM

一个个的解释这些选择器也没有必要，我们结合前面的数组知识，写一段代码来说明。页面上有一组元素，然后会依据我们数组中的预订选择值选择相应元素，并将背景变红色，同时提示选择器的含义。这样的代码便于运行理解和扩展。

html的结构部分

添加一个简单的样式

加一个jQuery的脚本

然后就是我们的测试代码了

<script type="text/javascript">
var tip = ["指定元素名称", "属性中包含", "属性开始", "属性结束", "属性等于",
"html部分", "元素内容为空白", "锚",
"子元素", "兄弟元素", "第一个", "最后一个元素", "第2个", "倒数第2个",
"奇数", "偶数", "类型一致的奇数", "类型一致的偶数",
"从第3个算起，每隔2个（包含第2个）", "只有一个子元素",
"可用状态", "不可用状态", "只读", "非只读", "选取状", "非选取状态", "一半状态", "不包含"
];
var selectors = ["ol",
"[title*=abc]", "[title^=abc]", "[title$=abc]", "[title=abc]",
":root",
":empty",
":target",
"ol li",
"ol~p",
"ol li:first-child", "ol li:last-child", "ol li:nth-child(2)", "ol li:nth-last-child(2)",
"ol li:nth-child(odd)", "ol li:nth-child(even)", "ol li:nth-of-type(odd)", "ol li:nth-of-type(even)",
"li:nth-child(2n+3)",
"ol li:only-child",
":enabled", ":disabled", ":read-only", ":read-write",
":default", ":checked", ":indeterminate",
"ol li:not(:first-child)"
];
$(
function() {
$(":button").click(
function() {
selectors.forEach(
function(item, index) {
//把上次有box样式的元素清空下
Array.prototype.slice.call(document.querySelectorAll(".box")).forEach(
function(e, i) {
e.className = "";
}
);
//本次匹配的元素加入样式
Array.prototype.slice.call(document.querySelectorAll(item)).forEach(
function(e, i) {
e.className = "box";
}
);
$("span:eq(0)").html(item);
$("span:eq(1)").html(tip[index]);
alert("next");
}
);
}
);
}
);
</script>

我们准备了两个数组，一个存放选择器，一个存放选择器的说明。对selectors数组多forEach便利，根据选择器对元素进行添加样式，以可以看到样式结果。

需要说明下的是

document.querySelectorAll(".box")得到的不是数组，是nodelist，虽然可以类似数组的for，但真的不是数组，不能直接对其使用数组的方法forEach，如果我们需要转换为数组，我们可以用Array.prototype.slice.call来辅助就可以了。

本文转自shyleoking 51CTO博客，原文链接:http://blog.51cto.com/shyleoking/806929

querySelector、querySelectorAll和CSS3 Selectors一起来