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

前面的话

　　元素的特性在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 null
console.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，未设置过的特性，如果强行为其设置specified属性，则报错。因为undefied没有属性

<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 true
console.log(oAttr[0].name,oAttr[0].nodeName,oAttr[0].name == oAttr[0].nodeName)
//IE7- "null" null false
//其他浏览器 box box true
console.log(oAttr[0].value,oAttr[0].nodeValue,oAttr[0].value == oAttr[0].nodeValue)
//IE7- false
//其他浏览器 true
console.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)//true
console.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));//null
console.log(oBox.getAttributeNode("title").name,attr.name);//title title
console.log(oBox.getAttributeNode("title").value,attr.value);//test test
//返回删除的节点
console.log(oBox.removeAttributeNode(attr));
//IE7-浏览器下无法删除，其他浏览器返回null
console.log(oBox.getAttributeNode("title"));
</script>

最后

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

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

　　以上

更多专业前端知识，请上【猿2048】www.mk2048.com

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

深入理解DOM事件类型系列第三篇——变动事件
前面的话变动(mutation)事件能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用DOM2级事件处理程序,且由于浏览器兼容性不好,所以用的不广泛删除节点删除节点时,涉及 ...
Node接口也定义了一些所有节点类型都包含的特性和方法
特性/方法类型/返回类型说明 nodeName String 节点的名字:根据节点的类型而定义 nodeValue String 节点的值:根据节点的类型而定义 nodeType Numb ...
深入理解DOM事件类型系列第六篇——加载事件
前面的话提到加载事件,可能想到了window.onload,但实际上,加载事件是一大类事件,本文将详细介绍加载事件 load load事件是最常用的一个事件,当页面完全加载后(包括所有图像.java ...
DOM节点类型及其属性和方法
目录一.DOM介绍二.DOM节点 1.节点层级 2.节点类型 3.节点树三.节点类型的属性和方法 1.Node类型 1.1 属性 nodeType nodeName nodeValue text ...
DOM是什么（DOM的节点类型）
学到DOM时,看到关于文档(结构树).节点(node).和DOM提供的一些方法获取(找到)所需的节点.还有DOM属性,我很混乱,我无法弄清节点的关系层级属性和方法的关系,所以在使用DOM之前我要先了解 ...
XML DOM 节点类型（Node Types）
实例在下面的例子中,我们将使用 XML 文件 books.xml,以及 JavaScript 函数 loadXMLDoc(). 显示所有元素的节点名称和节点类型显示所有元素的节点名称和节点值节点 ...
xpath的数据和节点类型以及XPath中节点匹配的基本方法
XPath数据类型 XPath可分为四种数据类型: 节点集(node-set) 节点集是通过路径匹配返回的符合条件的一组节点的集合.其它类型的数据不能转换为节点集. 布尔值(boolean) ...
JavaScript获取节点类型、节点名称和节点值
DOM节点信息包括节点类型(nodeType).节点名称(nodeName)和节点值(nodeValue). 节点类型 DOM节点中,每个节点都拥有不同的类型. W3C规范中常用的 DOM节点类型有以 ...
behavior3go行为树节点类型介绍
behavior3介绍提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.行为树节点类型二.行为树节点Composites组合类说明三.行为树节点Action ...

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

前面的话

特征

属性

方法

最后

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

最新文章

热门文章