DOM对象attribute和property的不同

dongfangyiyu 发布于2019-08-01 14:51 / 3083人阅读

摘要：但及以下输出为空除了其他浏览器都会随着的变化，而修改类名。为了保证兼容性，不要用用和都是模型的重要特征在实际应用中，场景使用，只有在如下两个场景使用自定义的，因为使用时不会同步到需要获取内置，并且不和同步的，并且你确定你需要这个的

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

property和attribute的同步

每个dom节点对象都有标准的properties，同步的可能性有三种

标准dom property和attribute值保持一致

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

标准dom property的值不一定和attribute完全一致

测试

还有一些其他的attribute，同步的值却不相同，比如input.checked

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

有些内置property是单向同步的
比如，input.value同步value attribute值，但value attribute值不同步value property值.
并且，input框内用户改变输入值后，value property值会随着变化，value attribute值不变.

所以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及以下输出为空

除了

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

服务器托管云服务器 javascript的dom对象不同网站的主机和域名删除dom对象 dom对象操作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49623.html

DOM元素的属性（property）和特性（attribute）

摘要：属性和特性我们知道的实现就是把一个文档映射为一棵树，而树上的每个节点其实就是一个对象。从jQuery的prop()和attr()方法说开去 jQuery中有两个获取DOM元素属性的方法：prop()和attr()，看似可以互相替换，但若搞不清这两个方法获取的到底是什么属性，有时就会出现令人困惑的结果。官方文档中，用了下面的例子来解释这两者的不同：操作结果 elem.c...

psychola 2019-08-21 14:26 评论0 收藏0
DOM元素的属性（property）和特性（attribute）

摘要：属性和特性我们知道的实现就是把一个文档映射为一棵树，而树上的每个节点其实就是一个对象。从jQuery的prop()和attr()方法说开去 jQuery中有两个获取DOM元素属性的方法：prop()和attr()，看似可以互相替换，但若搞不清这两个方法获取的到底是什么属性，有时就会出现令人困惑的结果。官方文档中，用了下面的例子来解释这两者的不同：操作结果 elem.c...

tianyu 2019-08-01 15:42 评论0 收藏0
jQuery 的 attr 与 prop 的区别

摘要：先提出问题对于这类值是的属性，用的或方法进行读取或设置值是有区别的。因此，如果你想知道文本框的当前值，则读取。的值并不会随着的状态而作出相应改变，而会。为对象设置值的安全做法避免内存泄漏是使用。参考翻译地址的与的区别先提出问题：对于 checked 这类值是 true/false 的属性，用 jQuery 的 attr 或 prop 方法进行读取或设置值是有区别的。在看 jQue...

kk_miles 2019-08-19 17:47 评论0 收藏0
详解 HTML attribute 和 DOM property

摘要：在大多数的文章中，一般被翻译为特性，被译为属性。但是，和并不总是一对一的关系。当修改特性时，属性也会更新但是修改属性后，特性却还是原值。修改特性属性也更新了修改属性特性没有更新非标准特性非标准特性并不会自动映射为属性。在大多数的文章中，attribute 一般被翻译为特性，property 被译为属性。结论把结论写在最前面，如果你全都懂，后面就不用看了。 HTML attri...

shiyang6017 2019-08-02 15:21 评论0 收藏0