一、基本概念
在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元素进行操作和筛选,实现非常多的功能。在跨浏览器的事件处理程序中,也可以使用属性选择器来添加事件。