国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

DOM對(duì)象attribute和property的不同

dongfangyiyu / 3287人閱讀

摘要：但及以下輸出為空除了其他瀏覽器都會(huì)隨著的變化，而修改類名。為了保證兼容性，不要用用和都是模型的重要特征在實(shí)際應(yīng)用中，場(chǎng)景使用，只有在如下兩個(gè)場(chǎng)景使用自定義的，因?yàn)槭褂脮r(shí)不會(huì)同步到需要獲取內(nèi)置，并且不和同步的，并且你確定你需要這個(gè)的

property

DOM對(duì)象的property值通過(guò)點(diǎn)方式獲取

document.body.className //獲取body的類名

DOM對(duì)象是對(duì)象，所以它可以像其他JS對(duì)象一樣存儲(chǔ)自定義的property

document.body.myData = {
    name : "John"
}
document.body.sayHi = function(){
    alert("hello world");
}

console.log(document.body.myData.name);
console.log(document.body.sayHi());

自定義的property和方法只會(huì)在JS中顯示，不會(huì)影響HTML.

使用for...in可以遍歷出所有的標(biāo)準(zhǔn)property和自定義propery

document.body.custom = 5;
var list = [];
for(var key in document.body){
    list.push([key, document.body[key]]);
}
console.log(list);

So,自定義的dom property：

可以有任意值，property名區(qū)分大小寫

不會(huì)影響HTML

attribute

DOM節(jié)點(diǎn)提供如下方法來(lái)訪問(wèn)html attributes

 ele.hasAttribute(name) //>=ie8
 ele.getAttribute(name)
 ele.setAttribute(name)
 ele.removeAttribute(name) //>=ie8

Note: IE8以下及ie8兼容模式下，setAttribute修改的是dom property，不是attribute

和property對(duì)比，attribute:

值只能為字符串

名稱不區(qū)分大小寫

會(huì)在html中呈現(xiàn)

可以用DOM的attributes propery列出所有的attribute
property和attribute的同步

每個(gè)dom節(jié)點(diǎn)對(duì)象都有標(biāo)準(zhǔn)的properties，同步的可能性有三種

標(biāo)準(zhǔn)dom property和attribute值保持一致

document.body.setAttribute("id","pageWrap")
console.log(document.body.id) // pageWrap

標(biāo)準(zhǔn)dom property的值不一定和attribute完全一致

測(cè)試

還有一些其他的attribute，同步的值卻不相同，比如input.checked

input.checked的property值只可能為true或false，但attribute值是獲取你填入的任意值

有些內(nèi)置property是單向同步的
比如，input.value同步value attribute值，但value attribute值不同步value property值.
并且，input框內(nèi)用戶改變輸入值后，value property值會(huì)隨著變化，value attribute值不變.

所以value attribute可以存儲(chǔ)輸入框的初始值,用于判斷輸入框值是否被改變

同步的propery和attribute名稱不一致
class/className
因?yàn)镴S中class是保留字，所以對(duì)于class attribute，用className property來(lái)代替class property。

document.body.setAttribute("class", "big red bloom");
console.log(document.body.className); //big red bloom, 但ie8及以下輸出為空

除了

Summary

attribute和property都是dom模型的重要特征.

在實(shí)際應(yīng)用中，98%場(chǎng)景使用property，只有在如下兩個(gè)場(chǎng)景使用attribute：

自定義的html attribute，因?yàn)槭褂胮roperty時(shí)不會(huì)同步到HTML.

需要獲取內(nèi)置html attribute，并且不和property同步的，并且你確定你需要這個(gè)attribute. eg.input的value attribute.

translate for http://javascript.info/tutorial/attributes-and-custom-properties

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/49623.html

相關(guān)文章

  • DOM元素的屬性（property）和特性（attribute）

    摘要：屬性和特性我們知道的實(shí)現(xiàn)就是把一個(gè)文檔映射為一棵樹，而樹上的每個(gè)節(jié)點(diǎn)其實(shí)就是一個(gè)對(duì)象。 從jQuery的prop()和attr()方法說(shuō)開去 jQuery中有兩個(gè)獲取DOM元素屬性的方法：prop()和attr()，看似可以互相替換，但若搞不清這兩個(gè)方法獲取的到底是什么屬性，有時(shí)就會(huì)出現(xiàn)令人困惑的結(jié)果。官方文檔中，用了下面的例子來(lái)解釋這兩者的不同： 操作 結(jié)果 elem.c...

    psychola 評(píng)論0 收藏0

  • DOM元素的屬性（property）和特性（attribute）

    摘要：屬性和特性我們知道的實(shí)現(xiàn)就是把一個(gè)文檔映射為一棵樹，而樹上的每個(gè)節(jié)點(diǎn)其實(shí)就是一個(gè)對(duì)象。 從jQuery的prop()和attr()方法說(shuō)開去 jQuery中有兩個(gè)獲取DOM元素屬性的方法：prop()和attr()，看似可以互相替換，但若搞不清這兩個(gè)方法獲取的到底是什么屬性，有時(shí)就會(huì)出現(xiàn)令人困惑的結(jié)果。官方文檔中，用了下面的例子來(lái)解釋這兩者的不同： 操作 結(jié)果 elem.c...

    tianyu 評(píng)論0 收藏0

  • jQuery 的 attr 與 prop 的區(qū)別

    摘要：先提出問(wèn)題對(duì)于這類值是的屬性，用的或方法進(jìn)行讀取或設(shè)置值是有區(qū)別的。因此，如果你想知道文本框的當(dāng)前值，則讀取。的值并不會(huì)隨著的狀態(tài)而作出相應(yīng)改變，而會(huì)。為對(duì)象設(shè)置值的安全做法避免內(nèi)存泄漏是使用。參考翻譯地址的與的區(qū)別 先提出問(wèn)題：對(duì)于 checked 這類值是 true/false 的屬性，用 jQuery 的 attr 或 prop 方法進(jìn)行 讀取或設(shè)置值是有區(qū)別的。 在看 jQue...

    kk_miles 評(píng)論0 收藏0

  • 詳解 HTML attribute 和 DOM property

    摘要：在大多數(shù)的文章中，一般被翻譯為特性，被譯為屬性。但是，和并不總是一對(duì)一的關(guān)系。當(dāng)修改特性時(shí)，屬性也會(huì)更新但是修改屬性后，特性卻還是原值。修改特性屬性也更新了修改屬性特性沒(méi)有更新非標(biāo)準(zhǔn)特性非標(biāo)準(zhǔn)特性并不會(huì)自動(dòng)映射為屬性。 在大多數(shù)的文章中，attribute 一般被翻譯為特性，property 被譯為屬性。 結(jié)論 把結(jié)論寫在最前面，如果你全都懂，后面就不用看了。 HTML attri...

    shiyang6017 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<