DOM对象attribute和property的不同

2024年3月5日 200次阅读 来源: zning

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞