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

水深无声 2021-08-13 22:16 344阅读 0赞

#### 属性节点 ####

属性节点由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>

![在这里插入图片描述][20190926173238538.png]

![在这里插入图片描述][20190926173251303.png]

[20190926173238538.png]: /images/20210813/5e32873b79cb4407bcadb3da9a0b8e07.png
[20190926173251303.png]: /images/20210813/4703cce44f1e442c9b2ca642db96c6d0.png