Attribute和自定义Property

property（属性）
attribute（特性）
property和attribute的同步
总结

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>

  

  <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

注意类型也是一样的。当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。