DOM對象attribute和property的不一樣

時間 2019-11-09

標籤 dom 對象 attribute property 不一樣欄目 HTML 简体版

原文原文鏈接

property

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

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

DOM對象是對象，因此它能夠像其餘JS對象同樣存儲自定義的propertyhtml

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.java

使用for...in能夠遍歷出全部的標準property和自定義properychrome

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名區分大小寫dom
不會影響HTML測試

attribute

DOM節點提供以下方法來訪問html attributescode

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

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

和property對比，attribute:對象

值只能爲字符串
名稱不區分大小寫
會在html中呈現
能夠用DOM的attributes propery列出全部的attribute

<body>
  <div about="Elephant" class="smiling"></div>

  <script>
    var div = document.body.children[0]
    console.log( div.getAttribute('ABOUT') ) // (1)
    
    div.setAttribute('Test', 123)   // (2)
    console.log( document.body.innerHTML )   // (3)
  </script>
</body>

property和attribute的同步

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

標準dom property和attribute值保持一致

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

標準dom property的值不必定和attribute徹底一致

<a id="test">測試</a>

<script>    
var a = document.getElementById('test');
a.href = '/';
console.log(a.getAttribute('href')); // '/'
console.log(a.href); // 完整連接，但ie7及如下'/' (若連接中有中文，ff和chrome下會轉義),這是由於w3c規定href property必須爲格式良好的連接
</script>

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

<input type='checkbox' id='check' checked='aa'/>
<script>
var input = document.getElementById('check');
console.log(input.checked); //true
console.log(input.getAttribute('checked')) //'aa'
</script>

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

有些內置property是單向同步的
好比，input.value同步value attribute值，但value attribute值不一樣步value property值.
而且，input框內用戶改變輸入值後，value property值會隨着變化，value attribute值不變.

<input type="text" id="text"/>
<script>
var input = document.getElementById('text');

input.setAttribute('value','hello');
console.log(input.value); //hello
console.log(input.getAttribute('value')); //hello

input.value = 'new';
console.log(input.value); //new
console.log(input.getAttribute('value')); //hello

input.setAttribute('value','other'); //此時再改變value attribute，value property再也不變化
console.log(input.value); //other
console.log(input.getAttribute('value')); //other
</script>

因此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及如下輸出爲空
```
除了<ie9,其餘瀏覽器都會隨着class attribute的變化，而修改類名。爲了保證兼容性，不要用class attribute,用className property.