目录：
1、元素节点
2、文本节点
3、属性节点
4、获取元素
以下面的代码与节点树为例来理解节点：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>ToDo list</title> 6 </head> 7 <body> 8 <h1>待办清单</h1> 9 <p title="reminder">记得要做：</p> 10 <ul id="todo"> 11 <li>买菜</li> 12 <li>做饭</li> 13 <li>拖地</li> 14 </ul> 15 </body> 16 </html>
上面的节点树有<head>、<body>、<li>等元素。根元素是<html>。标签的名字就是元素的名字，比如文档段落元素的名字是"p"。
文本节点总是被包含在元素节点内部。比如说 <p>元素包含着文本 “记得要做：”。<ul>元素没有包含文本节点，它包含元素节点。
属性节点总是被包含在元素节点中。例如，几乎每个元素都有一个 title 属性。
例如：<p title="reminder">记得要做：</p>
获取元素节点的 3 种 DOM 方法：① 通过元素 ID 获取 ( getElementById )
② 通过标签名字获取( getElementsByTagName )
③ 通过类名字获取
1. getElementById
这个方法返回一个与那个有着给定 id 属性值的元素节点对应的对象。
下面示例返回 id 为 todo 的元素节点对应的对象，代码：
下面举个例子，实现：① 获取文档里 id 属性为 todo 的元素。输出它。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>ToDo list</title> 6 </head> 7 <body> 8 <div> 9 <h1>待办清单</h1> 10 <p title="reminder">记得要做：</p> 11 <ul id="todo"> 12 <li>买菜</li> 13 <li>做饭</li> 14 <li>拖地</li> 15 </ul> 16 <script> 17 console.log(document.getElementById("todo")); 18 </script> 19 </div> 20 </body> 21 </html>
控制台输出：
展开看看：
2. getElementsByTagName
参数是标签的名字。
返回一个对象数组。
每个对象分别对应着文档里有着给定标签的一个元素。
可以通过 length 属性查出数组的元素个数。
下面举个例子，实现：① 输出文档里元素节点总数
② 输出文档里元素节点 li 的个数
③ 获取文档里的元素节点 li，输出返回的数组里的每一个元素的文本节点与元素的类型
④ 组合使用 getElementsById 跟 getElementsByTagName，获取 id 属性为 todo 的元素包含着多少个列表项
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>ToDo list</title> 6 </head> 7 <body> 8 <div> 9 <h1>待办清单</h1> 10 <p title="reminder">记得要做：</p> 11 <ul> 12 <li>买菜</li> 13 <li>做饭</li> 14 <li>拖地</li> 15 </ul> 16 <ul id="todo"> 17 <li>吃饭</li> 18 <li>睡觉</li> 19 </ul> 20 <script> 21 //1. 利用通配符 * 输出文档里元素节点总数。 22 console.log('文档元素节点总数：'+document.getElementsByTagName("*").length); 23 24 //2. 输出文档里元素节点 li 的个数 25 console.log('元素 li 的个数：'+document.getElementsByTagName("li").length); 26 27 //3. 输出返回的数组中的每一个元素的文本节点与该元素的类型。（每个元素都是对象） 28 var item = document.getElementsByTagName("li"); //因为反复敲入document.getElementsByTagName("li")麻烦，所以将它赋给 item 29 for(let i=0; i<item.length; i++){ 30 console.log(item[i].innerHTML, typeof item[i]); 31 } 32 33 //4. 组合使用 getElementsById 跟 getElementsByTagName，获取 id 属性为 todo 的元素 li 的文本节点 34 var todoList = document.getElementById("todo"); 35 var items = todoList.getElementsByTagName("li"); 36 console.log('id 属性为 todo 的元素 li 的文本节点:'); 37 for(let i=0; i<items.length; i++){ 38 console.log(item[i].innerHTML); 39 } 40 </script> 41 </div> 42 </body> 43 </html>
控制台输出：
3. getElementsByClassName
参数为类名。
返回值为一个具有相同类名的元素的数组。
下面举个例子，实现：① 获取文档里类名为 sty1 的元素，输出返回的数组里的每一个元素的开始与结束标签之间的HTML与元素的类型
② 获取文档里带有多个类名的，类名为 sty1、box1 的元素，输出返回的数组里的每一个元素的开始与结束标签之间的HTML
③ 组合使用 getElementsById 跟 getElementsByClassName，获取 id 属性为 todo 且 class 属性为 sty1 的元素，输出返回的数组里的每一个元素的开始与结束标签之间的HTML
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>ToDo list</title> 6 </head> 7 <body> 8 <div class="box1"> 9 <h1 class="sty1 box1">待办清单</h1> 10 <ul id="todo"> 11 <li class="sty1">买菜</li> 12 <li class="sty1">做饭</li> 13 <li>拖地</li> 14 </ul> 15 </div> 16 <script> 17 //1. 获取文档里类名为 sty1 的元素，输出返回的数组里的每一个元素的开始与结束标签之间的HTML与元素的类型 18 var item = document.getElementsByClassName("sty1"); 19 console.log('数组长度：'+item.length); 20 for(let i=0; i<item.length; i++){ 21 console.log(item[i].innerHTML); 22 } 23 console.log('-------------1----------------'); 24 25 //2. 获取文档里带有多个类名的，类名为 sty1、box1 的元素，输出返回的数组里的每一个元素的开始与结束标签之间的HTML 26 var item2 = document.getElementsByClassName("sty1 box1"); 27 console.log('数组长度：'+item2.length); 28 for(let i=0; i<item2.length; i++){ 29 console.log(item2[i].innerHTML); 30 } 31 console.log('-------------2----------------'); 32 33 //3. 组合使用 getElementsById 跟 getElementsByClassName，获取 id 属性为 todo 且 class 属性为 sty1 的元素，输出返回的数组里的每一个元素的开始与结束标签之间的HTML 34 var item3 = document.getElementById("todo"); 35 var item4 = item3.getElementsByClassName("sty1"); 36 console.log('数组长度：'+item4.length); 37 for(let i=0; i<item4.length; i++){ 38 console.log(item4[i].innerHTML); 39 } 40 console.log('-------------3----------------'); 41 </script> 42 </body> 43 </html>
控制台输出：
