JavaScript（八）---- 文档对象模型DOM

DOM：全称Document Object Model，即文档对象模型。DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，组建好之后，按照树的结构将页面显示在浏览器的窗口中。
一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的对象进行描述，我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到对应的对象操作对象的属性，则可以改变浏览器当前显示的内容。

节点层次结构

HTML网页是可以看做是一个树状的结构，即DOM树状结构。document代表当前页面的整个文档树。

例如：

document常用访问属性

　　all：返回对象所包含的元素集合的引用。

　　forms：获取以源顺序排列的文档中所有 form 对象的集合。

　　images：获取以源顺序排列的文档中所有 img 对象的集合。

　　links：获取文档中所有指定了 HREF 属性的 a 对象和所有 area 对象的集合。

　　body：获取文档中的body对象。

代码示例

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <script type="text/javascript">
 5             // 获取dom 树, 获取document 对象.
 6             var dom = window.document;
 7             // all 获取页面中所有的标签节点 ,注释和文档类型约束.
 8             function testAll() {
 9                 var allArr = dom.all;
10                 alert(allArr.length);
11                 for(var i = 0; i < allArr.length; i++) {
12                     //获取节点名称
13                     alert(allArr[i].nodeName);
14                 }
15             }
16             // anchors 获取页面中的所有的锚连接.
17             function testAnchors() {
18                 var anArr = dom.anchors;
19                 alert(anArr.length);
20             }
21             // froms  获取所有的form 表单对象
22             function testForms() {
23                 var formArr = dom.forms;
24                 alert(formArr.length);
25                 alert(formArr[0].nodeName);
26             }
27             // images
28             function testImages() {
29                 var imageArr = dom.images;
30                 alert(imageArr.length);
31             }
32             // links  获取页面的超链接.
33             function testLinks() {
34                 var linkArr = dom.links;
35                 //alert(linkArr.length);
36                 for(var i = 0; i < linkArr.length; i++) {
37                     //alert(linkArr[i].nodeName);
38                 }
39                 for(var i in linkArr) {
40                     alert(i);
41                 }
42             }
43             //testLinks();
44             // 获取页面的Body
45             var body = dom.body;
46             alert(body.nodeName);
47         </script>
48         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
49         <title>javascript</title>
50     </head>
51 
52     <body onmousemove="test(this)">
53         <img src="xxx" alt="这是一个美女" />
54         <img src="xxx" alt="这是一个美女" />
55         <img src="xxx" alt="这是一个美女" />
56         <a href="http://www.baidu.com">百度一下</a>
57         <a href="http://www.google.com">百度两下</a>
58         <a href="http://www.baigu.com">百谷一下</a>
59         <a name="one"></a>
60         <a name="two"></a>
61         <form>
62             <label>姓名:</label>
63             <!--默认不写type 就是文本输入框-->
64             <input type="text" />
65         </form>
66     </body>
67 
68 </html>

View Code

获取节点对象

1、根据属性获取节点对象

常用方法

　　document.getElementById("html元素的id")
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")

代码示例

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 
 5 
 6     function showText(){
 7         var inputNode = document.getElementById("userName");  //根据ID属性值找元素
 8         inputNode.value = "设置好了文本";//InnerHTml是用于设置标签体的内容的。 value是用于设置标签的value属性值.
 9     }
10     
11     function showImage(){
12         var images = document.getElementsByTagName("img"); //根据标签名获取所有的标签对象。
13         for(var i = 0 ; i<images.length ; i++){
14             images[i].src = "33.jpg";
15             images[i].width="100";
16             images[i].height="100";
17         }
18     }
19     
20     
21     
22      function showDiv(){
23         var divs = document.getElementsByName("info"); //根据标签的name属性值取找对应的标签，返回的是一个数组。
24         for(var i = 0 ; i<divs.length ; i++){
25             divs[i].innerHTML = "哈哈".fontcolor("red");    
26         }
27     }
28 
29 
30 
31 </script>
32 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
33 <title>无标题文档</title>
34 </head>
35 <body>    
36     <input type="text" id="userName" value="请输入用户名..." /><input type="button" onclick="showText()" value="设置文本"/>
37     <hr/>
38     
39     <img src="" />
40     <img src="" />
41     <img src="" />
42     <input type="button" onclick="showImage()" value="显示图片"/>
43    <hr/>
44     <div name="info"></div>
45     <div name="info"></div>
46     <div name="info"></div>
47      <input type="button" onclick="showDiv()" value="设置div内容"/>
48     
49 </body>
50 </html>

View Code

全选示例

 1 <html >
 2 <head>
 3 <script type="text/javascript">
 4 
 5     function checkAll(allNode){
 6         //找到所有的的选项
 7         var items = document.getElementsByName("item");
 8         //找到全选按钮的对象
 9         //var allNode = document.getElementsByName("all")[0];
10         for(var i = 0 ; i<items.length ; i++){
11             items[i].checked =     allNode.checked;
12         }
13     }
14     
15     
16     function getSum(){
17         var items = document.getElementsByName("item");
18         var sum = 0;
19         for(var i = 0 ; i<items.length ; i++){
20             if(items[i].checked){
21                 sum += parseInt(items[i].value);
22             }    
23         }    
24         var spanNode = document.getElementById("sumid");
25         spanNode.innerHTML = ("&nbsp;&nbsp;&nbsp;&yen;"+sum).fontcolor("green");
26     }
27     
28 
29 
30 </script>
31 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
32 <title>无标题文档</title>
33 </head>
34 
35 <body>
36     <div>商品列表</div>
37         <input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
38         <input type="checkbox" name="item" value="1800"  />笔记本电脑1800元<br />
39         <input type="checkbox" name="item" value="300"  />笔记本电脑300元<br />
40         <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
41         <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
42         <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
43         <input type="checkbox" name="all" onclick="checkAll(this)"  /> 全选<br />
44         <input type="button" value="总金额：" onclick="getSum()" /><span id="sumid"></span>
45 </body>
46 </html>

View Code

2、通过节点关系查找节点对象

常用属性

　　parentNode   获取当前元素的父节点。
      childNodes   获取当前元素的所有下一级子元素。
      firstChild   获取当前节点的第一个子节点。
      lastChild   获取当前节点的最后一个子节点。
------------------------------------------------------------
      nextSibling       获取当前节点的下一个节点。（兄节点）
      previousSibling   获取当前节点的上一个节点。（弟节点）

代码示例

 1 <script type="text/javascript">
 2     
 3     var bodyNode = document.getElementsByTagName("body")[0];
 4     
 5     查看父节点。
 6     var parentNode = bodyNode.parentNode;
 7     alert("父节点的名称："+parentNode.nodeName);
 8     
 9     
10     //找子节点:childNodes 获取所有的子节点，返回的是一个数 组。 注意： 获取子节点的时 候是包括了空文本或者是注释。
11     var children = bodyNode.childNodes; 
12     for(var i = 0 ; i<children.length ; i++){
13         //if(children[i].nodeType==1){
14             alert("节点的名字："+children[i].nodeName+" 对象的类型:"+children[i].nodeType);    
15         //}
16     }
17     
18     
19     alert("第一个子节点："+bodyNode.firstChild.nodeName); 
20     alert("最后一个子节点："+bodyNode.lastChild.nodeName); 
21     
22     
23     //找兄弟节点
24     
25     var inputNode = document.getElementById("userName");
26     alert("下个兄弟节点："+inputNode.nextSibling.nodeName); //下一个兄弟节点。
27     alert("上一个兄弟节点："+inputNode.previousSibling.nodeName); 
28     
29 
30 </script>

View Code

获取节点对象的信息

每个节点都包含的信息的，这些属性是：

(1) nodeType 节点类型

nodeType 属性可返回节点的类型

---------------------------------

元素类型节点类型

------------------

元素 1 就是标签元素，例<div>..</div>

文本 3 标签元素中的文本

注释 8 表示为注释

(2) nodeName 节点名称

nodeName 属性含有某个节点的名称。

--------------------------------

元素节点的 nodeName 是标签名称

属性节点的 nodeName 是属性名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

(3) nodeValue 节点值

nodeValue

--------------------------------

对于文本节点，nodeValue 属性是所包含的文本。

对于属性节点，nodeValue 属性是属性值。

对于注释节点，nodeValue 属性注释内容。

nodeValue 属性对于文档节点和元素节点是不可用的。

节点操作

常用方法

　 document.createElement("标签名")       创建新元素节点
   elt.setAttribute("属性名", "属性值")   设置属性
   elt.appendChild(e)                       添加元素到elt中最后的位置

　 elt.insertBefore(newNode, oldNode);   添加newNode到elt中，child之前。
   注意： elt必须是oldNode的直接父节点。

   elt.removeChild(child)    删除指定的子节点
    注意： elt必须是child的直接父节点。

代码示例

1、添加

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4     var num  = 1;
 5     function add(){
 6         var inputNode = document.createElement("input"); //创建一个指定标签名字的节点。
 7         
 8         //setAttribute:设置节点的属性
 9         inputNode.setAttribute("type","button");
10         inputNode.setAttribute("value","按钮"+num);
11         num++;
12         
13         var bodyNode = document.getElementsByTagName("body")[0];
14         bodyNode.appendChild(inputNode); //appendChild 添加子节点。
15                 
16     }
17 
18 </script>
19 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
20 <title>无标题文档</title>
21 </head>
22 <body>
23     <input type="button" onclick="add()" value="添加"/>
24 </body>
25 </html>

View Code

2、插入

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4     function addFile(){
 5         //先要创建一个tr对象
 6         var trNode = document.createElement("tr");
 7          //创建td对象
 8         var tdNode1 =  document.createElement("td");
 9         var tdNode2 =  document.createElement("td");
10         //
11         tdNode1.innerHTML ="<input type='file'/>";
12         tdNode2.innerHTML = "<a href='#' onclick='delFile(this)' >删除附件</a>";
13         //把td的节点添加到tr节点上
14         trNode.appendChild(tdNode1);
15         trNode.appendChild(tdNode2);
16         
17         var tbodyNode = document.getElementsByTagName("tbody")[0];
18         var lastRow = document.getElementById("lastRow");
19         
20         tbodyNode.insertBefore(trNode,lastRow);
21     }
22     
23     
24     //删除附件
25     function delFile(aNode){
26         var trNode = aNode.parentNode.parentNode;
27         var tbodyNode = document.getElementsByTagName("tbody")[0];
28         tbodyNode.removeChild(trNode);
29     }
30     
31 
32 </script>
33 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
34 <title>无标题文档</title>
35 </head>
36 <body>
37     <table>
38         <tr>
39             <td><input type="file"/></td><td><a href="#" onclick="delFile(this)" >删除附件</a></td>
40         </tr>
41         
42         <tr id="lastRow">
43             <td colspan="2"><input onclick="addFile()" type="button" value="添加附件"/></td>
44         </tr>
45     </table>
46 </body>
47 </html>

View Code

3、综合应用--城市联动

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <script type="text/javascript"> 
 4     
 5     function showCity(){
 6         //维护一个二维数组存储省份对应的城市
 7         var citys = [[],["广州","佛山","湛江","中山"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]];            
 8     
 9         //获取省份对应的节点
10         var provinceNode = document.getElementById("province");
11         //获取省份选中的选项
12         var selectIndex =  provinceNode.selectedIndex;
13         //获取对应的城市
14         var  cityDatas = citys[selectIndex];
15         
16         //找到city节点
17         var cityNode = document.getElementById("city");
18         
19         /*
20         //先清空city框所有option
21         var children = cityNode.childNodes;
22         for(var i = 0; i<children.length ; ){
23             cityNode.removeChild(children[i]);
24         }
25         */
26         
27         //设置options的个数。
28         cityNode.options.length = 1 ;
29         
30         //遍历对应的所有城市然后创建对应的option添加到city上。
31         for(var index = 0; index<cityDatas.length ; index++){
32             var option = document.createElement("option");
33             option.innerHTML = cityDatas[index];
34             cityNode.appendChild(option);
35         }
36     }
37     
38 </script>
39 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
40 <title>无标题文档</title>
41 </head>
42 <body>
43     省份<select id="province" onchange="showCity()">
44             <option>省份</option>
45             <option>广东</option>
46             <option>湖南</option>
47             <option>广西</option>
48         </select>
49     城市<select id="city"><option>城市</option></select>
50     
51 </body>
52 </html>

View Code

4、操作CSS，其实就是对标签中的style属性进行操作

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <script type="text/javascript">
 4     
 5     
 6     //产生一个四位的验证码。
 7     function createCode(){
 8         var datas = ['A','B','何','敏','凡','江','1','9']; // 0-7  长度8
 9         var code = "";
10         for(var i = 0 ; i<4; i++){
11             //随机产生四个索引值
12             var index =  Math.floor(Math.random()*datas.length); // random 0.0-1.0（不包括1.0）
13             code+=datas[index];
14         }    
15         
16         var spanNode = document.getElementById("code");
17         spanNode.innerHTML = code;
18         spanNode.style.fontSize ="24px";
19         spanNode.style.color = "red";
20         spanNode.style.backgroundColor="gray";
21         spanNode.style.textDecoration = "line-through";
22     }
23     
24 function ready(){
25     createCode();
26 }
27     
28 
29 
30 </script>
31 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
32 <title>无标题文档</title>
33 </head>
34 <body onload="ready()">
35     <span id="code"></span><a href="#" onclick="createCode()">看不清，换一个</a>
36     
37 </body>
38 </html>

View Code