欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中的property和attribute介紹

 更新時間:2011年12月26日 23:43:04   作者:  
JavaScript中的property和attribute介紹,需要的朋友可以參考下。
首先看看這兩個單詞的英文釋義(來自有道詞典)。先是property:
復(fù)制代碼 代碼如下:

property ['prɔpəti]

n. 性質(zhì),性能;財產(chǎn);所有權(quán)

英英釋義:

any area set aside for a particular purpose “the president was concerned about the property across from the White House”
同義詞:place
something owned; any tangible or intangible possession that is owned by someone “that hat is my property”; ” he is a man of property”
同義詞:belongings | holding | material possession
a basic or essential attribute shared by all members of a class
a construct whereby objects or individuals can be distinguished “self-confidence is not an endearing property”
同義詞:attribute | dimension
any movable articles or objects used on the set of a play or movie
同義詞:prop

重點看2、3、4條。
再看attribute:
復(fù)制代碼 代碼如下:

attribute [ə'tribju:t, 'ætribju:t]
n. 屬性;特質(zhì)
vt. 歸屬;把…歸于
英英釋義:
n.
a construct whereby objects or individuals can be distinguished
同義詞:property | dimension
an abstraction belonging to or characteristic of an entity
v.
attribute or credit to ”We attributed this quotation to Shakespeare”
同義詞:impute | ascribe | assign
decide as to where something belongs in a scheme
同義詞:assign

property,attribute都作“屬性”解,但是attribute更強調(diào)區(qū)別于其他事物的特質(zhì)/特性,而在這篇文章中也提交到attribute是property的子集。
而在JavaScript中,property和attribute更是有明顯的區(qū)別。眾所周知,setAttribute是為DOM節(jié)點設(shè)置/添加屬性的標(biāo)準(zhǔn)方法:
var ele = document.getElementById("my_ele"); ele.setAttribute("title","it's my element");但很多時候我們也這樣寫:
ele.title = "it's my element";如果不出什么意外,他們都運行的很好,它們似乎毫無區(qū)別?而且通常情況下我們還想獲取到我們設(shè)置的“屬性”,我們也很愛這樣寫:
alert(ele.title);這時候,你便會遇到問題,如果你所設(shè)置的屬性屬于DOM元素本身所具有的標(biāo)準(zhǔn)屬性,不管是通過ele.setAttribute還是ele.title的方式設(shè)置,都能正常獲取。但是如果設(shè)置的屬性不是標(biāo)準(zhǔn)屬性,而是自定義屬性呢?
ele.setAttribute('mytitle','test my title'); alert(ele.mytitle); //undefined alert(ele.getAttribute('mytitle')); //'test my title' ele.yourtitle = 'your test title'; alert(ele.getAttribute('yourtitle')); //null alert(ele.yourtitle); //'your test title'通過setAttribute設(shè)置的自定義屬性,只能通過標(biāo)準(zhǔn)的getAttribute方法來獲??;同樣通過點號方式設(shè)置的自定義屬性也無法通過 標(biāo)準(zhǔn)方法getAttribute來獲取。在對自定義屬性的處理方式上,DOM屬性的標(biāo)準(zhǔn)方法和點號方法不再具有任何關(guān)聯(lián)性(上訴代碼在IE6-有兼容性 問題,后面會繼續(xù)介紹)。
這種設(shè)置、獲取“屬性”的差異性,究其根源,其實也是property與attribute的差異性所致。
通過點號設(shè)置的“屬性”其實是設(shè)置的property,如上所說attribute是property的子集,那么點號設(shè)置的property自然無法通過只能獲取attribute的getAttribute方法來獲取。
property and attribute

property and attribute

照圖似乎更易理解,getAttribute無法獲取到不屬于attribute的property也是理所應(yīng)當(dāng)。但是這時候你會發(fā)現(xiàn)另外一個問題,通過setAttribute設(shè)置的屬性,同樣也應(yīng)該屬于property,那么為何無法通過點號獲取?

我們換種理解,只有標(biāo)準(zhǔn)屬性才可同時使用標(biāo)準(zhǔn)方法和點號方法,而對于自定義屬性,標(biāo)準(zhǔn)方法和點號方法互不干擾。

自定義屬性互不干擾

自定義屬性互不干擾

那么,在JavaScript中attribute并不是property的子集,property與attribute僅存在交集,即標(biāo)準(zhǔn)屬性,這樣疑問都可得到合理的解釋。

但在IE9-中,上訴結(jié)論并不成立。IE9-瀏覽器中,除了標(biāo)準(zhǔn)屬性,自定義屬性也是共享的,即標(biāo)準(zhǔn)方法和點號皆可讀寫。

成功設(shè)置的attribute都會體現(xiàn)在HTML上,通過outerHTML可以看到attribute都被添加到了相應(yīng)的tag上,所以如果 attribute不是字符串類型數(shù)據(jù)都會調(diào)用toString()方法進(jìn)行轉(zhuǎn)換。但是由于IE9-中,標(biāo)準(zhǔn)屬性與自定義屬性不做區(qū) 分,attribute依然可以是任意類型數(shù)據(jù),并不會調(diào)用toString()轉(zhuǎn)換,非字符串a(chǎn)ttribute不會體現(xiàn)在HTML上,但更為嚴(yán)重的問 題是,這樣很容易就會導(dǎo)致內(nèi)存泄漏。所以如果不是字符串類型的自定義屬性,建議使用成熟框架中的相關(guān)方法(如jQuery中的data方法)。

getAttribute與點號(.)的差異性
雖然getAttribute和點號方法都能獲取標(biāo)準(zhǔn)屬性,但是他們對于某些屬性,獲取到的值存在差異性,比如href,src,value等。

<a href="#" id="link">Test Link</a> <img src="img.png" id="image" /> <input type="text" value="enter text" id="ipt" /> <script> var $ = function(id){return document.getElementById(id);}; alert($('link').getAttribute('href'));//# alert($('link').href);//fullpath/file.html# alert($('image').getAttribute('src'))//img.png alert($('image').src)//fullpath/img.png alert($('ipt').getAttribute('value'))//enter text alert($('ipt').value)//enter text $('ipt').value = 5; alert($('ipt').getAttribute('value'))//enter text alert($('ipt').value)//5 </script>測試可發(fā)現(xiàn)getAttribute獲取的是元素屬性的字面量,而點號獲取的是計算值。

更多細(xì)節(jié)可查看這篇文章:Attributes and custom properties

相關(guān)文章

  • 一個用js實現(xiàn)的頁內(nèi)搜索代碼

    一個用js實現(xiàn)的頁內(nèi)搜索代碼

    一個用js實現(xiàn)的頁內(nèi)搜索代碼...
    2007-05-05
  • Bootstrap每天必學(xué)之按鈕(Button)插件

    Bootstrap每天必學(xué)之按鈕(Button)插件

    Bootstrap每天必學(xué)之按鈕(Button)插件,通過按鈕(Button)插件,您可以添加進(jìn)一些交互,比如控制按鈕狀態(tài),或者為其他組件(如工具欄)創(chuàng)建按鈕組,感興趣的小伙伴們可以參考一下
    2016-04-04
  • Javascript學(xué)習(xí)筆記-詳解in運算符

    Javascript學(xué)習(xí)筆記-詳解in運算符

    in運算符是javascript語言中比較特殊的一個,可以單獨使用作為判斷運算符,也常被用于for...in循環(huán)中遍歷對象屬性
    2011-09-09
  • 詳解前端安全之JavaScript防http劫持與XSS

    詳解前端安全之JavaScript防http劫持與XSS

    作為前端,一直以來都知道HTTP劫持與XSS跨站腳本、CSRF跨站請求偽造。防御這些劫持最好的方法是從后端入手,前端能做的太少。而且由于源碼的暴露,攻擊者很容易繞過防御手段。但這不代表我們?nèi)チ私膺@塊的相關(guān)知識是沒意義的,本文的許多方法,用在其他方面也是大有作用。
    2021-05-05
  • 寫js時遇到的一些小問題

    寫js時遇到的一些小問題

    寫js時遇到的一些小問題,需要的朋友可以參考下。
    2010-12-12
  • Firefox下設(shè)為主頁的JavaScript代碼

    Firefox下設(shè)為主頁的JavaScript代碼

    在IE下,我們可以輕松使用以下代碼來實現(xiàn)設(shè)置主頁 但在firefox我們需要做的更多
    2008-09-09
  • javascript 打印頁面代碼

    javascript 打印頁面代碼

    不用window.print實現(xiàn)的打印效果代碼。
    2009-03-03
  • php 中序列化和json使用介紹

    php 中序列化和json使用介紹

    序列化是將對象狀態(tài)轉(zhuǎn)換為可保持或可傳輸?shù)母袷降倪^程。與序列化相對的是反序列化,它將流轉(zhuǎn)換為對象。這兩個過程結(jié)合起來,可以輕松地存儲和傳輸數(shù)據(jù)
    2013-07-07
  • ECharts繪制立體柱狀圖(圓柱體)詳細(xì)示例

    ECharts繪制立體柱狀圖(圓柱體)詳細(xì)示例

    echarts實現(xiàn)平面的柱狀圖很順利,但是用戶為了美觀立體感,用到圓柱體圖,下面這篇文章主要給大家介紹了關(guān)于ECharts繪制立體柱狀圖(圓柱體)的相關(guān)資料,需要的朋友可以參考下
    2023-11-11
  • javascript使用smipleChart實現(xiàn)簡單圖表

    javascript使用smipleChart實現(xiàn)簡單圖表

    這篇文章主要介紹了javascript使用smipleChart實現(xiàn)簡單圖表的方法及示例分享,需要的朋友可以參考下
    2015-01-01

最新評論