zoukankan html css js c++ java

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

查看全文

相关阅读:
使用 Dockerfile 定制镜像
 UVA 10298 Power Strings 字符串的幂（KMP，最小循环节）
UVA 11090 Going in Cycle!! 环平均权值（bellman-ford，spfa，二分）
LeetCode Best Time to Buy and Sell Stock 买卖股票的最佳时机（DP）
LeetCode Number of Islands 岛的数量（DFS，BFS）
LeetCode Triangle 三角形（最短路）
LeetCode Swap Nodes in Pairs 交换结点对（单链表）
LeetCode Find Minimum in Rotated Sorted Array 旋转序列找最小值（二分查找）
HDU 5312 Sequence (规律题)
LeetCode Letter Combinations of a Phone Number 电话号码组合

原文地址：https://www.cnblogs.com/nicker/p/6298157.html