模仿做网站,纯水设备,阿里云自助建站模板,本周热点新闻事件前面的话 元素的特性在DOM中以Attr类型表示#xff0c;从技术角度讲#xff0c;特性是存在于元素的attributes属性中的节点。尽管特性是节点#xff0c;但却不是DOM节点树的一部分。本文将详细介绍该部分内容 特征 特性节点的三个node属性————nodeType、nodeName、nodeV…前面的话 元素的特性在DOM中以Attr类型表示从技术角度讲特性是存在于元素的attributes属性中的节点。尽管特性是节点但却不是DOM节点树的一部分。本文将详细介绍该部分内容 特征 特性节点的三个node属性————nodeType、nodeName、nodeValue分别是2、特性名称和特性值其父节点parentNode是null [注意]关于特性节点是否存在子节点各个浏览器表现不一致 div idbox/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 classbox idbox/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 classbox idbox nameabc index123 titletest/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 classbox idbox nameabc index123 titletest/div
script
function outputAttributes(element){
var pairs new Array(),attrName,attrValue,i,len;
for(i 0,lenelement.attributes.length;ilen;i ){
attrName element.attributes[i].nodeName;
attrValue element.attributes[i].nodeValue;
if(element.attributes[i].specified){
pairs.push(attrName \ attrValue \);
}
}
return pairs.join( );
}
//所有浏览器下都返回titletest classbox idbox index123 nameabc(顺序不一样)
console.log(outputAttributes(document.getElementById(box)))
/script 方法
createAttribute() createAttribute()方法传入特性名称并创建新的特性节点
setAttributeNode() setAttributeNode()方法传入特性节点并将特性添加到元素上无返回值
getAttributeNode() getAttributeNode()方法传入特性名并返回特性节点
removeAttributeNode() removeAttributeNode()方法传入特性名删除并返回删除的特性节点但IE7-浏览器下无法删除 div idbox/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
