DOM之属性相关

元素属性概述

• 一切从属性获取的值和设置到属性上的值必须都是字符串，所以都要先类型转换，再计算

获取元素的属性值

• 方法1
  
  • 方法
    
    • var strValue = elem.getAttribute(“属性名”);
  • 何时使用：只找一个属性时
• 方法2：elem.attributes集合 —— 包含了当前元素所有属性的节点对象
  
  • 方法
    
    • elem.attributes[i/”属性名”] ——> 返回一个属性节点
    • elem.attributes[i/”属性名”].value —— 属性值
  • 何时使用：遍历一个元素的所有属性时
• 方法3
  
  • 方法：
    
    • elem.getAttributeNode(“属性名”) —— 返回一个属性节点
    • elem.getAttributeNode(“属性名”).value —— 返回属性值

修改元素的属性值

• elem.setAttribute(“属性名”,”属性值”)
  
  • 何时使用：只设置一个属性值时
• elem.setAttributeNode(属性节点对象)

移除元素的属性

• elem.removeAttribute(“属性名”)
• elem.removeAttributeNode(属性节点)

判断是否包含指定属性

• elem.hasAttribute(“属性名”)

Property vs Attribute

• Property：内存中对象的属性，通常通过 . 来访问
• Attribute：指出现在页面html代码中的属性
• 标准属性：Property等效于Attribute，操作标准属性时应尽量使用HTML DOM
• H5自定义属性：只能用setAttribute
• H5规定：凡是自定义属性都要加data-前缀
  
  • 获取自定义属性值：a.dataset.属性名
  • 设置自定义属性值：a.dataset.属性名 = 属性值