property和attribute的汉语翻译几乎相同,都有“属性”的意义(这里姑且称attribute为“特性”,以方便区分),而他们的取值也经常相同,但有时又会踩坑,发现二者会不相等,不同步。
0.奇葩的IE
本 文开始之前不得不提一下万恶之源IE,在IE<9中,浏览器会把所有的property和attribute强制映射,即property = attribute. (class特殊:className = class)。正因为IE<9中的这种映射误导了很多人以为二者完全相同。
1. Property
每 个DOM节点都是一个object对象,它可以像其他的js Object一样具有自己的property和method,所以property的值可以是任何数据类型,大小写敏感,原则上property应该仅供 js操作,不会出现在html中(默认属性除外:id/src/href/className/dir/title/lang等),和其他js object一样,自定义的property也会出现在object的for…in遍历中。
eg. var list=[]; for(var key in document.body) { list.push(key) } console.log(list.join('\n'));
2. Attribute
attribute出现 在dom中,js提供了getAttribute/setAttribute等方法来获取和改变它的值,attribute 的值只能是字符串且大小写不敏感,最后作用于html中,可以影响innerHTML获取的值。可以通过访问dom节点的attributes属性来获取 改节点的所有的attribute。(在IE<9中,attribute获取和改变的实际上是property。)
3.自定义的Property与Attribute不同步,不相等
html: <input type='text' id='test' value /> js: var test = document.getElementById('test'); test.self = 'selfProperty'; console.log(test.self) => 'selfProperty' test.getAttribute('self') => null conclusion:自定义的property与自定义的attribute无同步关系
4.非自定义的DOM property与 attributes 是有条件同步的
非 自定义的属性(id/src/href/name/value等),通过setAttribute修改其特性值可以同步作用到property 上,而通过.property修改属性值有的(value)时候不会同步到attribute上,即不会反应到html上(除以下几种情况,非自定义属性 在二者之间是同步的)。
- 非自定义属性(id/src/href/name/value等)未显式定义在dom中才会时,初始的property与attribute不同
html: <input type='text' id=“testvalue” /> 初始值property: testvalue.value => “" 初始值attribute: testvalue.getAttribute('value’) => null
- input:value/checked的单向同步关系
通过setAttribute改变input的value/checked都会同步到property中,但是,一旦改变他们的property值,就打破同步机制html: <input type='text' id=“testvalue” value='sync' /> property: testvalue.value => 'sync' attribute: testvalue.getAttribute('value’) => 'sync' testvalue.setAttribute('value','abc') => 'abc' 则属性会同步: testvalue.value => 'abc' testvalue.value = 'ddd'; 则同步机制失效: testvalue.getAttribute('value’) => 'abc'
- 同步不是复制,同步机制依旧,值不同(src/href)
通过getAttribute获取的是href/src的实际值,而点号(property)获取的是完整的url。html: a(id="testHr" href="/test/") property: testHr.href="/blog/" => 'http://f2e.souche.com/blog/' attribute: testHr.getAttribute('href’) => '/blog/'
- 非直接映射的同步,虽然同步了,但是同步后的属性名字不同,或者取值方式不同:class/data-XX/style
class映射成className
data-XXX映射到 dataset.XXX,通过JQuery的attr,prop访问时候不同步。
style属性不接受字符串型赋值,只能通过style.XXXhtml: <input type='text' class="abc" data-id="123" id=“testvalue” value='sync' /> testvalue.getAttribute('class') <=>testvalue.className testvalue.setAttribute('style','color:red') <=> testvalue.style.color testvalue.getAttribute('data-id')<=> testvalue.dataset.id
小结
property与attribute都是dom的核心功能,鉴于有的属性上会出现单项同步的情况似乎attribute貌似更保险一点,以下是二者的关系表:
原文:http://web.jobbole.com/83388/
相关推荐
- `value`属性在输入框`<input>`中是单向同步的,`property`的修改会同步到`attribute`,但`attribute`的修改不会影响`property`。 - `style`和`onclick`等处理程序,`getAttribute()`返回字符串,而点号访问的是...
property 是 dom 元素在 js 中作为对象拥有的属性。 从定义上可以看出: 对于 html 的标准属性来说,attribute 和 property 是同步的,是会自动更新的 但是对于自定义的属性来说,他们是不同步的.(自定义属性不会...
attribute翻译成中文术语为“特性”,property翻译成中文术语为“属性”,从中文的字面意思来看,确实是有点区别了,先来说说attribute。attribute是一个特性节点,每个DOM元素都有一个对应的attributes属性来存放...
在JavaScript中,通过点号设置的属性是对象的property,而`setAttribute`方法设置的是DOM元素的attribute。对于标准属性,如`title`,两者是一致的,但自定义属性则不然。这种差异归根结底是因为property和attribute...
前言使用JavaScript操作DOM元素时往往涉及到两个概念:attribute 和 property。document.getElementById('te
String name = property.attributeValue("name"); String value = property.getTextTrim(); System.out.println("Name: " + name + ", Value: " + value); } } catch (DocumentException e) { e....
在JavaScript中,DOM操作主要包括以下几方面: 1. **获取元素**:可以使用`document.getElementById()`、`document.querySelector()`或`document.querySelectorAll()`来获取单一元素或一组元素。例如,`document....
property属性是DOM对象直接提供的标准属性,而attribute属性则是元素在HTML标签中定义的属性。通常,当对HTML属性进行读取或写入操作时,JavaScript会同时更新DOM的property和attribute,但这两种方式在某些情况下会...
- **定义**: DOM 是一种与平台和语言无关的标准接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 - **作用**: 在网页开发中,通过 DOM 可以实现对 HTML 或 XML 文档的动态操作,从而增强网页的交互...
attribute是指DOM节点的属性,会在DOM结构中展现出来的,而property是指DOM节点对象的属性,不会渲染出来的。我们可以使用setAttribute()和getAttribute()方法来操作attribute,而prop()方法则用于操作property。 3...
HTML DOM(文档对象模型)是Web开发中的一个关键概念,它提供了一种结构化的方式来表示HTML或XML文档,并允许编程语言如JavaScript与这些文档进行交互。DOM将文档视为一棵由节点组成的树,其中每个节点代表文档的一...
本文将深入探讨XML、Excel、TXT和Property文件的解析方法,并重点介绍使用Dom4j和JDOM等技术进行XML解析。 首先,XML(eXtensible Markup Language)是一种用于标记数据的语言,广泛用于数据交换和配置文件。它的...
JavaScript DOM 和 BOM JavaScript 的 DOM(Document Object Model)和 BOM(Browser Object Model)是两种不同的对象模型,它们都是 JavaScript 语言的核心组件。DOM 是一种编程接口,用于访问和操作 HTML 文档中...
在IT领域,特别是软件开发与数据处理中,XML(可扩展标记语言)是一种广泛使用的标准格式,用于存储和传输数据。对于Java开发者而言,解析XML是处理数据流、配置文件和进行Web服务交互的重要技能之一。本文将深入...
在面试中,理解BOM和DOM的区别以及它们提供的API是基础,同时,对`property`和`attribute`的深入理解也是考察开发者对DOM掌握程度的关键。此外,熟悉如何利用这些API进行页面交互,如事件绑定、Ajax请求和本地存储等...
在jQuery中,可以使用`$('<element>')`来创建新的DOM元素。例如,要创建一个新的`<div>`元素,可以写作`$('<div>')`。 ## 复制元素 要复制一个DOM元素,可以使用`.clone()`方法。例如,如果你有一个元素`$('...
DOMJ4是Java中处理XML的一种API,全称为Java DOM API,它允许程序通过内存中的对象模型与XML文档进行交互。 首先,我们需要了解DOM(Document Object Model)的概念。DOM是一种将XML文档解析为一棵树形结构的API,...
遍历允许开发者通过 DOM 树中的上下文关系访问相关元素。 1. **添加元素(`add()`)** - **语法**:`$("selector").add("expr");` - **功能**:添加新的元素到当前集合。 - **示例**:`$("p").add(".highlight")...