property和attribute的区分

node.getAttribute('someAttribute')获取的是attribute,而node.someAttribute获取的是元素的property,二者并不相同。 参考 properties-and-attributes-in-html


  1. node.someAttributenode.getAttribute('someAttribute')大部分场景下是相同的

    • elem.id
    • elem.getAttribute(‘id’)
  2. node.someAttribute无法获取到节点上的自定义属性

    • node.getAttribute('someAttribute')获取到的始终是someAttribute的之后的字符串
    • 且获取到的属性忽略大小写
  3. 对于部分属性,使用setAttribute无法进行修改,但是可以通过给node.property赋值进行修改,如disabled, readOnly, checked

    • 上述attribute一旦出现在html标记中,则表示生效
      1
      2
      3
      4
      5
      <input disabled="false">
      <script>
      input.disabled; // true
      input.getAttribute('disabled'); // 'false'
      </script>
  4. 特殊的property/attribute

    • href 使用a.getAttribute获取到的是href后面的字符串,即html中的字符串;使用a.href获取到的则是实际的超链接地址
    • input input的value属性在修改时对应到property和attribute上,并不是双向绑定的

简单来说,我个人觉得attribute对应 HTML, property 对应 DOM