标签：
HTML DOM(Document Object Model)就是HTML文档对象模型。大致就是用来描述HTML文档的结构，下面的图来自w3cschool。
粗略地理解一下，就是文档的HTML元素是根节点，如果<head><title></title></head>那title就是head的子元素。
1. 先了解一下如何得到元素对象。
getElementById() —— 通过ID来获取元素
getElementsByTagName() —— 通过Tag来获取元素
getElementsByClassName() —— 通过Class来获取元素
做个测试：
<html>
<head>
<title>Testing Page</title>
</head>
<body>
This is a page for testing!
<p id="p1">This is a paragraph.</p>
</body>
</html>
先试了id，效果良好。
document.getElementById("p1").style.color = "red";
但是这个得到的元素到底是个什么东西呢？
console.log(typeof(p));
for (var i in p) { console.log(i+‘:‘+p[i]); }
得到如下结果，得到的元素是个Object，成员都是<p>的各项属性。
2. 元素节点和文档节点、属性节点间的关系
<div id="p1" style="color: red">
This is a paragraph.
<p>This is a inner paragraph.</p>
This is a second paragraph.
</div>
使用e.childNodes可以获取子节点的列表
可以看出有三个子元素，两个文本节点一个元素节点。
可以用e.getAttributeNode(属性名）来获得对应属性的Attr对象。
3. 每个元素的各项属性
innerHTML
nodeName
nodeValue
标签：
原文地址：http://www.cnblogs.com/goutou1994/p/5632336.html
