第十二章：第31节DOM——节点的修改（一）修改属性
更新于：2017-11-19 17:41:31
我们学会了访问一个元素节点对象，接下来就要对节点元素做操作。
<input type="text" name="user" value="tom" class="orange" id="username" />
<a href="https://www.phpnanshen.com" addr="beijing" target="_blank" id="php" class="php2" style="color:#000000;">PHP楠神</a>
上面两个HTML标记元素，如果对它做操作，应该做什么操作？无非就是给<input>、<a>标记增删查改属性。
在前面学习“延时器和定时器”时，我们就已做过类似的操作：给<input>标记更改value属性值；给<img>标记更改src属性值。我们是怎么操作的？直接把标记的属性当成元素节点对象的属性。用同样的方法获取上面两个标记的所有属性看是否能获取到：
结果显示，大部分属性的确可以当成节点对象的属性直接使用，个别则不可以。
前面有说过了“每一个标记的所有属性，与对应的‘元素对象’的属性一一对应”，可为什么会出现这样的情况？
这是因为只有w3c规定的属性才与对应的“元素对象”的属性一一对应，像“class”属性不可以（可用className替代），“addr”属性是用户自定义的属性就更不可以。（“style”返回的是style对象）
虽然W3C规定的属性可以满足我们正常的需求，可有时候我们就要给标记加一个自定义的属性，那用JS怎么去获取、修改、删除这个属性呢？
可使用节点的这三个方法：
setAttribute(name,value)
功能：给某个节点增加属性
语法：nodeObj.setAttribute(name,value)
参数：name是属性名称，value是属性的值
举例：nodeTd.setAttribute(“style” , “color:#FF0000”);
getAttribute(name)
功能：读取节点的属性的值
语法：nodeObj.getAttribute(name)
举例：var str = nodeTd.getAttribute(“style”);
removeAttribute(name)
功能：移除节点的属性
语法：nodeObj.removeAttribute(name)
举例：nodeTd.removeAttribute(“style”);
使用起来非常简单，这里就不做演示了。
总结：
① 获取属性值
itnode.属性名称; //只能操作w3c规定的属性
itnode.getAttribute(属性名称); //规定的 和 自定义的都可以获取
② 设置属性值
itnode.属性名称 = 值; //只能操作w3c规定的属性
itnode.setAttribute(名称，值); //规定的 和 自定义的都可以设置