一、基本概念
在HTML和CSS中，属性选择器非常常见。而在JavaScript中，我们也可以使用属性选择器来选择元素。属性选择器是jQuery中的一种非常重要的选择器，能够轻松地对DOM元素进行操作和筛选。通过查找DOM元素的属性来查找或操作元素。
JavaScript属性选择器采用CSS选择器的语法。我们可以通过元素标签和元素的属性来选择元素。常见的属性选择器有以下四种：
1、基础属性选择器
基础属性选择器用于根据元素的属性值来选择元素。我们可以通过属性选择器实现以下几个功能：
1.1 属性是否为空
我们可以使用“[attribute]”来查找某个元素是否具有某个属性。
代码示例：
<div id="test" data-name=""></div>
<script>
var elem = document.querySelector('[data-name]');
console.log(elem); // <div id="test" data-name=""></div>
</script>
1.2 属性值
我们可以使用“[attribute=value]”来查找某个元素是否具有某个属性，并且该属性的值等于指定值。
代码示例：
<div data-name="test"></div>
<script>
var elem = document.querySelector('[data-name="test"]');
console.log(elem); // <div data-name="test"></div>
</script>
1.3 属性值以某个字符串开始
我们可以使用“[attribute^=value]”来查找某个元素是否具有某个属性，并且该属性的值以指定字符串开始。
代码示例：
<div data-name="test123"></div>
<script>
var elem = document.querySelector('[data-name^="test"]');
console.log(elem); // <div data-name="test123"></div>
</script>
1.4 属性值以某个字符串结束
我们可以使用“[attribute$=value]”来查找某个元素是否具有某个属性，并且该属性的值以指定字符串结束。
代码示例：
<div data-name="123test"></div>
<script>
var elem = document.querySelector('[data-name$="test"]');
console.log(elem); // <div data-name="123test"></div>
</script>
1.5 属性值包含某个字符串
我们可以使用“[attribute*=value]”来查找某个元素是否具有某个属性，并且该属性的值包含指定字符串。
代码示例：
<div data-name="test123"></div>
<script>
var elem = document.querySelector('[data-name*="test"]');
console.log(elem); // <div data-name="test123"></div>
</script>
2、多属性选择器
多属性选择器用于同时匹配多个属性。我们可以使用逗号隔开多个属性选择器。比如“[attribute1][attribute2]”。
代码示例：
<div data-name="test" class="box"></div>
<script>
var elem = document.querySelector('[data-name][class]');
console.log(elem); // <div data-name="test" class="box"></div>
</script>
3、属性值选择器
属性值选择器用于选择元素的属性值是否包含指定值。这里的属性值是字符串类型而不是数字类型，因此需要加上引号。
3.1 属性值以指定字符串开始
我们可以使用“[attribute|=value]”来查找某个元素是否具有某个属性，并且该属性的值等于指定值或以指定值加短横线开始。
代码示例：
<div lang="zh-cn"></div>
<script>
var elem = document.querySelector('[lang|="zh"]');
console.log(elem); // <div lang="zh-cn"></div>
</script>
3.2 属性值包含指定字符串
我们可以使用“[attribute*=value]”来查找某个元素是否具有某个属性，并且该属性的值包含指定字符串。
代码示例：
<div class="box bold"></div>
<script>
var elem = document.querySelector('[class*="bol"]');
console.log(elem); // <div class="box bold"></div>
</script>
4、属性值大小写选择器
CSS选择器区分大小写，而JavaScript属性选择器则不区分大小写。
代码示例：
<div class="Box"></div>
<script>
var elem = document.querySelector('[class="box"]');
console.log(elem); // <div class="Box"></div>
</script>
二、扩展应用场景
1、查找所有具有某个属性的元素
// 查找所有具有data-name属性的元素
var elems = document.querySelectorAll('[data-name]');
2、根据属性值修改元素
// 将所有data-name属性值为test的元素删除
var elems = document.querySelectorAll('[data-name="test"]');
elems.forEach(function(elem){
elem.parentNode.removeChild(elem);
});
3、跨浏览器的事件处理程序
var EventUtil = {
addHandler: function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvent('on' + type, handler);
}else{
element['on' + type] = handler;
}
},
removeHandler: function(element, type, handler){
if(element.removeEventListener){
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent('on' + type, handler);
}else{
element['on' + type] = null;
}
}
};
var btn = document.querySelector('[data-action="submit"]');
EventUtil.addHandler(btn, 'click', function(event){
event = EventUtil.getEvent(event);
EventUtil.stopPropagation(event);
EventUtil.preventDefault(event);
// ...
});
三、总结
JavaScript属性选择器使用CSS选择器的语法，通过元素标签和元素的属性来选择元素。常见的属性选择器有基础属性选择器、多属性选择器、属性值选择器和属性值大小写选择器。通过属性选择器，我们可以对DOM元素进行操作和筛选，实现非常多的功能。在跨浏览器的事件处理程序中，也可以使用属性选择器来添加事件。