DOM之属性(attribute)和自定义对象属性(property)

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-04-13 11:49:35.0

DOM节点有一些属性和对象属性. 有时候我们会把他们搞混淆, 因为他们是相关联的, 但是他们真的是两个不同的东西.

特性

 DOM节点是一个对象. 因此它可以存储自定义的对象属性和方法,就像任何的Javascript对象.

 下面的例子是指定分配一个对象给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是可以见有效的. 不影响HTML.

同样, 自定义对象属性可以通过for..in来与原生对象属性混合输出.

代码名称

document.body.custom = 5


var list = []

for(var key in document.body) {

  list.push(key)

}


alert(list.join('\n'))

自定义DOM对象属性: 

  • 可以有任何值. 对象属性名称有大小写之分.

  • 不影响HTML


属性

DOM节点提供了下面的标准方法来访问HTML的标签属性.

  • elem.hasAttribute(name) - 检查属性是否存在

  • elem.getAttribute(name) - 获取属性的值

  • elem.setAttribute(name, value) - 设置一个属性

  • elem.removeAttribute(name) - 移除属性


在小于IE8和IE8兼容模式下,这些属性就表现得不一样:

  • 仅getAttribute 和 setAttribute 方法存在.

  • 他们实际上是修改DOM对象属性, 不是属性.

  • 属性和对象属性在IE<8是融合的. 有时候会导致不可预料的结果, 但是这种方式管理属性, 是比较好的一个处理方法.


对象属性和属性之间的对比:

  • 都是字符串.

  • 名称大小写表现得不一样. 因为HTML属性没有大小写之分.

  • 他们都可以使用innerTHML(除了老版本的IE之外)

  • 可以列出所有的属性数组.

 例如, 我们看看下面的HTML结构: 

代码名称

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


下面的例子设置一些属性.

代码名称

<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>

运行上面这段代码的时候, 有下面几点提示:

  1. getAttribute('ABOUT') 使用大写名称, 这是没关系的.

  2. 你可以试着分配一个字符串或者另外类型的原始值, 都会变成一个字符串. 对象会自动转换, 但是基于其他类型的值, IE会有一些问题,

  3. innerHTML会包含一个新的属性"test"


对象属性和属性同步化

 DOM节点的每一种类型有着标准的对象属性. 例如, 'A' 标签元素. 他有href和accessKey属性, 以及其他特定的属性. 除此之外, 他会继承"id"属性以及其他的HTMLElement的属性.

标准的DOM对象属性和属性是同步的.

id

 例如, 浏览器id属性和id对象属性是同步存在的: 

代码名称

<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>

 这是因为href的正确连接, 符合W3C规范

另外的属性, 他们是同步的, 但不是复制. 例如下面的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对象属性值在true和false之间, 但是属性则不会管这些.

value

同样创建对象属性与之同步, 只有一种方式.

下面例子中,input.value从属性设置中同步: 

代码名称

<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>

但是从对象属性中创建, 属性则同步不了: 

代码名称

<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在对象属性更新后, 属性的值还是原来的值. 例如当访问者输入一些内容的时候, 如果input被改变或者重新被设置,原始值可以用来做检查.


class/className

名称不一样: "class"属性与之对应的对象属性是"className"

 因为 "class" 是在javascript中是保留字, 所以则会选择另外的名称className来与class想匹配

代码名称

<body>

  <script>

    document.body.setAttribute('class', 'big red bloom')


    alert( document.body.className )  // ^^^

  </script>

</body>

 提示, 这个例子在IE<9下是不能正常运行的, 因为奇怪的方式属性和对象属性混合使用. 

 我们可以让它执行好, 但是仅使用className对象属性来管理class,不是attribute.


  1. 指定一个div到一个变量

  2. 获取data-widgetName的属性值

 文档

代码名称

<body>


  <!-- hello world! don't remove me.-->


  <div data-widgetName="menu">Select the genre</div>  


  <script>/* ... */</script>

</body>


有趣的老版本IE

首先,IE<9同步所有的对象属性和属性:

代码名称

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


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

类型也是一样的.属性没有变成一个字符串. 

 其次,在IE<8(或者IE8兼容IE7的模式)对象属性和属性一样.  会出现一些有趣的结果.

 例如, 对象属性名称是大小写区分的,而属性名称则不是. 如果浏览器认为他们是一样的, 那下面的代码结果会是什么样? 

代码名称

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') ) // ??

浏览器避开这些陷阱,则给他们设置一个默认值. 在IE中getAttribute方法提供了可选的第二个参数, 来决定是否大小写区分. 可以看看MSDN getAttribute的详细说明.

所有浏览器, 除了IE<9, "class"属性改变class, 不要使用attribute. 同时使用className属性


 兼容IE, 正确的使用属性.或者换句话说, 试着所有时候都使用对象属性, 除非你真的需要一个属性的时候. 

 需要属性的时候:

  1.  获取一个自定义的属性时, 因为DOM对象属性中没有同步这些属性.

  2.  获取标准的HTML属性的原始值,例如 <INPUT value="...">.


属性作为DOM节点

属性节点同样可以访问,通过elem.attributes集合. 

在attributes 集合中, 每一个属性通过一个特殊的DOM节点呈现. name, value和另外的对象属性.

例如:

代码名称

<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 和 IE8 兼容模式下, 关于 "style" 属性是表现得不一样. 猜猜是为什么?.

 属性DOM节点不是document数的一部分, 他们从他们的元素标签中访问.


总结

在DOM模式中,属性和对象属性都是核心的特点.

 下面表格中表现了他们的关系和不同:

PropertiesAttributes
任何值String
名称大小写区分不区分大小写
innerHTML中不会呈现innerHTML中可见
标准的DOM对象属性和属性是同步的, 自定义的不是.
属性和对象属性在IE<8或者IE8兼容模式下混合使用会导致一些不可预料的结果

 如果你想有自定义的属性, 可以通过HTML5中有效的data-*属性来完成. 不明白的可以看HTML5标准.

 在实际当中, 98%例子中, DOM对象属性被使用.

两种情况下使用属性:

  1. 自定义的HTML属性, 因为DOM对象属性不同步.

  2. 去访问一个创建在HTML属性中的, 没有同步的DOM对象, 且确保你需要这个属性. 比如 INPUT的value.

android项目没有android.jar这个依赖包的解决办法
|
DOM之Dom元素搜索