首页 > 代码库 > 深入理解DOM节点类型第六篇——特性节点Attribute

深入理解DOM节点类型第六篇——特性节点Attribute

2024-08-11 07:27:47   222人阅读

×
目录
[1]特征 [2]属性 [3]方法

前面的话

　　元素的特性在DOM中以Attr类型表示，从技术角度讲，特性是存在于元素的attributes属性中的节点。尽管特性是节点，但却不是DOM节点树的一部分。本文将详细介绍该部分内容

 

特征

　　特性节点的三个node属性————nodeType、nodeName、nodeValue分别是2、特性名称和特性值，其父节点parentNode是null

　　[注意]关于特性节点是否存在子节点，各个浏览器表现不一致

<div id="box"></div><script>var oBox = document.getElementById(‘box‘);var oAttr = oBox.attributes;//(chrome\safari\IE9+\firefox) 2 id box null//(IE7-) 2 onmsanimationiteration null nullconsole.log(oAttr[0].nodeType,oAttr[0].nodeName,oAttr[0].value,oAttr[0].parentNode)//(chrome\firefox) undefined//(safari) Text//(IE9+) box//(IE8-) 报错console.log(oAttr[0].childNodes[0])</script>

 

属性

　　Attr特性节点有3个属性：name、value和specified

name　

　　name是特性名称，与nodeName的值相同

value

　　value是特性的值，与nodeValue的值相同

specified

　　specified是一个布尔值，用以区别特性是在代码中指定的，还是默认的。这个属性的值如果为true，则意味着要么是在HTML中指定了相应特性，要么是通过setAttribute()方法设置了该属性。在IE中，所有未设置过的特性的该属性值都为false，而在其他浏览器中，所有特性的该属性值都是true

<div class="box" id="box"></div><script>var oBox = document.getElementById(‘box‘);var oAttr = oBox.attributes;//(chrome\safari\IE8+)class class true//(firefox)id id true//(IE7-)onmsanimationiteration onmsanimationiteration trueconsole.log(oAttr[0].name,oAttr[0].nodeName,oAttr[0].name == oAttr[0].nodeName)//IE7- "null" null false//其他浏览器 box box trueconsole.log(oAttr[0].value,oAttr[0].nodeValue,oAttr[0].value == oAttr[0].nodeValue)//IE7- false//其他浏览器 trueconsole.log(oAttr[0].specified)//true</script>
<div class="box" id="box" name="abc" index="123" title="test"></div><script>    var oBox = document.getElementById(‘box‘);console.log(oBox.attributes.id.specified)//trueconsole.log(oBox.attributes.onclick.specified)//在IE7-浏览器下会返回false，在其他浏览器下会报错</script>

　　specified常常用于解决IE7-浏览器显示所有特性的bug

<div class="box" id="box" name="abc" index="123" title="test"></div><script>function outputAttributes(element){    var pairs = new Array(),attrName,attrValue,i,len;    for(i = 0,len=element.attributes.length;i<len;i++){        attrName = element.attributes[i].nodeName;        attrValue = element.attributes[i].nodeValue;        if(element.attributes[i].specified){            pairs.push(attrName +"=\"" + attrValue + "\"");            }    }    return pairs.join(" ");}//所有浏览器下都返回title="test" class="box" id="box" index="123" name="abc"(顺序不一样)console.log(outputAttributes(document.getElementById("box")))</script>

 

方法

createAttribute()

　　createAttribute()方法传入特性名称并创建新的特性节点

setAttributeNode()

　　setAttributeNode()方法传入特性节点并将特性添加到元素上，无返回值

getAttributeNode()

　　getAttributeNode()方法传入特性名并返回特性节点

removeAttributeNode()

　　removeAttributeNode()方法传入特性名删除并返回删除的特性节点，但IE7-浏览器下无法删除

<div id="box"></div><script>var oBox = document.getElementById(‘box‘);var attr = document.createAttribute(‘title‘);attr.value = "test";console.log(oBox.setAttributeNode(attr));//nullconsole.log(oBox.getAttributeNode("title").name,attr.name);//title titleconsole.log(oBox.getAttributeNode("title").value,attr.value);//test test//返回删除的节点console.log(oBox.removeAttributeNode(attr));//IE7-浏览器下无法删除，其他浏览器返回nullconsole.log(oBox.getAttributeNode("title"));</script>

 

最后

　　特性节点在12种节点类型中排行老二，但是其属性和方法并不常用，因为元素节点都有对应的可替代的方法，而且使用起来更为方便

　　本文的重点再重复一次：特性是节点，但不存在DOM树中

　　以上

<script type="text/javascript">// 0){ return; } if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){ if(select[i+1].getBoundingClientRect().top > 0){ change(oCon.children[i+2]) } }else{ change(oCon.children[select.length+1]) } }}document.body.onmousewheel = wheel;document.body.addEventListener(‘DOMMouseScroll‘,wheel,false);var oCon = document.getElementById("content");var close = oCon.getElementsByTagName(‘span‘)[0];close.onclick = function(){ if(this.innerHTML == ‘显示目录‘){ this.innerHTML = ‘ב; this.style.background = ‘‘; oCon.style.border = ‘2px solid #ccc‘; oCon.style.width = ‘‘; oCon.style.height = ‘‘; oCon.style.overflow = ‘‘; oCon.style.lineHeight = ‘30px‘; }else{ this.innerHTML = ‘显示目录‘; this.style.background = ‘#3399ff‘; oCon.style.border = ‘none‘; oCon.style.width = ‘60px‘; oCon.style.height = ‘30px‘; oCon.style.overflow = ‘hidden‘; oCon.style.lineHeight = ‘‘; }}for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].onmouseover = function(){ this.style.color = ‘#3399ff‘; } oCon.children[i].onmouseout = function(){ this.style.color = ‘inherit‘; if(this.mark){ this.style.color = ‘#3399ff‘; } } oCon.children[i].onclick = function(){ change(this); } }function change(_this){ for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].mark = false; oCon.children[i].style.color = ‘inherit‘; oCon.children[i].style.textDecoration = ‘none‘; oCon.children[i].style.borderColor = ‘transparent‘; } _this.mark = true; _this.style.color = ‘#3399ff‘; _this.style.textDecoration = ‘underline‘; _this.style.borderColor = ‘#2175bc‘; }// ]]></script>

深入理解DOM节点类型第六篇——特性节点Attribute


联系
我们