下面小编就为大家带来一篇 JS Attribute 属性操作详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
Attribute 是属性的意思,文章仅对部分兼容 IE 和 FF 的 Attribute 相关的介绍。
attributes:获取一个属性作为对象
getAttribute:获取某一个属性的值
setAttribute:建立一个属性,并同时给属性捆绑一个值
createAttribute:仅建立一个属性
removeAttribute:删除一个属性
getAttributeNode:获取一个节点作为对象
setAttributeNode:建立一个节点
removeAttributeNode:删除一个节点
attributes 可以获取一个对象中的一个属性,并且作为对象来调用,注意在这里要使用 "[]",IE 在这里可以使用 "()",考虑到兼容性的问题,要使用 "[]"。关于 attributes 属性的使用方式上,IE 和 FF 有巨大的分歧,在此不多介绍。
attributes 的使用方法:(IE 和 FF 通用)
- <body>
- <div id="t">
- <input type="hidden" id="sss" value="aaa">
- </div>
- </body>
- <script>
- var d = document.getElementById("sss").attributes["value"];
- document.write(d.name);
- document.write(d.value);
- //显示value aaa
- </script>
getAttribute,setAttribute,createAttribute,removeAttribute 四兄弟的概念比较容易理解,使用方法也比较简单,唯一需要注意这几点:
1、createAttribute 在使用的时候不需要基于对象的,document.createAttribute() 就可以。
2、setAttribute,createAttribute 在使用的时候不要使用 name,type,value 等单词,IE 和 FF 的反应都奇怪的难以理解。
3、createAttribute 在使用的时候如果只定义了名字,没有 d.nodeValue = "hello"; 语句定义值,FF 会认为是一个空字符串,IE 认为是 undefined,注意到这点就可以了。
getAttribute 的使用方法:
- <body>
- <div id="t">
- <input type="hidden" id="sss" value="aaa">
- </div>
- </body>
- <script>
- var d = document.getElementById("sss").getAttribute("value");
- document.write(d);
- //显示 aaa
- </script>
setAttribute 的使用方法:(你会发现多了一个名为 good 的属性 hello)
- <body>
- <div id="t">
- <input type="hidden" id="sss" value="aaa">
- </div>
- </body>
- <script>
- var d = document.getElementById("sss").setAttribute("good", "hello");
- alert(document.getElementById("t").innerhtml)
- </script>
createAttribute 的使用方法:(多了一个名为 good 的空属性)
removeAttribute 的使用方法:(少了一个)
- <body>
- <div id="t">
- <input type="hidden" id="sss" value="aaa">
- </div>
- </body>
- <script>
- var d = document.getElementById("sss").removeAttribute("value");
- alert(document.getElementById("t").innerHTML)
- </script>
getAttributeNode,setAttributeNode,removeAttributeNode 三个方法的特点是都直接操作一个 node(节点),removeAttributeNode 在一开始的时候总会用错,但是充分理解了 node 的含义的时候,就能够应用自如了。
getAttributeNode 的使用方法:
- <body>
- <div id="t">
- <input type="hidden" id="sss" value="aaa">
- </div>
- </body>
- <script>
- var d = document.getElementById("sss").getAttributeNode("value");
- document.write(d.name);
- document.write(d.value);
- //显示 value aaa
- </script>
setAttributeNode 的使用方法:
- <body>
- <div id="t">
- <input type="hidden" id="sss" value="aaa">
- </div>
- </body>
- <script>
- var d = document.createAttribute("good");
- document.getElementById("sss").setAttributeNode(d);
- alert(document.getElementById("t").innerHTML);
- </script>
removeAttributeNode 的使用方法:
更多的关于 attributes 属必性问题,可在 w3school 中查询!
- <body>
- <div id="t">
- <input type="hidden" id="sss" value="aaa">
- </div>
- </body>
- <script>
- var d = document.getElementById("sss").getAttributeNode("value") document.getElementById("sss").removeAttributeNode(d);
- alert(document.getElementById("t").innerHTML);
- </script>
以上这篇 JS Attribute 属性操作详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0301/265650.html