<div></div> var test = document.getElementById("test"); console.log(test.tagName); // DIV console.log(test.nodeName); // DIV console.log(test.nodeValue); // null; console.log(test.parentNode); // body console.log(test.nodeType); // 1
理解HTML元素中的获取属性的方法
所有HTML元素都由HTMLElement类型表示，HTMLElement类型直接继承Element；如果想要取得HTML元素的特性的话，有下面几个方法：
getAttribute(); 获取元素的属性的方法；如下测试代码：
<div title="aa"></div> var test = document.getElementById("test"); console.log(test.getAttribute("id")); // test console.log(test.getAttribute("class")); // testName console.log(test.getAttribute("title")); // aa
注意：上面的获取类名在IE8+及标准浏览器下都是使用获取属性class来取得类名，上面的如果在IE7下会返回null, 但是在IE7及以下是使用className这个属性来获取的；如下代码：在IE7下测试：
console.log(test.getAttribute("className")); // testName
当然也可以取得自定义的属性；如下代码：
<div data-value="test1"></div>
console.log(test.getAttribute("data-value")); // test1
setAttribute() 设置元素的属性；该方法接收2个参数，第一个参数是属性名称，第二个参数是对应的值；如果该值存在，则会以现在的值替换之前的值，如果属性名不存在，则会创建该属性，并指定该属性的值；如下代码：
<div></div> // JS代码如下： var test = document.getElementById("test"); test.setAttribute("id",'test'); test.setAttribute("class","testName"); test.setAttribute("title","aa"); test.setAttribute("data-value","test1");
生成HTML结构如下：
<div title="aa" data-value="test1"></div>
removeAttribute(); 删除元素的特性；如下代码：
<div title="aa" data-value="test1"></div>
JS代码如下：
var test = document.getElementById("test"); test.removeAttribute("id"); test.removeAttribute("class"); test.removeAttribute("title"); test.removeAttribute("data-value");
IE7及以下删除类名需要使用className;
attributes属性
Element类型是使用attributes属性的唯一一个dom节点类型，attributes属性包含一个NamedNodeMap集合；该对象有以下方法：
getNamedItem(name): 返回nodeName属性等于name的节点；
attributes属性中包含一系列节点，每个节点的nodeName就是特性的名称，而节点的nodeValue就是节点值，要取得元素id的特性，如下代码：
<div title="aa" data-value="test1"></div>JS代码如下：
复制代码 代码如下:
var div = document.getElementById("test");
var id = div.attributes.getNamedItem("id").nodeValue;
console.log(id); // test
我们也可以通过中括号的语法来获取的，如下代码：
复制代码 代码如下:
var id = div.attributes['id'].nodeValue;
console.log(id); // test
同样我们也可以通过上面介绍的getAttribute(“id”)方法来获取元素，如下代码：
console.log(div.getAttribute("id")); // test
也可以通过以下方法给元素设置id，如下方法：
div.attributes["id"].nodeValue = "aa";
removeNamedItem(name): 从列表中移除nodeName属性等于name的节点;
调用removeNamedItem()方法与在元素上调用removeAttribute()方法的效果相同，是直接删除具有给定名称的特性。他们之间的区别是：removeNamedItem()方法返回表示被删除特性的节点；
如下代码：
<div title="aa" data-value="test1"></div>
JS代码如下：
复制代码 代码如下:
var div = document.getElementById("test");
var oldAttr = div.attributes.removeNamedItem("id");
console.log(oldAttr); // 返回是被删除的节点
现在的html结构变成如下：
<div title="aa" data-value="test1"></div>
如上方法：目前IE，firefox，chrome浏览器都支持；