DOM对象attribute和property的不同

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

<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,同步的可能性有三种

  1. 标准dom property和attribute值保持一致

    document.body.setAttribute('id','pageWrap')
    console.log(document.body.id) // pageWrap
  2. 标准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值是获取你填入的任意值

  3. 有些内置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可以存储输入框的初始值,用于判断输入框值是否被改变

  4. 同步的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:

  1. 自定义的html attribute,因为使用property时不会同步到HTML.

  2. 需要获取内置html attribute,并且不和property同步的,并且你确定你需要这个attribute. eg.input的value attribute.

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

    原文作者:zning
    原文地址: https://segmentfault.com/a/1190000003727646
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞