JavaScript(八)---- 文档对象模型DOM
DOM:全称Document Object Model,即文档对象模型。DOM描绘了一个层次化的树,允许开发人员添加、删除、修改页面的某一部分。浏览器在解析HTML页面标记的时候,其实不是按照一行一行读取并解析的,而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树,组建好之后,按照树的结构将页面显示在浏览器的窗口中。
一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所有标签都会创建一个对应的对象进行描述,我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到对应的对象操作对象的属性,则可以改变浏览器当前显示的内容。
节点层次结构
HTML网页是可以看做是一个树状的结构,即DOM树状结构。document代表当前页面的整个文档树。
例如:
html
|-- head
| |-- title
| |-- meta
| ...
|-- body
| |-- div
| |-- form
| | |-- input
| | |-- textarea
... ... ...
document常用访问属性
all:返回对象所包含的元素集合的引用。
forms:获取以源顺序排列的文档中所有 form 对象的集合。
images:获取以源顺序排列的文档中所有 img 对象的集合。
links:获取文档中所有指定了 HREF 属性的 a 对象和所有 area 对象的集合。
body:获取文档中的body对象。
代码示例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
获取节点对象
1、根据属性获取节点对象
常用方法
document.getElementById("html元素的id")
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")
代码示例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
全选示例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 = (" ¥"+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>
2、通过节点关系查找节点对象
常用属性
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
------------------------------------------------------------
nextSibling 获取当前节点的下一个节点。(兄节点)
previousSibling 获取当前节点的上一个节点。(弟节点)
代码示例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
获取节点对象的信息
每个节点都包含的信息的,这些属性是:
(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、添加
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
2、插入
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
3、综合应用--城市联动
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
4、操作CSS,其实就是对标签中的style属性进行操作
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>