JavaScript-DOM-属性节点

十二啊

已于 2022-04-27 11:41:46 修改

阅读量2.1k

点赞数 1

分类专栏：十二的 Javascript 之路文章标签： javascript 前端

于 2022-04-27 11:41:14 首次发布

十二

本文链接：https://blog.youkuaiyun.com/qq_42543177/article/details/124446440

版权

十二的 Javascript 之路专栏收录该内容

22 篇文章

订阅专栏

JavaScript-DOM-属性节点

属性节点由Attr类型表示，在文档树中被称为元素的特性，习惯称之为标签的属性，属性节点具有以下特征：

nodeType值为11
nodeName值是属性名称
nodeValue值为属性值
parentNode值为null
在HTML中不包含子节点
在XML中子节点可以是Text、EntityReference

尽管属性也是子节点，但不认为是DOM文档树的一部分，DOM没有提供关系指针，很少直接引用属性节点。接下来就分四步来看一下属性节点的相关操作

第一步创建属性节点

创建属性节点的方法如下，attrName表示新创建属性的名称。

document.createAttribute('attrName')

属性赋值

attrNode.value = 'data'

为了将新创建的属性添加到元素中，必须使用添加属性节点的方法。

element.setAttributeNode(attrNode)

第二步读取元素属性

方法一：通过元素对象打点获取相应属性值

element.attrName

方法二：通过attributes属性获取所有属性，返回一个NamedNodeMap对象

element.attributes

方法三：getAttributeNode()会返回对应属性的Attr节点。

element.getAttributeNode('attrName')

方法四：getAttribute()直接返回对应属性值

element.getAttribute('attrName')

第三步修改元素属性

方法一：通过元素对象打点修改相应属性值

element.attrName = 'attrValue'

方法二：通过setAttribute(attrName, attrValue)，attrName, attrValue分别表示属性名和属性值。

element.setAttribute('attrName', 'attrValue')

第四步删除属性

可以使用removeAttribute()方法删除。

element.removeAttribute('attrName')

亲自试一试

以下切换div颜色例子涵盖了上面所有的方法，试一试吧！

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>DOM-属性节点示例</title>
    <script>
        // 绑定页面加载完时的事件处理函数
        window.onload = function () {
            let orange = document.getElementsByClassName('orange-box')[0];
            // 创建属性节点title
            let attr = document.createAttribute('title');
            // 为属性赋值
            attr.value = '我是橘色容器';
            // 将创建的属性添加到div元素中，鼠标悬停到div看效果
            orange.setAttributeNode(attr);

            // 读取属性的四种方式
            console.log(orange.title); // 元素.attrName获取
            console.log(orange.attributes);
            console.log(orange.getAttributeNode('title'));
            console.log(orange.getAttribute('title'));

            let btn = document.getElementsByTagName('button');
            // 将盒子颜色设置为蓝色
            btn[0].onclick = function () {
                // 还可以通过 元素.attrName 赋值来改变
                orange.title = 'hi,我是蓝色盒子!';
                // 设置属性值setAttribute(name, value)
                orange.setAttribute('style', 'background-color: blue');
            }
            // 将盒子颜色设置为橘色
            btn[1].onclick = function () {
                orange.title = 'hi,我是橘色盒子!';
                orange.setAttribute('style', 'background-color: rgb(239, 84, 0)');
            }
            // 删除title属性
            btn[2].onclick = function () {
                // 删除属性removeAttribute(attrName)
                orange.removeAttribute('title');
            }
        }
    </script>
    <style>
        .orange-box {
            width: 100px;
            height: 100px;
            background-color: rgb(239, 84, 0);
        }
    </style>
</head>

<body>
    <div class="orange-box">
    </div>
    <button>蓝色</button>
    <button>橘色</button>
    <button>删除title属性</button>
</body>

</html>