JS--JavaScript属性节点特性，创建属性节点，读取、设置、删除属性（getAttribute、setAttribute、removeAttribute）

最新推荐文章于 2025-05-20 15:21:14 发布

原创最新推荐文章于 2025-05-20 15:21:14 发布 · 2.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #JS #JS属性节点

JavaScript 专栏收录该内容

47 篇文章

订阅专栏

本文深入探讨了属性节点（Attr）的概念，介绍了其在文档树中的作用、特征及操作方法，包括创建、读取、设置和删除属性，展示了如何通过JavaScript操纵DOM中的属性。

属性节点

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

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

访问属性节点

Attr是Element的属性，作为一种节点类型，它继承了Node类型的属性和方法。不过Attr没有父节点，同时属性也不被认为是元素的子节点，对于很多Node的属性来说都将返回null。

Attr对象包含3个专用属性，简单说明如下：

name：返回属性名称，与nodeName的值相同
value：设置或返回属性的值，与nodeValue的值相同
specified：如果属性值是在代码中设置的，则返回true，如果为默认值，则返回false

创建属性节点：

document.createAttribute(name)//name表示新创建的属性名称

读取属性

使用元素的getAttrbute()方法可以快速读取指定元素的属性值，传递的参数是一个以字符串形式表示的元素属性名称，返回的是一个字符串类型的值，如果给定属性不存在，则返回的值为null。

示例：读取属性,三种方式

<div id="box">document.createAttribute(name)</div>
<script>
	var element = document.getElementById("box");
	var attr = document.createAttribute("align");
	attr.value = "center";
	element.setAttributeNode(attr);
	alert(element.attributes["align"].value);
	alert(element.getAttributeNode("align").value);
	alert(element.getAttribute("align));
</script>

示例：使用className读写样式类

<label id="label1" class="Class1" for="textfield">文本框：
	<input type="text" name="textfield" id="textfield" />
</label>
<script>
	var label = document.getElementById("label1");
	alert(label.className);
	alert(label.htmlFor);
</script>

示例：对于复合类样式，需要使用split()方法劈开返回的字符串，然后遍历读取类样式

<div id="red" class="red blue">红盒子</div>
<script>
	var classNameArray = document.getElementById("red").className.split(" ");
	for(var i in classNameArray){
		alert(classNameArray[i]);
	}
</script>

设置属性值

使用元素的setAttribute()方法可以设置元素的属性

setAttribute(name, value)

参数name和value参数分别表示属性名称和属性值。属性名和属性值必须以字符串的形式进行传递。如果元素中存在指定的属性，它的值将被刷新；如果不存在，则setAttribute()方法将为元素创建该属性并复制。

示例：定义一个文本节点和元素节点，为h1设置title属性，添加到文档结构中

var hello = document.createTextNode("Hello World!");
var h1 = document.createElement("h1");
h1.setAttribute("title", "你好，欢迎光临！");
h1.appendChild(hello);
document.body.appendChild(h1);

示例：直接使用className添加类样式，会覆盖掉元素原来的类样式。这时应该采用叠加的方式添加类

<div id="red">红盒子</div>
<script>
	var red = document.getElementById("red");
	red.className = "red";
	red.className += " blue";
</script>

删除属性

使用元素的removeAttribute()方法可以删除指定的属性：

removeAttribute(name)//name表示元素的属性名

示例：动态设置表格的边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			window.onload = function(){
				var table = document.getElementsByTagName("table")[0];//获取表格外框引用
				var del = document.getElementById("del");//获取删除按钮
				var reset = document.getElementById("reset");//获取恢复按钮
				del.onclick = function(){
					table.removeAttribute("border");//删除属性
				}
				reset.onclick = function(){
					table.setAttribute("border", "2");
				}
			}
		</script>
	</head>
	<body>
		<table width="500px" border="2">
			<tr>
				<td>数据表格</td>
			</tr>
		</table>
		<button id="del">删除</button>
		<button id="reset">恢复</button>
	</body>
</html>