JavaScript DOM属性和方法之attribute属性对象

在HTML的DOM中,attribute对象表示HTML属性。HTML属性始终属于HTML元素,它在DOM节点中被称为属性节点。在DOM中,NamedNodeMap对象表示元素属性节点的无序集合,我们可以通过指定的索引访问指定的属性。通过element对象的attribute属性可以返回该元素节点的所有属性节点,也就是NamedNodeMap,而通过element对象的getAttributeNode()方法可以得到指定的属性节点

一、attribute对象属性

1、attr.isId

这个属性用来判断,如果属性节点是id类型,则返回true,否则返回false。

2、attr.name 和 attr.value

attr.name属性可以返回属性节点的名字,用于替代attr.nodeName属性

attr.value属性可以返回属性节点的值,用于替代attr.nodeValue属性

javascript 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>

</head>
<body>
<div id="content" name="知数SEO" class="font">知数SEO</div>
<button onclick="getName()">获取属性节点的名字和值</button>
</body>
<script>
    function getName(){
        var attrs = document.getElementById('content').attributes;
        console.log(attrs);
        var name = attrs[0].name;
        var value = attrs[0].value;
        console.log(name,value);  // id content
    }
</script>
</html>
二、attribute对象方法

attribute对象并没有对性的方法,而它的集合也就是属性集合NameNodeMap有两个常用的方法

  • getNameItem() 返回指定的属性节点
  • setNameItem() 设置指定的属性节点
javascript 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>
    <style>
        .font{color:red}
    </style>
</head>
<body>
<div id="content" name="zhishuseo">知数SEO</div>
<button onclick="getAttr()">获取属性节点</button>
<button onclick="setAttr()">设置属性节点</button>
</body>
<script>
    var attrs = document.getElementById('content').attributes;
    // 获取指定属性
    function getAttr(){
        var name = attrs.getNamedItem('name');
        console.log(name);
    }
    // 设置指定属性
    function setAttr(){
        var classAttr = document.createAttribute('class');
        classAttr.value = 'font';
        attrs.setNamedItem(classAttr);
    }
</script>
</html>
相关推荐
Myli_ing4 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
在下不上天6 分钟前
Flume日志采集系统的部署,实现flume负载均衡,flume故障恢复
大数据·开发语言·python
陌小呆^O^20 分钟前
Cmakelist.txt之win-c-udp-client
c语言·开发语言·udp
I_Am_Me_36 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
重生之我是数学王子1 小时前
QT基础 编码问题 定时器 事件 绘图事件 keyPressEvent QT5.12.3环境 C++实现
开发语言·c++·qt
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
Ai 编码助手1 小时前
使用php和Xunsearch提升音乐网站的歌曲搜索效果
开发语言·php
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
神仙别闹1 小时前
基于C#和Sql Server 2008实现的(WinForm)订单生成系统
开发语言·c#
XINGTECODE1 小时前
海盗王集成网关和商城服务端功能golang版
开发语言·后端·golang