JavaScript中的Attribute相關內容介紹

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 >    
<body>
<div id = "t"><input type = "hidden" id = "sss" value

 = "aaa"></div>
</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. < body >   
  2. < div   id  =  "t" > < input   type  =  "hidden"   id  =  "sss"   value  =  "aaa" > </ div >   
  3. </ body >   
<body>
<div id = "t"><input type = "hidden" id = "sss" value

 = "aaa"></div>
</body>

Js代碼 複製代碼
  1.  <script>   
  2. var  d = document.getElementById( "sss" ).getAttribute ( "value " );   
  3. document.write(d);   
  4. //顯示 aaa   
  5. </script>  
 

setAttribute的使用方法:(你會發現多了一個名爲good的屬性hello)

Html代碼 複製代碼
  1. < body >   
  2. < div   id  =  "t" > < input   type  =  "hidden"   id  =  "sss"   value  =  "aaa" > </ div >   
  3. </ body >   
<body>
<div id = "t"><input type = "hidden" id = "sss" value

 = "aaa"></div>
</body>

 
Js代碼 複製代碼
  1. <script>   
  2. var  d = document.getElementById( "sss" ).setAttribute( "good" , "hello" );   
  3. alert(document.getElementById( "t" ).innerHTML)   
  4. </script>  
 

createAttribute的使用方法:(多了一個名爲good的空屬性)

Html代碼 複製代碼
  1. < body >   
  2. < div   id  =  "t" > < input   type  =  "hidden"   id  =  "sss"   value  =  "aaa" > </ div >   
  3. </ body >   
<body>
<div id = "t"><input type = "hidden" id = "sss" value

 = "aaa"></div>
</body>

 
Js代碼 複製代碼
  1. <script>   
  2. var  d = document.createAttribute( "good" );   
  3. document.getElementById( "sss" ).setAttributeNode(d);   
  4. alert(document.getElementById( "t" ).innerHTML)   
  5. </script>  
 

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

Html代碼 複製代碼
  1. < body >   
  2. < div   id  =  "t" > < input   type  =  "hidden"   id  =  "sss"   value  =  "aaa" > </ div >   
  3. </ body >   
<body>
<div id = "t"><input type = "hidden" id = "sss" value

 = "aaa"></div>
</body>


 
Js代碼 複製代碼
  1. <script>   
  2. var  d = document.getElementById( "sss" ).removeAttribute( "value " );   
  3. alert(document.getElementById( "t" ).innerHTML)   
  4. </script>  
 

getAttributeNode,setAttributeNode,removeAttributeNode三個方法的特點是都直接操作一個node(節點),removeAttributeNode在一開始的時候總會用錯,但是充分理解了node的含義的時候,就能夠應用自如了。

getAttributeNode的使用方法:

Html代碼 複製代碼
  1. < body >   
  2. < div   id  =  "t" > < input   type  =  "hidden"   id  =  "sss"   value  =  "aaa" > </ div >   
  3. </ body >   
<body>
<div id = "t"><input type = "hidden" id = "sss" value

 = "aaa"></div>
</body>



 
Js代碼 複製代碼
  1. <script>   
  2. var  d = document.getElementById( "sss" ).getAttributeNode( "value " );    
  3. document.write(d.name);   
  4. document.write(d.value );   
  5. //顯示 value  aaa   
  6. </script>  
 setAttributeNode的使用方法:
Html代碼 複製代碼
  1. < body >   
  2. < div   id  =  "t" > < input   type  =  "hidden"   id  =  "sss"   value  =  "aaa" > </ div >   
  3. </ body >   
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>





 
Js代碼 複製代碼
  1. <script>   
  2. var  d = document.createAttribute( "good" );   
  3. document.getElementById( "sss" ).setAttributeNode(d);   
  4. alert(document.getElementById( "t" ).innerHTML);   
  5. </script>  
 

removeAttributeNode的使用方法:

Html代碼 複製代碼
  1. < body >   
  2. < div   id  =  "t" > < input   type  =  "hidden"   id  =  "sss"   value  =  "aaa" > </ div >   
  3. </ body >   
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>






 
Js代碼 複製代碼
  1. <script>   
  2. var  d = document.getElementById( "sss" ).getAttributeNode( "value" )   
  3. document.getElementById( "sss" ).removeAttributeNode(d);    
  4. alert(document.getElementById( "t" ).innerHTML);   
  5. </script>  
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章