js中的attribute详解

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中的attribute详解相关的知识,希望对你有一定的参考价值。

Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍。attributes:获取一个属性作为对象getAttribute:获取某一个属性的值
object.getAttributes(attribute) getAttribute方法不属于document对象,所以不能通过document对象获取,只能通过元素节点的调用。例如document.getElementsByTagName("p")[0].
getAttributes("title")
setAttribute:建立一个属性,并同时给属性捆绑一个值
允许对属性节点做出修改,例如

var shoop=document.getElementsById("psdf‘);
shoop.setAttribute("tittle","a lot of goods")

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,注意到这点就可以了。
4\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的空属性)

<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>
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.createAttribute("good");
     document.getElementById("sss").setAttributeNode(d);
     alert(document.getElementById("t").innerHTML);
</script>

removeAttributeNode的使用方法:

<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>


原文参考链接:http://www.jianshu.com/p/41bed26419e0








以上是关于js中的attribute详解的主要内容,如果未能解决你的问题,请参考以下文章

js中的attribute详解

DOM探索之基础详解——学习笔记

C# 自定义特性(Attribute)详解

JavaScript 中 Property 和 Attribute 的区别详解

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

VSCode自定义代码片段——JS中的面向对象编程