第六章 DOM文档对象模型
第一节 DOM概念
DOM: 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,既有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。
DOM编程: 使用js访问DOM对象中的节点,进行节点的创建,删除,修改操作。
DOM树中的节点彼此拥有的层级关系类似树。
在DOM中,有如下的关系:
父节点(parent),子节点(child),兄弟节点(sibling)
-
html
是整个树的根节点,没有父节点 -
除根节点外,每一个节点都有父节点
-
一个节点可以有多个子节点
-
同一个父节点的节点互为兄弟节点
第二节 常用的DOM方法和属性
方法 | 说明 |
---|---|
getElementById | 根据id获取元素 |
getElementsByTagName | 根据标签名获取元素数组 |
getElememtsByClassName | 根据类样式名获取元素数组 |
getElementsByName | 根据元素的name属性查找元素数组 |
createElement | 创建元素节点 |
appendChild | 在当前元素上添加子节点 |
removeChild | 从当前元素中移除子节点 |
querySelectorAll | 根据(类)id选择器选择元素数组 |
属性 | 说明 |
---|---|
parentNode | 当前元素的父节点 |
childNodes | 当前元素的子节点数组 |
firstChild | 当前子节点中的第一个节点 |
lastChild | 当前子节点中的最后一个节点 |
nodeValue | 节点值 |
nodeName | 节点名称 |
nodeType | 节点类型:1代表元素;2代表属性节点 ;3代表文本节点 |
children | 返回当前元素的子元素节点 |
firstElementChild | 返回当前元素的第一个子元素节点 |
lastElementChild | 返回当前元素的最后一个元素节点 |
getAttributeNode("属性名") | 获取元素属性节点 例如getAttributeNode("id")获取元素的id |
第三节 DOM实例
1.实现微博的广播效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> .con { height:200px; border:1px solid #E1E2E6; margin-top:5px; } </style> <script> function add(){ var condiv=document.createElement("div"); condiv.innerHTML=document.getElementById("content").innerHTML; condiv.className="con"; document.getElementById("bd").appendChild(condiv); } </script> </head> <body> <textarea id="content"></textarea> <br/> <input type="button" value="广播" οnclick="add()"/> <hr/> <div id="bd"></div> </body> </html>
2.购物车
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script type="text/html" id="tem"> <tr> <td><input type="checkbox" name="ckone" /> </td> <td>temname</td> <td>temprice</td> <td>count</td> <td name="sum">zongjia</td> </tr> </script> <script> function sum() { var arrSum=document.getElementsByName("sum"); var psum=0; for (var i=0;i<arrSum.length;i++) { psum+=parseFloat(arrSum[i].innerHTML); } document.getElementById("sum").innerHTML="合计:"+psum+"¥"; } function add() { document.getElementById("tbd").innerHTML+=document.getElementById("tem").innerHTML.replace("temname",document.getElementById("gdName").value).replace("temprice",document.getElementById("price").value).replace("count",document.getElementById("count").value).replace("zongjia",Number(document.getElementById("price").value)*Number(document.getElementById("count").value)); sum(); } function selAll() { for (var i=0;i<document.getElementsByName("ckone").length;i++) { document.getElementsByName("ckone")[i].checked=document.getElementById("selectAll").checked; } } function del() { var a=document.getElementsByName("ckone"); for (var i=a.length-1;i>=0;i--) { if (a[i].checked) { a[i].parentNode.parentNode.remove(); } } sum(); } function faselect() { var a=document.getElementsByName("ckone"); for (var i=a.length-1;i>=0;i--) { a[i].checked=!a[i].checked; } } </script> </head> <body> <fieldset> <legend>添加商品</legend> 商品名称:<input type="text" name="" id="gdName"/> 商品价格:<input type="text" name="" id="price"/> 商品数量:<input type="number" name="" id="count" min="1" max="99"/> <input type="button" value="添加" οnclick="add()"/> </fieldset> <hr/> <h3>商品表</h3> <div> <table border='1' width="600"> <thead> <tr> <th><input type="checkbox" name="" id="selectAll" οnclick="selAll()">全选</th> <th>商品名称</th> <th>单价</th> <th>商品数量</th> <th>总价格</th> </tr> </thead> <tbody id="tbd"> </tbody> </table> <div style="width:600px;height:40px;color:red;"> <b id="sum" style="float:right;margin-top:5px;">合计:</b> </div> </div> <hr/> <input type="button" value="反选" οnclick="faselect()"> <input type="button" value="删除" οnclick="del()"> </body> </html>