- property（属性）
- attribute（特性）
- property和attribute的同步
- id
- href
- value
- class/className
- 旧IE的趣事
- attribute作为DOM节点
- 总结
DOM节点可能会有attribute和property. 有时候人们会分不清，因为他们是有关联的，但它们又是完全不同的。
property
DOM是一个对象。因此它可以像普通对象一样存储自定义property及方法。
下例将会给 document.body 添加自定义对象 myData。
document.body.myData = {
name: ‘John‘
}
alert(document.body.myData.name) // John
document.body.sayHi = function() {
alert(this.nodeName)
}
document.body.sayHi() // BODY
JavaScript中的自定义property和方法将不会影响到HTML。
自定义property也可以使用 for..in 进行遍历。
document.body.custom = 5
var list = []
for(var key in document.body) {
list.push(key)
}
alert(list.join(‘\n‘))
自定义DOM property:
- 可以拥有任何值。property名称有大小写之分。
- 不会影响到HTML。
attribute
DOM节点使用下列方法来访问HTML attribute。
elem.hasAttribute(name)- 检查该attribute是否存在elem.getAttribute(name)- 获取attribute的值elem.setAttribute(name, value)- 设定attribute的值elem.removeAttribute(name)- 移除某个attribute
在IE<8和IE兼容视图中，attribute有些不一致
- 只有getAttribute 和 setAttribute 存在。
- 他们实际上修改DOM property，而不是attribtue。
- 当IE<8时 attribute和property 合并成了一个。有时候它会导致奇怪的结果，但是在这里讨论的设置方式没有任何问题。
与property想法，attribute有以下特性：
- 只能为字符串
- 名字与大小写无关，因为HTML attribute是大小写无关的。
- 当调用innerHTML时会显示出来。
- 你可以通过调用 attributes 属性对它们进行遍历。
例如，让我们看看以下的例子：
<body>
<div about="Elephant" class="smiling"></div>
<script>
var div = document.body.children[0]
alert( div.getAttribute(‘ABOUT‘) ) // (1)
div.setAttribute(‘Test‘, 123) // (2)
alert( document.body.innerHTML ) // (3)
</script>
</body>
当你运行上面的代码时，将会注意到：
- getAttribute(‘ABOUT‘) 会使用大写字母，但没有关系。
- 当你指定一个字符串或其他的原始数据类型时，将会自动转换为string。对象将会自动转换，但IE在这里有些问题，所以避免这么使用。
- innerHTML 会包含新的 "test" attribute
property和attribute的同步
所有的DOM节点都有标准属性。
例如，让我们看看 ‘A‘ 标签：详细请查看
它有 "href" 和 "accessKey" 和其他的一些attribute。除此之外，它还会从 HTMLElement 继承 "id" 和其他的一些 attribute。
标准的DOM属性将会和attribute进行同步。
id
例如，浏览器将会同步 "id" attribute 和 "id" property。
<script> document.body.setAttribute(‘id‘,‘la-la-la‘) alert(document.body.id) // la-la-la </script>
href
无法保证相同的值。让我们举例说明 "href"
<a href="#"></a> <script> var a = document.body.children[0] a.href = ‘/‘ alert( ‘attribute:‘ + a.getAttribute(‘href‘) ) // ‘/‘ alert( ‘property:‘ + a.href ) // IE: ‘/‘, others: full URL </script>
那是因为，根据W3C规格，它必须为完整格式的链接。
还有一些attribute，它们会同步，但没有进行复制。例如 input.checked：
<input type="checkbox" checked> <script> var input = document.body.children[0] alert( input.checked ) // true alert( input.getAttribute(‘checked‘) ) // empty string </script>
input.checked 的property 要么true，或者false。但在attribute中它是所设置的字符串。
value
有些内置的属性只会单向同步。
例如，input.value 将被attribute同步：
<body>
<input type="text" value="markup">
<script>
var input = document.body.children[0]
input.setAttribute(‘value‘, ‘new‘)
alert( input.value ) // ‘new‘, input.value changed
</script>
</body>
但attribute不会被 property 同步
<body>
<input type="text" value="markup">
<script>
var input = document.body.children[0]
input.value = ‘new‘
alert(input.getAttribute(‘value‘)) // ‘markup‘, not changed!
</script>
</body>
当"value"属性更新后 attribute 还会保留原来的值，原来的值可以用来检测input是否被改变，或对它进行重置。
class/className
"class" attribute 对应 "className" property。
因为 "class"在JavaScript中是一个保留单词，"class" attribute对应的属性为className。
<body>
<script>
document.body.setAttribute(‘class‘, ‘big red bloom‘)
alert( document.body.className ) // ^^^
</script>
</body>
注意，上面的例子在IE<9时不正确，因为attribute和property混合在了一起。
我们可以很好地解决它，只需要当操作类的时候始终使用className而不是attribute。
- 将div赋值给一个变量
- 获取
"data-widgetName"attribute的值<body> <!-- hello world! don‘t remove me.--> <div data-widgetName="menu">Select the genre</div> <script>/* ... */</script> </body>
旧IE的趣事
首先当IE<9时所有的attribute和property会进行同步。
document.body.setAttribute(‘try-in-ie‘, 123) alert( document.body[‘try-in-ie‘] === 123 ) // true in IE<9
注意 类型也是一样的。当attribute没有变换为字符串。
其次，IE<8(或IE8兼容模式)property和attribute是一样的。这将会导致很多有趣的结果。
例如，property有大小写之分，但attribute不区分大小写。如果浏览器认为他们俩是一样的，下面的代码会导致什么结果呢？
document.body.abba = 1 // assign property (now can read it by getAttribute) document.body.ABBA = 5 // assign property with another case // must get a property named ‘ABba‘ in case-insensitive way. alert( document.body.getAttribute(‘ABba‘) ) // ??
浏览器会选择第一个值为默认值。它还会在getAttribute方法中提供仅限IE浏览器的第二个参数，它会辨别是否区分大小写。详细请看：MSDN getAttribute
除非IE<9 "class" attribute可以更改类。不要使用该attribute，要始终使用 className property。
为了与IE和睦相处，我们需要正确的使用attribute。
或，换句话说，尝试始终使用property，直到你确实需要使用attribute。
以下情况会让你真的需要attribute：
- 获取一个自定义HTML attribute，因为当使用DOM property时不会同步到HTML。
- 获取原始值，例如 INPUT value。
attribute作为DOM节点
attribute还可以通过 element.attributes 集合进行访问。
在attributes结合中，每个attribute 都有这些特性。它会有名字，值和其他的属性。
<span style="color:blue" id="my">text</span> <script> var span = document.body.children[0] alert( span.attributes[‘style‘].value ) // "color:blue;" alert( span.attributes[‘id‘].value ) // "my" </script>
顺便提一下，IE<8或IE兼容模式中 style attribute将会导致疯狂的结果。猜猜原因。
attribute DOM节点不是文档树的一部分，它们仅可以通过element元素进行访问。
总结
attribute和property都是DOM模型中的核心功能。
下面的表格表示关联点和不同点。
Property |
Attribute |
| 任意值 | 字符串 |
| 区分大小写 | 大小写无关 |
| 在innerHTML中不显示 | innerHTMl中显示 |
如果你想要在HTML中有自定义attribute，记住在HTML5中data-* attribute是有效地。查看HTML5标准中的自定义attribute
显示生活中，98%的DOM property将会被使用。
你应该只在下列两种情形中使用attribute。
- 获取一个自定义HTML attribute，因为当使用DOM property时不会同步到HTML。
- 获取原始值，例如 INPUT value。