JavaScript中的DOM操作之设定标签属性

最新推荐文章于 2022-04-29 18:09:20 发布

Submerge~

最新推荐文章于 2022-04-29 18:09:20 发布

阅读量283

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/MixedSignals/article/details/105155812

版权

给标签添加属性，标签对象.setAttribute(‘属性名称’ , 属性值);一次只能定义一个属性，如果要定义多个属性，要执行多次
获取标签属性的属性值，标签对象.getAttribute(‘属性名称’);，获取到的结果都是字符串类型

<body>
<div>我是div</div>
<script> 
var oDiv = document.querySelector('div');

oDiv.setAttribute('index' , 0);// 给div标签添加属性index,属性值是0
oDiv.setAttribute('key' , '第一个div');// 给div标签添加属性ley,属性值是'第一个div'

console.log( oDiv.getAttribute('index') ); // 获取标签属性的属性值
</script> 
</body>

id属性、class属性直接定义在标签对象上的方法，可以直接定义或者获取不，通过get 、set

// 标签对象.id = 属性值   设定id属性的属性值
oDiv.id = 'div1';

// 标签对象.className = 属性值   设定class属性的属性值
oDiv.className = 'div2';

// 标签对象.id   获取标签对象,id属性值
console.log( oDiv.id )

// 标签对象.className   获取标签对象,class属性值
console.log( oDiv.className )

// 直接操作name属性, 并不是所有的浏览器都支持的。使用set、get最安全 
oDiv.name = '张三';
console.log(oDiv.name);