节点 - xiaoxustudy

目录：

以下面的代码与节点树为例来理解节点：

 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>

控制台输出：

posted on 2020-05-01 21:26 xiaoxustudy 阅读(449) 评论(0) 收藏举报

刷新页面返回顶部