DOM對象attribute和property的不同

dongfangyiyu 發布于2019-08-01 14:51 / 3297人閱讀

摘要：但及以下輸出為空除了其他瀏覽器都會隨著的變化，而修改類名。為了保證兼容性，不要用用和都是模型的重要特征在實際應用中，場景使用，只有在如下兩個場景使用自定義的，因為使用時不會同步到需要獲取內置，并且不和同步的，并且你確定你需要這個的

property

DOM對象的property值通過點方式獲取

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

DOM對象是對象，所以它可以像其他JS對象一樣存儲自定義的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和方法只會在JS中顯示，不會影響HTML.

使用for...in可以遍歷出所有的標準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名區分大小寫

不會影響HTML

attribute

DOM節點提供如下方法來訪問html attributes

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

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

和property對比，attribute:

值只能為字符串

名稱不區分大小寫

會在html中呈現

可以用DOM的attributes propery列出所有的attribute

property和attribute的同步

每個dom節點對象都有標準的properties，同步的可能性有三種

標準dom property和attribute值保持一致

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

標準dom property的值不一定和attribute完全一致

測試

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

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

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

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

同步的propery和attribute名稱不一致
class/className
因為JS中class是保留字，所以對于class attribute，用className property來代替class property。

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

除了

Summary

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

在實際應用中，98%場景使用property，只有在如下兩個場景使用attribute：

自定義的html attribute，因為使用property時不會同步到HTML.

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

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

GPU云服務器云服務器 javascript的dom對象不同網站的主機和域名刪除dom對象 dom對象操作

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/49623.html

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

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

psychola 2019-08-21 14:26 評論0 收藏0
DOM元素的屬性（property）和特性（attribute）

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

tianyu 2019-08-01 15:42 評論0 收藏0
jQuery 的 attr 與 prop 的區別

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

kk_miles 2019-08-19 17:47 評論0 收藏0
詳解 HTML attribute 和 DOM property

摘要：在大多數的文章中，一般被翻譯為特性，被譯為屬性。但是，和并不總是一對一的關系。當修改特性時，屬性也會更新但是修改屬性后，特性卻還是原值。修改特性屬性也更新了修改屬性特性沒有更新非標準特性非標準特性并不會自動映射為屬性。在大多數的文章中，attribute 一般被翻譯為特性，property 被譯為屬性。結論把結論寫在最前面，如果你全都懂，后面就不用看了。 HTML attri...

shiyang6017 2019-08-02 15:21 評論0 收藏0