zoukankan      html  css  js  c++  java

  • js中的property和attribute

    javascript中的property和attribute虽然都被翻译为“属性”，但是他们还是有区别的。

    前两天写网页时用到checkbox，就被property和attribute弄晕了好久。后来看了javascript tutorial中的解释就清楚了许多，周末有空，把原文的主要内容翻译一下。

    原帖链接在这里：http://javascript.info/tutorial/attributes-and-custom-properties

    一个dom节点可能包含有attributes和properties。它们有联系和区别，很多人经常混淆。

    Properties

    Dom节点是对象，因此可以存储自定义properties和methods。

    下面这个例子将一个对象myData赋值为document.body中的一个property

    document.body.myData = { 
  name: 'John'
}
alert(document.body.myData.name) // John

document.body.sayHi = function() { 
  alert(this.nodeName)
}
 
document.body.sayHi()  // BODY

    自定义的properties和methods只在javascript中可见，不影响html。

    另外，自定义的properties是可以在for..in中与原生properties一起被遍历的到的。

    document.body.custom = 5

var list = []
for(var key in document.body) {
  list.push(key)
}

alert(list.join('
'))

    总结一下自定义DOM properties：

    • 可能是任何类型的的值，Property名称是大小写敏感的；
    • 不影响html。

    Attributes

    DOM节点提供以下几个标准方法来访问HTML的attributes：

    • 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

    与properties对比，attributes有以下不同：

    • 只可以是string；
    • 名称大小写不敏感，因为HTML的attributes是大小写不敏感的；
    • 不在innerHTML中显示（老版本IE除外）；
    • 你可以通过使用元素的array-like attributes property来列举所有的attributes。

    例如下面的例子，设置了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>

    运行上述代码，要注意到：

    1. getAttribute('ABOUT')使用了大写，但是同样可以访问到小写的about属性；
    2. 可以尝试给attribute赋值一个string或者其它的原生类型，那么就会变成一个string，object类型会被自动转换，但这个转换在IE中存在问题，所以最好只用原生类型；
    3. 运行完后新的innerHTML会出现新的名为test的attribute

    Properties和Attributes的同步

    所有类型的DOM节点都有标准Properties。

    例如a标签：Interface HTMLAnchorElement

    它有href和accessKey等自有的attributes。另外也从HTMLElement中继承了如id等attributes。

    标准的DOM properties和attributes是同步的。

    id

    举个例子，浏览器会自动同步id这个attribute和propertie：

    <script>
  document.body.setAttribute('id','la-la-la')
  alert(document.body.id) // la-la-la
</script>

    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标准W3C specification，href必须是一个完整的链接。

    还有其它的一些attributes是同步但值不统一的，例如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

    此外，有一些内置的properties是值单向同步的。

    举例，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这个property更新之后，其attribute仍然为原本的值，比如一个访客在输入框中输入了一些东西。这个原本的值可以用来检查input框是否有改变，也可以用来重置框内的内容。

    class/className

    还有一个命名的例外，就是class这个attribute是和className这个property对应的。

    因为class是一个javascript保留字，那么class这个attribute对应的property是className。

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

    alert( document.body.className )  // 'big red bloom'
  </script>
</body>

    注意，这个例子在IE<9是不成立的，因为它们用一种奇怪的方式来组织attributes和properties。

    好的实践是，总是用className这个property来操作class，而不要用attribute。

     对于IE，要谨慎对待attributes。换句话说，除非你真的需要用到attributes，否则的话尽量用properties。而真正需要用到attributes的只有以下情况：

    1. 需要获取自定义的HTML attribute，因为自定义的attributes不和properties同步；
    2. 需要获取HTML attributes的原始值，就像<INPUT value="...">。

    Attributes作为DOM节点

    Attributes也可以通过elem.attributes集合来获取。

    在attributes集合中，每个attribute都作为一个特殊的DOM节点a special kind of DOM node，有name，value，和其它properties。

    例如：

    <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这个attribute的支持非常的奇怪。

    Attribute DOM节点不属于文档树的一部分，它们只可以由他们的元素来访问。

    总结

    attributes和properties都是DOM模型的核心特性。

    下表表示了他们的区别和联系：

    PropertiesAttributes
    任何类型的值 String
    大小写敏感 大小写不敏感
    不在innerHTML中可见 在innerHTML中可见
    标准的DOM properties和attributes是同步的，而自定义的不是
    attributes和properties在IE<8以及IE8兼容模式中是混杂的

    如果你向要自定义HTML中的attributes，那么请请记住HTML 5中的data-* attributes。可以查看这里Custom data attributes来获取HTML5中这部分内容。

    在实际中，98%的情况下用的的是properties。

    attributes只应被用于两种情况下：

    1. 需要获取自定义的HTML attribute，因为自定义的attributes不和properties同步；
    2. 需要获取内置HTML attributes，它不和properties同步，并且你确切的知道你确实需要用到attributes，例如input中的value。
  • 相关阅读:
    win7 64bit下使用PL/SQL Developer连接Oracle
    C#高级开发之 特性(Attribute)三
    K3单据表结构描述和相关关联SQL语句以及金蝶插件相关说明
    K3老单插件控制字段显示
    金蝶K3插件开发-控制单据焦点（BOS单据、工业单据）
    K3 单据，单据体自定义字段显示及时库存
    C#高级开发之反射(Reflection)二
    C#高级开发之泛型一
    python学习——协程
    python学习——线程
  • 原文地址：https://www.cnblogs.com/caiminfeng/p/4750834.html
Copyright © 2011-2022 走看看