attribute

JavaScript中的Attribute相关内容介绍

关键字: javascript, attribute, setattribute, createattribute

转自:帮你实现梦想的CSDN博客

 

Attribute是属性的意思文章仅对部分兼容IE和FF的Attribute相关的介绍。

attributes:获取一个属性作为对象

getAttribute:获取某一个属性的值
setAttribute:建立一个属性,并同时给属性捆绑一个值
createAttribute:仅建立一个属性
removeAttribute:删除一个属性

getAttributeNode:获取一个节点作为对象
setAttributeNode:建立一个节点
removeAttributeNode:删除一个节点

attributes可以获取一个对象中的一个属性,并且作为对象来调用,注意在这里要使用“[]”,IE在这里可以使用“()”,考虑到兼容性的问题,要使用“[]”。关于attributes属性的使用方式上,IE和FF有巨大的分歧,在此不多介绍。

attributes的使用方法:(IE和FF通用)

Html代码
  1. < body >   
  2. < div   id  =  "t" > < input   type  =  "hidden"   id  =  "sss"   value  =  "aaa" > </ div >   
  3. </ body >    
Js代码
  1. <script>  
  2. var  d = document.getElementById( "sss" ).attributes[ "value" ];  
  3. document.write(d.name);  
  4. document.write(d.value);  
  5. //显示value aaa   
  6. </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的使用方法:

Html代码
  1. < strong > < body >   
  2. < div   id  =  "t" > < input   type  =  "hidden"   id  =  "sss"   value  =  "aaa" > </ div >   
  3. </ body > </ strong >   
Js代码
  1. <strong> <script>  
  2. var  d = document.getElementById( "sss" ).getAttribute( "value" );  
  3. document.write(d);  
  4. //显示 aaa   
  5. </script></strong>  
 

setAttribute的使用方法:(你会发现多了一个名为good的属性hello)

Html代码
  1. < strong > < body >   
  2. < div   id  =  "t" > < input   type  =  "hidden"   id  =  "sss"   value  =  "aaa" > </ div >   
  3. </ body > </ strong >   
 
Js代码
  1. <strong><script>  
  2. var  d = document.getElementById( "sss" ).setAttribute( "good" , "hello" );  
  3. alert(document.getElementById("t" ).innerHTML)  
  4. </script></strong>  
 

createAttribute的使用方法:(多了一个名为good的空属性)

Html代码
  1. < strong > < body >   
  2. < div   id  =  "t" > < input   type  =  "hidden"   id  =  "sss"   value  =  "aaa" > </ div >   
  3. </ body > </ strong >   
 
Js代码
  1. <strong><script>  
  2. var  d = document.createAttribute( "good" );  
  3. document.getElementById("sss" ).setAttributeNode(d);  
  4. alert(document.getElementById("t" ).innerHTML)  
  5. </script></strong>  
 

removeAttribute的使用方法:(少了一个)

Html代码
  1. < strong > < body >   
  2. < div   id  =  "t" > < input   type  =  "hidden"   id  =  "sss"   value  =  "aaa" > </ div >   
  3. </ body >   
  4. </ strong >   
 
Js代码
  1. <strong><script>  
  2. var  d = document.getElementById( "sss" ).removeAttribute( "value" );  
  3. alert(document.getElementById("t" ).innerHTML)  
  4. </script></strong>  
 

getAttributeNode,setAttributeNode,removeAttributeNode三个方法的特点是 都直接操作一个node(节点),removeAttributeNode在一开始的时候总会用错,但是充分理解了node的含义的时候,就能够应用自如 了。

getAttributeNode的使用方法:

Html代码
  1. < strong > < strong > < body >   
  2. < div   id  =  "t" > < input   type  =  "hidden"   id  =  "sss"   value  =  "aaa" > </ div >   
  3. </ body > </ strong > </ strong >   
 
Js代码
  1. <strong><strong><script>  
  2. var  d = document.getElementById( "sss" ).getAttributeNode( "value" );   
  3. document.write(d.name);  
  4. document.write(d.value);  
  5. //显示 value aaa   
  6. </script>  
  7. </strong></strong>  
 setAttributeNode的使用方法:
Html代码
  1. < strong > < strong > < strong > < body >   
  2. < div   id  =  "t" > < input   type  =  "hidden"   id  =  "sss"   value  =  "aaa" > </ div >   
  3. </ body > </ strong > </ strong > </ strong >   
 
Js代码
  1. <strong><strong><strong><script>  
  2. var  d = document.createAttribute( "good" );  
  3. document.getElementById("sss" ).setAttributeNode(d);  
  4. alert(document.getElementById("t" ).innerHTML);  
  5. </script></strong></strong></strong>  
 

removeAttributeNode的使用方法:

Html代码
  1. < strong > < strong > < strong > < body >   
  2. < div   id  =  "t" > < input   type  =  "hidden"   id  =  "sss"   value  =  "aaa" > </ div >   
  3. </ body >   
  4. </ strong > </ strong > </ strong >   

 

Js代码
  1. <strong><strong><strong><script>  
  2. var  d = document.getElementById( "sss" ).getAttributeNode( "value" )  
  3. document.getElementById("sss" ).removeAttributeNode(d);   
  4. alert(document.getElementById("t" ).innerHTML);  
  5. </script></strong></strong></strong> 

你可能感兴趣的:(attribute)