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.

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