操作节点的标签属性

XiaoDengll

于 2021-10-11 10:40:13 发布

阅读量132

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/quangelixi/article/details/120697576

版权

1、自定义属性节点.属性名

let box = documnet.querySelector("box");
box.a = false; //定义的这个box变量的a属性只能在js中使用，不能出现在标签的属性中

2、合法标签属性就是标签里面的属性

标签自带的属性如：id class title src alt name等

直接使用 节点. 的方式获取属性值。eg：console.log(节点.id); 节点.title = "新的title" console.log(节点.src)返回的是绝对路径。

class名字不能 节点.class ，而是使用 节点.className 代替。

3、自定义的标签属性自己通过js定义的标签属性，可以出现在标签里面

不能直接使用 . 操作获取属性值。

创建createAttribute属性节点

let zhuque =document.createAttribute("zhuque")//创建一个属性节点
zhuque.value = "123"; //添加属性值
box.setAttributeNode(zhuque); //创建的属性节点，添加进box元素里去
console.log(d1.getAttribute("zhuque")); //打印属性值123

设置（修改、创建）setAttribute标签属性

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<div id="d1" name="n1"></div>
</body>
</html>
<script>
	let d1 = document.getElementById("d1");
	d1.setAttribute("name","123");  //修改name属性的属性值为123
	d1.setAttribute("class","foot"); //创建一个class属性和设置属性值
	d1.setAttribute("que","456");  //自定义一个属性和属性值
</script>

效果图：

获取getAttribute 标签属性值

移除removeAttribute标签属性

let box = documnet.querySelector("box");
box.setAttribute("属性名","属性值"); //设置标签的属性和对应属性值
box.getAttribute("属性名"); // 返回属性名的属性值通过属性名来获得属性值
box.removeAttribute("属性名")//移除标签中的属性返回属性值

//通常设置自定义标签属性前面都加个 data- 用来识别是自定义标签属性
box.setAttribute("data-queque","属性值");
box.setAttribute("data-mei","属性值");
console.log(box.dataset); //把设置的属性前面是data-的属性保存到一个对象中去，这个对象是dataset。保存进的属性会去掉data-。
consoel.log(box.dataset.queque);//获取这个属性的属性值。就是看成对象获取属性一样

XiaoDengll

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
操作节点的标签属性

1、自定义属性节点.属性名let box = documnet.querySelector("box");box.a = false; //定义的这个box变量的a属性只能在js中使用，不能出现在标签的属性中2、合法标签属性就是标签里面的属性标签自带的属性如：id class title src alt name等直接使用节点. 的方式获取属性值。eg：console.log(节点.id); 节点.title = "新的title" console.log(节点.sr...
复制链接

扫一扫