JavaScript属性选择器用法介绍(javascript属性选择器)

一、基本概念

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

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注