浅谈js里的attributes和与之相关的一些属性
2017-10-07 12:16
381 查看
在前端里,想要对静态的HTML变得更加的动态,就必须要对HTML的dom进行操作,dom犹如一个树,树的最底层是文档节点,这个节点顺着上来就到了html节点,也就是根节点。这个根节点有两个分支,一个是body,另一个是head。head里面有很多个子节点,必须要有的是title节点,其他常见的有meta、style、link等,而body里面也有无数个节点。就拿body里面的p节点来讲,里面就有文本,这个文本也是一个节点,称为#text节点。这些就是整个dom树的大概。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/09/997c36e3aa7643bf69d8a89c9a601e1b)
在了解了这些节点后,当我们想要获取一个节点的名字或者改变节点里的属性值或文本值的时候怎么办?这里就要提nodeName、nodeValue和nodeType了。nodeName是只读属性,不能写入和修改,它能够获取元素节点的标签名、属性节点的属性名、文本节点的#text和文档节点的#document。而nodeValue能够写入,它能够获取文本节点的内容、属性节点的属性值,在元素节点里它获取的结果是undefined或者null,nodeValue可以被textContent属性替换。而nodeType返回的是节点类型,不能修改的,常见的节点类型有:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/09/77d7834a933e19b4a99459b4ecee1f16)
详细代码如下:
那么我们想对节点进行操作怎么办,这里有几个属性:getAttributeNode、setAttributeNode和removeAttributeNode。这三个方法分别表示为:getAttributeNode:获取一个节点作为对象、setAttributeNode:设置一个节点和removeAttributeNode:删除一个节点。这三个属性在DOM4版本中已经不推荐使用了,在DOM4版本中推荐使用的是getAttribute、setAttribute和removeAttribute。在DOM4里,属性已不在作为一个特殊的节点了。下面的例子是展示的是新的标准的写法:
首先是getAttribute,它与getAttributeNode不同的是,返回的是属性值而不是一个对象:
然后是setAttribute,它是设置属性和属性值,而setAttributeNode是设置一个节点,setAttributeNode不如setAttribute灵活:
最后是removeAttribute,与removeAttributeNode相同的是都是删除一个属性,但是区别是,前者没有返回值,而后者以attr对象形式返回被删除的属性:
基础铺好了好,就介绍标题里面所提的attributes了。这个attributes返回的是某个节点里所有属性的集合,返回的是一个NamedNodeMap对象,在这个对象里分两部分,两部分的值都相同只是键不同,一部分的键名以0开始依次增加排列,另一部分的键名则是以属性名来命名的,如上面的这个HTML代码,把下面的这段代码放到控制台那里输出就会看到这两部分:
不过好可惜,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简直想要来个大变脸。
参考文章:MDN DOM4中不推荐使用的attr对象的某些属性 js中的attributes
在了解了这些节点后,当我们想要获取一个节点的名字或者改变节点里的属性值或文本值的时候怎么办?这里就要提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简直想要来个大变脸。
参考文章:MDN DOM4中不推荐使用的attr对象的某些属性 js中的attributes
相关文章推荐
- js与浏览器相关的一些属性
- js 中对象--属性相关操作
- JS 对象属性相关--检查属性、枚举属性等
- js 对窗口操做的一些属性
- 浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
- jquery属性的相关js实现方法
- 浅谈JS使用[ ]来访问对象属性
- [Unity编辑器]与编辑器相关的一些Attribute属性
- AngularJS下一些JS的属性
- js属性及浏览器内置属性相关
- 浅谈图像处理方向的就业前景 & 心得感悟 & 一些相关期刊
- Js获取当前页面URL的一些属性
- js中scrollLeft、scrollWidth、offsetTop等相关位置属性的理解(转)
- 浅谈js内置对象Math的属性和方法(推荐)
- 浅谈React 属性和状态的一些总结
- 最近两个月所写的一些JS相关插件
- JS获取当前页面路径的相关方法(属性)
- js学习小结(十四)2014.5.23(keyboard事件,mouseEvent事件event的相关属性,ie事件注册的N中方式)
- iPhone X 的凹槽 和 iOS 11 中一些相关 CSS 属性
- js 一些属性