您的位置: 首页  >  IT文章  >  javaScript---文档对象模型(DOM)

javaScript---文档对象模型(DOM)

分类: IT文章 • 2023-11-17 16:01:06

DOM(Document Object Model):文档对象模型

1.通过html标签属性找节点

2.通过关系找节点

3.创建节点、插入节点

一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的
对象进行描述，我们在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到
对应的对象操作对象的属性，则可以改变浏览器当前显示的内容。

整个形状如同树一般，所以又叫文档树(document):

javaScript---文档对象模型(DOM)

文档树的每一个节点都称为节点（Node）

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

 1.通过html标签属性找节点go top

通过html元素的标签属性找节点。
document.getElementById("html元素的id")
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")

demo(全选功能)：

 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 ></span>
45 </body>
46 </html>
View Code

2.通过关系找节点go top

通过关系(父子关系、兄弟关系)找标签。
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
------------------------------------------------------------
nextSibling 获取当前节点的下一个节点。（兄节点）
previousSibling 获取当前节点的上一个节点。（弟节点）

我们可以通过标签的类型进行判断筛选(节点的nodeType可显示节点的类型)：

    var bodyNode = document.getElementsByTagName("body")[0];
    var bodyChilds = bodyNode.childNodes;
    for ( var i=0; i<bodyChilds.length; i++)
    {
        alert(bodyChilds[i]+"的类型是:"+bodyChilds[i].nodeType);
    }

文本节点的类型： 3
注释的节点类型： 8
标签节点的类型： 1

 1 //    //找到body标签
 2 //    var bodyObj = document.getElementsByTagName("body")[0];
 3 //    //查找body的所有子节点
 4 //    var bodyChild = bodyObj.childNodes;
 5 //    //遍历输出body的所有子节点
 6 //    for ( var i=0; i<bodyChild.length; i++)
 7 //    {
 8 //        alert("body的儿子："+bodyChild[i].nodeName);
 9 //    }
10 //    //查找并输出body的父节点
11 //    var bodyParent = bodyObj.parentNode;
12 //    alert("body他爹:"+bodyParent.nodeName);
13     
14     //查找html节点的第一个子节点
15     var htmlNode = document.getElementsByTagName("html")[0];
16     var htmlFirstChild = htmlNode.firstChild;
17     alert("html的第一个儿子："+htmlFirstChild.nodeName);
18     //查找html节点的最后一个子节点
19     
20     var htmlLastChild = htmlNode.lastChild;
21     alert("html的最后一个儿子:"+htmlLastChild.nodeName);
View Code

 3.创建节点、插入节点

添加节点

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

插入目标元素的位置
elt.insertBefore(newNode, oldNode); 　 将newNode插入到oldNode之前
注意： elt必须是oldNode的直接父节点。
删除节点
elt.removeChild(child) 删除指定的子节点
注意： elt必须是child的直接父节点。

demo：

增加删除附件的练习

 1 <html >
 2  <head>
 3   <title> new document </title>
 4   <script type="text/javascript">
 5     function add(){
 6         //创建节点
 7         var trNode = document.createElement("tr");
 8         var td1Node = document.createElement("td");
 9         var td2Node = document.createElement("td");
10         //设置td的内容
11         td1Node.innerHTML = "<input type='file'/>";
12         td2Node.innerHTML = "<a href='#' onclick='remove(this)'>删除附件</a>";
13         //将td添加到内存中以创建好了的tr内
14         trNode.appendChild(td1Node);
15         trNode.appendChild(td2Node);
16         //将内存中的tr插入到指定位置
17         var tbodyNode = document.getElementsByTagName("tbody")[0];
18         var addButtonNode = document.getElementById("addButton");
19         tbodyNode.insertBefore(trNode,addButton);
20     }
21     
22     function remove(aNode){
23         //获取要删除节点的对象
24         var tbodyNode = document.getElementsByTagName("tbody")[0];
25         //删除节点（a标签的父节点的父节点就是a标签所处的该行）
26         tbodyNode.removeChild(aNode.parentNode.parentNode);
27     
28     }
29   </script>
30  </head>
31  <body>
32   <table align="center">
33         <tr>
34             <td><input type="file"/></td><td><a href="#" onclick='remove(this)'>删除附件</a></td>
35         </tr>
36         <tr id="addButton">
37             <td><input type="button" value="增加附件" onclick="add()"/></td>
38         </tr>
39   </table>
40  </body>
41 </html>
View Code

城市联动框：

 1 <html >
 2  <head>
 3   <title> new document </title>
 4   <script type="text/javascript">
 5     var citys = [[],["长沙","邵阳","衡阳","郴州","湘潭","株洲"],["广州","佛山","中山","东莞"],["杭州","宁波","温州","金华"]];
 6     
 7     function showCity(provinceNode){
 8         //取得城市信息
 9         var cityDatas = citys[provinceNode.selectedIndex];
10         //获取显示城市下拉列表框节点
11         var cityNode = document.getElementById("city");
12         //每次显示城市信息前，将显示城市的下拉框长度清除，以保证省份换了一个时上次添加的城市信息不会残留
13         cityNode.length = 1;
14         //遍历城市信息并将其添加到city节点中
15         for ( var i=0; i<cityDatas.length; i++)
16         {
17             //将城市信息加入到city节点中
18             var optionNode = document.createElement("option");
19             optionNode.innerHTML = cityDatas[i];
20             cityNode.appendChild(optionNode);
21         }
22     }
23 
24 
25   </script>
26   </head>
27  <body>
28     <table>
29         <tr>
30             <td>省份</td>
31             <td>
32                 <select id="province" onclick="showCity(this)">
33                     <option>省份</option>
34                     <option>湖南</option>
35                     <option>广东</option>
36                     <option>浙江</option>
37                 </select>
38             </td>
39             <td>
40                 <select id="city">
41                     <option>城市</option>
42                 </select>
43             </td>
44         </tr>
45     </table>
46  </body>
47 </html>
View Code

相关推荐