浅谈js里的attributes和与之相关的一些属性

在前端里，想要对静态的HTML变得更加的动态，就必须要对HTML的dom进行操作，dom犹如一个树，树的最底层是文档节点，这个节点顺着上来就到了html节点，也就是根节点。这个根节点有两个分支，一个是body，另一个是head。head里面有很多个子节点，必须要有的是title节点，其他常见的有meta、style、link等，而body里面也有无数个节点。就拿body里面的p节点来讲，里面就有文本，这个文本也是一个节点，称为#text节点。这些就是整个dom树的大概。

在了解了这些节点后，当我们想要获取一个节点的名字或者改变节点里的属性值或文本值的时候怎么办？这里就要提nodeName、nodeValue和nodeType了。nodeName是只读属性，不能写入和修改，它能够获取元素节点的标签名、属性节点的属性名、文本节点的#text和文档节点的#document。而nodeValue能够写入，它能够获取文本节点的内容、属性节点的属性值，在元素节点里它获取的结果是undefined或者null，nodeValue可以被textContent属性替换。而nodeType返回的是节点类型，不能修改的，常见的节点类型有：

详细代码如下：

<body>
	<p id='ha'>a</p>
</body>
<script type="text/javascript">
	var a = document.getElementById('ha')
	console.log(a.nodeName)
	console.log(a.firstChild.nodeValue = 'ha')
	console.log(a.nodeType)
</script>

那么我们想对节点进行操作怎么办，这里有几个属性：getAttributeNode、setAttributeNode和removeAttributeNode。这三个方法分别表示为：getAttributeNode：获取一个节点作为对象、setAttributeNode：设置一个节点和removeAttributeNode：删除一个节点。这三个属性在DOM4版本中已经不推荐使用了，在DOM4版本中推荐使用的是getAttribute、setAttribute和removeAttribute。在DOM4里，属性已不在作为一个特殊的节点了。下面的例子是展示的是新的标准的写法：

首先是getAttribute，它与getAttributeNode不同的是，返回的是属性值而不是一个对象：

<body> 
	<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div> 
</body>
<script> 
	var a = document.getElementById("sss").getAttribute("value"); 
	console.log(a)
</script>

而getAttributeNode想要得到与上面相同的结果，需要这样写：

var a = document.getElementById("sss").getAttributeNode("value"); 
console.log(a.value)

然后是setAttribute，它是设置属性和属性值，而setAttributeNode是设置一个节点，setAttributeNode不如setAttribute灵活：

<body> 
	<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div> 
</body>
<script> 
	var a = document.getElementById("t")
	a.firstChild.setAttribute('ha','haha'); 
	console.log(a.innerHTML)
</script>

而setAttributeNode想要实现上面的例子，首先先要创造一个属性名，然后给属性赋值，最后添加到节点上：

var a = document.createAttribute('ha')
a.nodeValue = 'haha'
var b = document.getElementById('t')
b.firstChild.setAttributeNode(a)
console.log(b.innerHTML)

最后是removeAttribute，与removeAttributeNode相同的是都是删除一个属性，但是区别是，前者没有返回值，而后者以attr对象形式返回被删除的属性：

<body> 
	<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div> 
</body>
<script> 
	var a = document.getElementById("t")
	a.firstChild.setAttribute('ha','haha'); 
	a.firstChild.removeAttribute('ha')
	console.log(a.innerHTML)
</script>

由于removeAttributeNode的参数是对象，所以用getAttributeNode来获得这个节点对象，所以本身这个方法用的比较费劲：

var a = document.getElementById("t")
a.firstChild.setAttribute('ha','haha'); 
var b = a.firstChild.getAttributeNode('ha')
a.firstChild.removeAttributeNode(b)
console.log(a.innerHTML)

基础铺好了好，就介绍标题里面所提的attributes了。这个attributes返回的是某个节点里所有属性的集合，返回的是一个NamedNodeMap对象，在这个对象里分两部分，两部分的值都相同只是键不同，一部分的键名以0开始依次增加排列，另一部分的键名则是以属性名来命名的，如上面的这个HTML代码，把下面的这段代码放到控制台那里输出就会看到这两部分：

document.getElementById('sss').attributes

不过好可惜，attributes属性在DOM4里面被列为不推荐使用，所以这里也没必要深究这个attributes了。这里只列一下attributes的一些常见用法，如下面的两个得到的都是同一个结果：

<body>
	<p id="intro">Hello World!</p>
</body>
<script type="text/javascript">
	x=document.getElementById("intro");
	console.log(x.attributes['id'].nodeName);
	console.log(x.attributes.getNamedItem("id").nodeName);
</script>

最后楼主翻阅MDN的时候，发现nodeName、nodeValue和nodeType都不推荐使用，nodeName被name替换，nodeValue被value替换。不得不感慨DOM4简直想要来个大变脸。

浅谈js里的attributes和与之相关的一些属性

猜你喜欢