js便签笔记(4)——简单说说getAttributeNode()和setAttributeNode()
1.前言:
前两天写过一片《分析dom元素的特性Attribute和属性Property》,分析了特性和属性的区别。那篇文章却忽略了一个主要知识点——getAttributeNode()和setAttributeNode()
近来看《jQuery技术内幕》,今天正好看到jQuery.attr()那一部分,忽然想起来这个方法。就此简单说一说。
2.从jQuery说起:
jQuery指出,在IE6、7下,浏览器的getAttribute()和setAttribute()不能正常获取和设置Attribute的值。jQuery做的测试类似于:
div1.className = 'aaa';
alert(div1.getAttribute("className") === 'aaa');
IE6、7下或出现以上情况,即通过正常的 getAttribute("class")获取不到值。
那么在这种情况下,jQuery给出的解决方案是通过getAttributeNode("class").nodeValue获取,即可成功。相关代码如下:
1 if ( !getSetAttribute ) { 2 3 //省略... 4 5 // Use this for any attribute in IE6/7 6 // This fixes almost every IE6/7 issue 7 nodeHook = jQuery.valHooks.button = { 8 get: function( elem, name ) { 9 var ret; 10 ret = elem.getAttributeNode( name ); 11 return ret && ( fixSpecified[ name ] ? ret.nodeValue !== "" : ret.specified ) ? 12 ret.nodeValue : 13 undefined; 14 }, 15 set: function( elem, value, name ) { 16 // Set the existing or create a new attribute node 17 var ret = elem.getAttributeNode( name ); 18 if ( !ret ) { 19 ret = document.createAttribute( name ); 20 elem.setAttributeNode( ret ); 21 } 22 return ( ret.nodeValue = value + "" ); 23 } 24 }; 25 26 //省略... 27 }
3.如何应用:
3.1 getAttributeNode:
getAttributeNode()用法比较简单,它将返回一个Attr类型的对象,其nodeType === 2
<div id="div1" class="divClass"></div> var className = div1.getAttributeNode("class").nodeValue; //'divClass' var title = div1.getAttributeNode("title"); // null var type = div1.getAttributeNode("class").nodeType; // 2
3.2 setAttributeNode:
setAttributeNode()将接收一个Attr类型的对象,Attr类型的对象可用document直接创建:
<div id="div1" class="divClass"></div> var attr = document.createAttribute("myAttr"); attr.nodeValue = 'wang'; div1.setAttributeNode(attr);
运行以上代码,div1会加上一个“myAttr”的自定义特性:
4.最后:
加上对getAttributeNode()和setAttributeNode()的分析,对于html特性和dom属性的分析就更全面了。
各位看官,如有发现问题,请尽管提出!在此谢过!