Attributes and custom properties

最新推荐文章于 2025-10-30 12:50:26 发布

转载最新推荐文章于 2025-10-30 12:50:26 发布 · 1.2k 阅读

HTML5 同时被 2 个专栏收录

13 篇文章

订阅专栏

JavaScript

5 篇文章

订阅专栏

本文探讨了DOM节点中的属性和自定义属性的区别与联系，包括它们的数据类型、同步机制及在不同浏览器版本中的表现差异。

Attributes and custom properties

本文转自：http://javascript.info/tutorial/attributes-and-custom-properties

Ilya Kantor

A DOM node may have attributes and properties. Sometimes people mess them up, because they are related, but they are really two different things.

Properties

DOM node is an object. So it can store custom properties and methods just like any JavaScript object.

The following example works by assigning an object to myData property ofdocument.body:

      
   01document.body.myData = { 
 
   02  name:  'John'
 
   03}
 
   04alert(document.body.myData.name) // John
 
   05 
 
   06document.body.sayHi = function() {
 
   07  alert(this.nodeName)
 
   08}
 
   09  
 
   10document.body.sayHi()  // BODY

Custom properties and methods are visible only in JavaScript and don’t affect HTML.

Also, custom properties show up in for..in mixed with native properties:

      
   1document.body.custom = 5
 
   2 
 
   3var list = []
 
   4for(varkey in document.body) {
 
   5  list.push(key)
 
   6}
 
   7 
 
   8alert(list.join('\n'))

Custom DOM properties:

May have any value.Property names case-sensitive
Don’t affect HTML

Attributes

DOM nodes provide access to HTML attributes using the following standard methods:

elem.hasAttribute(name) - checks if the attribute exists
elem.getAttribute(name) - gets an attribute value
elem.setAttribute(name, value) - sets an attribute
elem.removeAttribute(name) - removes an attribute

The attributes are broken in IE<8 and in IE8 compatible rendering mode:

Only getAttribute and setAttribute methods exist.
They actually modify DOM properties, not attributes.
Attributes and properties in IE<8 are merged. Sometimes that leads to weird results, but the ways to manage attributes which we discuss here work fine with that.

In contrast with properties, attributes:

May be only strings.
Names not case-sensitive, because HTML attributes are not case-sensitive
They show up in innerHTML (unless it’s older IE)
You can list all attributes using an array-like attributes property of the element.

For example, let’s see the following HTML:

 
   <body>
 
     <divabout="Elephant"class="smiling"></div>
 
   </body>

The example below sets attributes.

      
   01<body>
 
   02  <divabout="Elephant"class="smiling"></div>
 
   03 
 
   04  <script>
 
   05    vardiv = document.body.children[0]
 
   06    alert( div.getAttribute('ABOUT') )// (1)
 
   07     
 
   08    div.setAttribute('Test', 123)  // (2)
 
   09    alert( document.body.innerHTML )  // (3)
 
   10  </script>
 
   11</body>

When you run the code above, note the following:

An getAttribute('ABOUT') uses the name in upper case, but that doesn’t matter.
You can try assign a string or other primitive value, which will become a string. Object should be autoconverted, but IE has problems here, so stick to primitives.
The innerHTML contains the new "test" attribute.

Properties and attribytes synchronization

Every type of DOM nodes has standard properties.

For example, see the 'A' tag: Interface HTMLAnchorElement.

It has "href" and "accessKey" and other specific attributes. Besides, it inherits"id" and other attributes from HTMLElement.

Standard DOM properties are synchronized with attributes.

`id`

For example, the browser synchronizes "id" attribute with id property:

`1`	`<script>`

`2`	`document.body.setAttribute('id','la-la-la')`

`3`	`alert(document.body.id)// la-la-la`

`4`	`</script>`

`href`

The synchronization does not guarantee the same value. Let’s set the"href" attribute for example:

      
   1<ahref="#"></a>
 
   2<script>
 
   3  vara  = document.body.children[0]
 
   4 
 
   5  a.href ='/'
 
   6  alert('attribute:' + a.getAttribute('href') )// '/'
 
   7  alert('property:' + a.href )  // IE: '/', others: full URL
 
   8 
 
   9</script>

That’s because href, according to W3C specification must be a well-formed link.

There are other attributes, which are synced, but not copied. For example input.checked:

      
   1<inputtype="checkbox"checked>
 
   2 
 
   3<script>
 
   4  varinput  = document.body.children[0]
 
   5 
 
   6  alert( input.checked )// true
 
   7  alert( input.getAttribute('checked') )// empty string
 
   8</script>

The value of input.checked property is either true orfalse, but the attribute has whatever you put into it.

`value`

There are also built-in properties which are synced one-way only.

For example, the input.value is synchronized from the attribute:

      
   01<body>
 
   02  <inputtype="text"value="markup">
 
   03  <script>
 
   04    varinput = document.body.children[0]
 
   05 
 
   06    input.setAttribute('value','new')
 
   07 
 
   08    alert( input.value )// 'new', input.value changed
 
   09  </script>
 
   10</body>

But the attribute is not synchronized from the property:

      
   01<body>
 
   02  <inputtype="text"value="markup">
 
   03  <script>
 
   04    varinput = document.body.children[0]
 
   05 
 
   06    input.value ='new'
 
   07 
 
   08    alert(input.getAttribute('value'))// 'markup', not changed!
 
   09  </script>
 
   10</body>

The "value" attribute keeps the original value after the property was updated, for example when a visitor typed in something. The original value can be used to check if theinput is changed, or to reset it.

`class/className`

The naming exception: "class" attribute corresponds to className property.

Because "class" is a reserved word in JavaScript, the name of the corresponding property for the"class" attribute is className.

      
   1<body>
 
   2  <script>
 
   3    document.body.setAttribute('class','big red bloom')
 
   4 
 
   5    alert( document.body.className ) // ^^^
 
   6  </script>
 
   7</body>

Note, the example above doesn’t work in IE<9, because of the weird way attributes and properties are mixed up.

We can live fine with it, just always use className property to manage classes, not the attribute.

Assign the div to a variable.
Get the value of "data-widgetName" attribute.

The document:

 
      1<body>
 
      2 
 
      3  <!-- hello world! don't remove me.-->
 
      4 
 
      5  <divdata-widgetName="menu">Select the genre</div> 
 
      6 
 
      7  <script>/* ... */</script>
 
      8</body>

The source is at tutorial/browser/dom/custom_attribute.html.

Open solution

The fun with old IEs

First, IE<9 synchronizes all properties and attributes.:

`1`	`document.body.setAttribute('try-in-ie', 123)`

2

`3`	`alert( document.body['try-in-ie'] === 123 )` `// true in IE<9`

Note that the type is also same. The attribute did not become a string, as it should.

Second, in IE<8 (or IE8 in IE7-compat. mode) properties and attributes are same. That leads to funny consequences.

For example, properties names are case-sensitive, and attribute names are not. And if the browser thinks that they are same, then what should be the result of the following code?

      
   1document.body.abba = 1 // assign property (now can read it by getAttribute)
 
   2document.body.ABBA = 5 // assign property with another case
 
   3 
 
   4// must get a property named 'ABba' incase-insensitive way.
 
   5alert( document.body.getAttribute('ABba') )// ??

The browser escapes the trap by picking the first value by default. It also provides an optional second IE-only parameter forgetAttribute, which makes it case-sensitive. See MSDN getAttribute for details.

The "class" attribute changes class in all browsers except IE<9. Don’t use the attribute. UseclassName property all the time.

To live well with any IE, use attributes correctly.

Or, in other words, try using properties all the time, until you really need an attribute.

And the only times you really need an attribute are:

To get a custom HTML attribute, because it is not synced to DOM property.
To get an “original value” of the standard HTML attribute, like <INPUT value="...">.

Attributes as DOM nodes

Attributes are also accessible via elem.attributes collection.

In attributes collection, every attribute is represented by a special kind of DOM node. It has name, value and other properties.

For example:

      
   1<spanstyle="color:blue"id="my">text</span>
 
   2 
 
   3<script>
 
   4  varspan = document.body.children[0]
 
   5  alert( span.attributes['style'].value ) // "color:blue;"
 
   6  alert( span.attributes['id'].value ) // "my"
 
   7</script>

By the way, IE<8 and IE8 in compatibility mode go crazy about the "style" attribute. Guess why.

Attribute DOM nodes are not the part of the document tree, they are accessible from their elements only.

Summary

Both attributes and properties are core features in the DOM model.

The table of differences and relations:

Properties	Attributes
Any value	String
Names are case-sensitive	not case-sensitive
Don’t show up in `innerHTML`	Visible in `innerHTML`
Standard DOM properties and attributes are synchronized, custom are not.
Attributes are mixed with properties and screwed up in IE<8, IE8 compat. mode.

If you want to have custom attributes in HTML, remember that data-* attributes are valid in HTML5. SeeCustom data attributes section of HTML5 standard.

In real life, in 98% of cases DOM properties are used.

You should use attributes in only two cases:

A custom HTML attribute, because it is not synced to DOM property.
To access a built-in HTML attribute, which is not synced from the property, and you are sure you need the attribute.
For example, value in INPUT.