基本概念
HTML元素的属性。
Attr类型的基本属性
nodeType的值为11
nodeName的值是属性的名称
nodeValue的值是属性的值
parentNode的值为null
*Attr类型没有子节点。nodeName、nodeValue也可以使用name、value属性替代。
Attr类型的常用属性
1、下列这些属性都可以用来取得或修改相应的属性值。
element.id：元素在文档中的唯一标识符。
element.title：有关元素的附加说明信息，一般通过工具提示条显示出来。
element.className：与元素的class特性对应，即为元素指定的CSS类。
2、element.attributes属性
该属性返回一个由元素属性节点组成的NamedNodeMap（无顺序的节点列表）对象，与NodeList类似，也是一个“动态”的集合。
可以使用方括号语法或item()方法来访问NamedNodeMap对象中的项。而这个对象中元素的数量则可以通过其length属性取得。
例子：
<input id="txt" type="text" value="hello" name="txt">
var input = document.getElementsByTagName('input')[0],
attrs = input.attributes,
input_list = [];
for (var i = 0, len = attrs.length; i < len; i++) {
var _obj = {};
_obj[attrs[i].name] = attrs[i].value;
input_list.push(_obj);
}
console.log(input_list);
//输出：[{id: "txt"},{type: "text"},{value: "hello"},{name: "txt"}]
//也可以像下面这样使用
console.log(attrs["id"].value); //输出：txt
console.log(attrs["type"].nodeValue); //输出：text
Attr类型的样式属性
element.style对象常见用法
该对象包含element通过style属性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。
通过style对象可以取得和修改在style属性中指定的样式。
例子：
<div style="width:100px; height:50px; background-color:red"></div>
var myDiv = document.getElementsByTagName('div')[0]
console.log(myDiv.style.backgroundColor); //输出：red
console.log(myDiv.style.width); //输出：100px
console.log(myDiv.style.height); //输出：50px
//也可以直接设置样式
myDiv.style.backgroundColor = "#ccc";
*对于使用短划线的CSS属性名（例如background-image），必须将其转换成驼峰大小写形式，才能通过JavaScript来访问。
*对于访问float属性，在Firefox、Safari、Opera和Chrome都支持cssFloat属性，而IE支持的则是styleFloat。
element.style对象的其他用法
cssText属性：
该属性可以访问元素style属性中的CSS代码。
在读取模式下，cssText返回style属性中的CSS代码。
在写入模式下，赋给cssText的值会重写整个style属性的值，以前通过style属性指定的样式信息都将丢失。
例子：
<div style="width:100px; height:50px; background-color:red"></div>
var myDiv=document.getElementsByTagName('div')[0]
myDiv.style.cssText="width:50px; height:100px; background-color:blue"
length属性：
length属性与item()方法或方括号语法配套使用，以便迭代在元素中定义的CSS属性。
例子：
<div style="width:100px; height:50px; background-color:red"></div>
var myDiv = document.getElementsByTagName('div')[0]
var styles = myDiv.style
for (var i = 0, len = styles.length; i < len; i++) {
console.log(styles[i]);
}
//输出：width height background-color
getPropertyValue()方法： 该方法用于取得CSS属性值的字符串表示。
removeProperty()方法：从元素的样式中移除某个CSS属性。
例子：
<div style="width:100px; height:50px; background-color:red"></div>
var myDiv = document.getElementsByTagName('div')[0]
console.log(myDiv.style.getPropertyValue("width"));
//输出：100px
myDiv.style.removeProperty("background-color");
console.log(myDiv.style.getPropertyValue("background-color"));
//输出：""
Attr类型的常用方法
element.getAttribute()：取得属性。
例子：
<input id="txt" type="text" data-time="2018">
var input = document.getElementsByTagName('input')[0]
console.log(input.getAttribute("id")); //输出：txt
//该方法可以取得自定义属性
console.log(input.getAttribute("data-time")); //输出：2018
*getAttribute()方法访问style特性或onclick这样的事件处理特性时，在不同浏览器中返回的值与属性的值差异很大，开发人员经常不使用getAttribute()，而是只使用对象的属性。只有在取得自定义特性值的情况下，才会使用getAttribute()方法。
element.setAttribute()：设置属性。这个方法接受两个参数：要设置的属性名和值。
例子：
<input id="txt" type="text" data-time="2018">
var input = document.getElementsByTagName('input')[0]
input.setAttribute("class", "myClass");
input.setAttribute("data-time", "2017");
console.log(input.getAttribute("class")); //输出：myClass
console.log(input.getAttribute("data-time")) //输出：2017
*在IE7及以前版本中，通过这个方法设置class、style和事件处理程序属性时，没有任何效果。
element.removeAttribute()：彻底删除元素的属性。
例子：
<input id="txt" type="text" data-time="2018">
var input = document.getElementsByTagName('input')[0]
input.removeAttribute("class");
console.log(input.getAttribute("class")); //输出：null
element.hasAttribute()： 返回一个布尔值，指示该元素是否包含有指定的属性。
例子：
<input id="txt" type="text" data-time="2018">
var input = document.getElementsByTagName('input')[0]
console.log(input.hasAttribute("id")); //输出：true
console.log(input.hasAttribute("class")); //输出：false
文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。
随时随地看视频
