JavaScript总结之DOM基本操作（三）

　　DOM（Document Object Model），即文档对象模型，是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，它允许开发人员添加、移除和修改页面的某一部分。当我们创建了一个网页并把它加载到Web浏览器上，DOM就在幕后悄然而生，因为它把你所编写的网页文档转换为一个文档对象。

　　我们可以这么理解DOM，把DOM看做一棵节点树，主要由元素节点、属性节点、文本节点三种节点构成。例如下方的一行HTML代码，

<p title="reminder">Hello JavaScript</p>

其中 p 为元素节点，title="reminder" 为属性节点，Hello JavaScript 为文本节点。

　　HTML文档中每一个元素节点都是一个对象，其中3个获取特定元素的方法分别是： getElementById、getElementsByTagName 和 getElementsByClassName 方法。当我们得到需要的元素后，就可以获取它的各个属性，getAttribute 方法就是用来做这件事的，而 setAttribute 方法则用来更改属性节点的值。

例如下方的HTML文档，对其进行JavaScript的 DOM 的5种基本方法操作，如下所示：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>Mobile phone</title>
 6         <style type="text/css">
 7             body {
 8                 color: white;
 9                 background-color: black;
10             }
11             p {
12                 color: yellow;
13                 font-family: "arial", sans-serif;
14                 font-size: 1.2em;
15             }
16             #purchases {
17                 border: 1px solid white;
18                 background-color: #333;
19                 color: #ccc;
20                 padding: 1em;
21             }
22             #purchase li {
23                 font-weight: bold;
24             }
25         </style>
26     </head>
27     <body>
28         <h1>What to buy</h1>
29         <p title="reminder">Never Settle !!!</p>
30         <ul id="purchases">
31             <li>HUAWEI</li>
32             <li class="sale">OPPO & vivo</li>
33             <li class="sale important">mi</li>
34         </ul>
35     </body>
36 </html>

getElementById 方法，返回那个给定 id 属性值的元素节点对应的对象：

1 <script>
2 　　 alert(typeof document.getElementById("purchases"));      //弹出的对话框显示object
3 </script>

getElementsByTagName 方法，返回一个对象数组，每个对象对应着文档里给定标签的一个元素：

1 <script>
2     var items = document.getElementsByTagName("li");
3     for(var i = 0; i<items.length; i++){
4     　　 alert(typeof items[i]);　　　　//弹出的对话框显示object，重复3次
5     }
6 </script>

getElementsByClassName 方法，返回一个对象数组，每个对象对应着文档里给定类名的一个元素：

1 <script>
2     var shopping = document.getElementById("purchases");
3     var sales = shopping.getElementsByClassName("sale");
4     alert(sales.length);　　　　//弹出的对话框显示2
5 </script>

getAttribute 方法，获取元素节点的各个属性：

1 <script>
2     var paras = document.getElementsByTagName("p")
3     for(var i = 0; i<paras.length; i++){
4         alert(paras[i].getAttribute("title"));      //弹出的对话框显示reminder
5     }
6 </script>

setAttribute 方法，对属性节点的值做出修改：

1 <script>
2 　　 var shopping = document.getElementById("purchases");
3     alert(shopping.getAttribute("title"));　　　　 //弹出的对话框显示null(空的值)
4     shopping.setAttribute("title", "a list of goods");
5     alert(shopping.getAttribute("title"));　　　　 //弹出的对话框显示a list of goods
6 </script>

秒客网

JavaScript总结之DOM基本操作（三）

相关文章