一、getAttribute ---- 获取
- getAttribute是一个函数,不属于documnet对象
- getAttribute前面必须是一个准确的元素节点
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div title="被获取到的属性"></div>
<div title="被获取到的属性"></div>
<script>
var ti = document.getElementsByTagName('div');
console.log(ti);
for(var i = 0 ; i < ti.length;i++){
// getAttribute是一个函数,不属于documnet对象,
// 所以不能通过document对象调用
// getAttribute前面必须是一个准确的元素节点
console.log(ti[i ].getAttribute("title"));
}
</script>
</body>
</html>
展示效果:
一、setAttribute ---- 设置
- setAttribute是一个函数,不属于documnet对象
- setAttribute只能用于元素节点
- 它允许对元素节点的值进行修改
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p title="我是要被修改元素节点的值">我是要被修改元素节点的值</p>
<p title="我是要被修改元素节点的值">我是要被修改元素节点的值</p>
<p title="我是要被修改元素节点的值">我是要被修改元素节点的值</p>
<script>
var p = document.getElementsByTagName('p');
// 遍历获取所有的p节点
for(var i = 0; i < p.length ; i++){
var ti = p[i].getAttribute('title');
// 输出一下看看是否获取元素节点成功
console.log(ti);
var change= p[i].setAttribute('title','我已经被修改');
// 再次获取元素节点的属性值看看结果是否已经被修改
console.log(p[i].getAttribute('title'));
}
</script>
</body>
</html>
展示结果:
三、注意事项
- getAttribute(),setAttribute()是函数。不是document提供的方法
- 使用时前面必须是确定的元素节点