html：
<h1>找对象</h1>
<div id="div1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
<div class="div2"></div>
<input type="text" name="username" value="uname">
js：
① Id
console.log(document.getElementById("div1"));
输出：
<div id="div1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
类型是 [object HTMLDivElement]
② TagName
console.log(document.getElementsByTagName("p"));
console.log(document.getElementsByTagName("p").length);
console.log(document.getElementsByTagName("h1"));
输出：
[p, p, p, item: function, namedItem: function]
0: p
1: p
2: p
length: 3
__proto__: HTMLCollection
类型是 [object HTMLCollection] 对象集合
3
[h1, item: function, namedItem: function]
0: h1
length: 1
__proto__: HTMLCollection
操作集合中的某个元素：
var ps = document.getElementsByTagName("p");
ps[1].style.background = 'blue';
③ 表单元素 Name
console.log(document.getElementsByName("username"));
输出：
[input, item: function]
0: input
length: 1
__proto__: NodeList
类型 [object NodeList] 节点列表
读取其中一个表单元素的 value
var username = document.getElementsByName("username");
console.log(username[0].value);
输出：
uname
操作其中一个表单元素的 value
username[0].value = 'dee';
或者直接
document.getElementsByName("username")[0].value = "dee";
④ ClassName (ie6/ie7/ie8 的 document 对象是没有 getElementByClassName 这个属性的)
console.log(document.getElementsByClassName("div2"));
输出：
[div.div2, item: function, namedItem: function]
0: div.div2
length: 1
__proto__: HTMLCollection
类型 [object HTMLCollection]
⑤ 找子对象 / 父对象 children / parent（可在 W3C 手册中查找）
console.log(document.getElementById("div1").childNodes);
输出：
[text, p, text, p, text, p, text, item: function]
0: text
1: p
2: text
3: p
4: text
5: p
6: text
length: 7
__proto__: NodeList
在 DOM 中，一个注释、一个换行、一个空格都看成是一个节点
另外，除了 childNodes 外，children 也可以用来表示子节点（并不是 W3C 的规范，但是各个浏览器都支持），使用 children 属性时，例如上例遍历 #div1 的子节点时，会自动过滤例如换行、空白等 空白节点
console.log(document.getElementById("div1").children);
输出：
[p, p, p, item: function, namedItem: function]
0: p
1: p
2: p
length: 3
__proto__: HTMLCollection
父节点
console.log(document.getElementsByTagName("p")[0].parentNode);
输出：
<div id="div1">
<p>p1</p>
<p style="background: blue;">p2</p>
<p>p3</p>
</div>
也可以操作父节点的属性
document.getElementsByTagName("p")[0].parentNode.style.border = '1px solid #eee')