当前位置

网站首页> 程序设计 > 开源项目 > 程序开发 > 浏览文章

DOM对象attribute和property的不同

作者:小梦 来源: 网络 时间: 2024-05-02 阅读:

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); //trueconsole.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); //helloconsole.log(input.getAttribute('value')); //helloinput.value = 'new';console.log(input.value); //newconsole.log(input.getAttribute('value')); //helloinput.setAttribute('value','other'); //此时再改变value attribute,value property不再变化console.log(input.value); //otherconsole.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

相关阅读