黑马程序员技术交流社区

标题: 【上海校区前端】getAttributeNode()和setAttributeNode() [打印本页]

---

作者: 叶夜葉    时间: 2018-10-19 15:45
标题: 【上海校区前端】getAttributeNode()和setAttributeNode()


转载自：https://www.cnblogs.com/wangfupeng1988/p/3631853.html
1.从jQuery说起：

jQuery指出，在IE6、7下，浏览器的getAttribute()和setAttribute()不能正常获取和设置Attribute的值。jQuery做的测试类似于：

div1.className = 'aaa';alert(div1.getAttribute("className") === 'aaa');

IE6、7下或出现以上情况，即通过正常的 getAttribute("class")获取不到值。

那么在这种情况下，jQuery给出的解决方案是通过getAttributeNode("class").nodeValue获取，即可成功。相关代码如下：

[url=][/url]
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 node17             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 }[url=][/url]


2.如何应用：

2.1 getAttributeNode:

getAttributeNode()用法比较简单，它将返回一个Attr类型的对象，其nodeType === 2

<div id="div1" class="divClass"></div>var className = div1.getAttributeNode("class").nodeValue;      //'divClass'var title = div1.getAttributeNode("title");                    // nullvar type = div1.getAttributeNode("class").nodeType;            // 2

2.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”的自定义特性:

3.最后：

加上对getAttributeNode()和setAttributeNode()的分析，对于html特性和dom属性的分析就更全面了。

各位看官，如有发现问题，请尽管提出！在此谢过！

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2