詳解JS中的attribute屬性
Attribute是屬性的意思,文章僅對(duì)部分兼容IE和FF的Attribute相關(guān)的介紹。
attributes:獲取一個(gè)屬性作為對(duì)象getAttribute:獲取某一個(gè)屬性的值
object.getAttributes(attribute) getAttribute方法不屬于document對(duì)象,所以不能通過document對(duì)象獲取,只能通過元素節(jié)點(diǎn)的調(diào)用。例如document.getElementsByTagName("p")[0].
getAttributes("title")
setAttribute:建立一個(gè)屬性,并同時(shí)給屬性捆綁一個(gè)值
允許對(duì)屬性節(jié)點(diǎn)做出修改,例如
var shoop=document.getElementsById("psdf'); shoop.setAttribute("tittle","a lot of goods")
createAttribute:僅建立一個(gè)屬性
removeAttribute:刪除一個(gè)屬性
getAttributeNode:獲取一個(gè)節(jié)點(diǎn)作為對(duì)象
setAttributeNode:建立一個(gè)節(jié)點(diǎn)
removeAttributeNode:刪除一個(gè)節(jié)點(diǎn)
attributes可以獲取一個(gè)對(duì)象中的一個(gè)屬性,并且作為對(duì)象來調(diào)用,注意在這里要使用“[]”,IE在這里可以使用“()”,考慮到兼容性的問題,要使用“[]”。關(guān)于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四兄弟的概念比較容易理解,使用方法也比較簡單,唯一需要注意這幾點(diǎn):
1、createAttribute在使用的時(shí)候不需要基于對(duì)象的,document.createAttribute()就可以。
2、setAttribute,createAttribute在使用的時(shí)候如果是使用的時(shí)候不要使用name,type,value等單詞,IE都FF的反應(yīng)都奇怪的難以理解。
3、createAttribute在使用的時(shí)候如果只定義了名字,沒有d.nodeValue = "hello";語句定義值,F(xiàn)F會(huì)認(rèn)為是一個(gè)空字符串,IE認(rèn)為是undefined,注意到這點(diǎn)就可以了。
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的使用方法:(你會(huì)發(fā)現(xiàn)多了一個(gè)名為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的使用方法:(多了一個(gè)名為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的使用方法:(少了一個(gè))
<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三個(gè)方法的特點(diǎn)是都直接操作一個(gè)node(節(jié)點(diǎn)),removeAttributeNode在一開始的時(shí)候總會(huì)用錯(cuò),但是充分理解了node的含義的時(shí)候,就能夠應(yīng)用自如了。
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>
以上所述是小編給大家介紹的JS中的attribute屬性,希望對(duì)大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
關(guān)于在IE下的一個(gè)安全BUG --可用于跟蹤用戶的系統(tǒng)鼠標(biāo)位置
本篇文章小編將為大家介紹,關(guān)于在IE下的一個(gè)安全BUG --可用于跟蹤用戶的系統(tǒng)鼠標(biāo)位置。需要的朋友可以參考一下2013-04-04基于原生js實(shí)現(xiàn)判斷元素是否有指定class名
這篇文章主要介紹了基于原生js實(shí)現(xiàn)判斷元素是否有指定class名,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07JavaScript常用正則驗(yàn)證函數(shù)實(shí)例小結(jié)【年齡,數(shù)字,Email,手機(jī),URL,日期等】
這篇文章主要介紹了JavaScript常用正則驗(yàn)證函數(shù),結(jié)合實(shí)例形式總結(jié)分析了javascript針對(duì)年齡、數(shù)字、Email、手機(jī)、URL、日期等格式常用正則驗(yàn)證技巧,需要的朋友可以參考下2017-01-01mui 打開新窗口的方式總結(jié)及注意事項(xiàng)
這篇文章主要介紹了mui 打開新窗口的方式總結(jié)及注意事項(xiàng),需要的朋友可以參考下2017-08-08JS匿名函數(shù)和匿名自執(zhí)行函數(shù)概念與用法分析
這篇文章主要介紹了JS匿名函數(shù)和匿名自執(zhí)行函數(shù)概念與用法,結(jié)合實(shí)例形式分析了匿名函數(shù)和匿名自執(zhí)行函數(shù)的概念、功能、應(yīng)用場景及相關(guān)使用技巧,需要的朋友可以參考下2018-03-03原生JS 實(shí)現(xiàn)的input輸入時(shí)表格過濾操作示例
這篇文章主要介紹了原生JS 實(shí)現(xiàn)的input輸入時(shí)表格過濾操作,結(jié)合實(shí)例形式分析了JavaScript基于頁面元素遍歷、運(yùn)算、判斷實(shí)現(xiàn)的表格過濾相關(guān)操作技巧,需要的朋友可以參考下2019-08-08