标签:
DOM (Document Object Model) 文档对象模型
1. document 文档 HTML XML 文件 (标记语言)
<body>
<div>
<!-- -->
<a href="#">wwww</a>
</div>
</body>
节点:将文档想成一个倒树, 每一个部分(根、元素、文本(内容), 属性, 注释)都是一节点。
根据 DOM,HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的:
1) 整个文档是一个文档节点(根节点)
2) 每个 HTML 标签是一个元素节点
3) 包含在 HTML 元素中的文本是文本节点
4) 每一个 HTML 属性是一个属性节点
5) 注释属于注释节点
2. 父、子和同级节点
节点树中的节点彼此之间都有等级关系。
父、子和同级节点用于描述这种关系。父节点拥有子节点,位于相同层级上的子节点称为同级节点(兄弟或姐妹)。
1) 在节点树中,顶端的节点成为根节点
2) 根节点之外的每个节点都有一个父节点
3) 节点可以有任何数量的子节点
4) 叶子是没有子节点的节点
5) 同级节点是拥有相同父节点的节点
只要知道一个节点, 按关系找到其它节点
父节点: parentNode
子节点(第一个, 最后一个) childNodes firstChild lastChild
同胞(同辈)节点 (上一个, 下一个)nextSibling previousSibling
3. 获取节点的方式:
array getElementsByTagName("节点名"); //获取所对应节点名(所有),返回的是数组
object getElementById("id名"); //获取id名的唯一节点对象
示例:(找节点)
document.getElementsByTagName("li"); //所有所有li节点
document.getElementById("lid"); //获取id值为lid的唯一节点
document.getElementById("uid").getElementsByTagName("li");
//获取id值为uid中所有li子节点
document.getElementsByTagName("ul")[0].getElementsByTagName("li");
//获取第一个ul节点中所有li子节点
获取到的标记名(多个)、 id(唯一)、 name(多个)
4. 每个节点中的内容
节点类型nodeType、节点名nodeName,节点值nodeValue
节点名nodeName:
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
节点值nodeValue
元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值
nodeType(节点类型)
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
4. Object 对象 (HTML元素 转成的对象(js对象))
注意: 如果使用js操作HTML文档, 就需要选将HTML文档结构转成Js对象
a. 操作属性:
nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)
其他属性:(针对于节点)
childNodes 返回节点到子节点的节点列表。
firstChild 返回节点的首个子节点。
lastChild 返回节点的最后一个子节点。
nextSibling 返回节点之后紧跟的同级节点。
previousSibling 属性可返回某节点之前紧跟的节点(处于同一树层级)
parentNode 返回节点的父节点。
textContent设置或返回节点及其后代的文本内容。
b. 操作内容
innerText(IE) textContent(FF) //获取的是显示的内容,不包含HTML标签
innerHTML //获取的是显示的内容,会包含HTML
outerText
outerHTML
表单
value
c. 操作样式
aobj.style.backgroundColor="red";
aobj.style.fontSize="3cm";
className
aobj.className="test";
aobj.className+=" demo";
aobj.className="";
e. 操作节点:
appendChild() 向节点的子节点列表的结尾添加新的子节点。
cloneNode() 复制节点。
removeChild() 删除(并返回)当前节点的指定子节点。
replaceChild() 用新节点替换一个子节点。
hasAttributes() 判断当前节点是否拥有属性。
hasChildNodes() 判断当前节点是否拥有子节点。
insertBefore() 在指定的子节点前插入新的子节点。
f. 创建节点:
createElement() 创建元素节点
createAttribute() 来创建属性节点 可以:元素节点.属性名=值;
createTextNode() 来创建新的文本节点 可以:元素节点.innerHTML=文本内容;
有了以上三点的操作之前先转成对象
转成对象的两种形式:
1. 标记名(多个)、 id(唯一)、 name(多个)
document中的三个方法
var objs=document.getElementsByTagName("div"); //获取多个
var objs=document.getElementById("one"); //获取一个
var objs=document.getElementsByName("two");
实例1:读取本地XML文件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>XML-DOM</title> 6 </head> 7 <body> 8 <h3>XML-DOM</h3> 9 <script type="text/javascript"> 10 //加载解析stu.xml文件信息--谷歌浏览器不支持 11 try{ //Internet Explorer 12 xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 13 }catch(e){ 14 try{ //Firefox, Mozilla, Opera, etc. 15 xmlDoc=document.implementation.createDocument("","",null); 16 }catch(e){ 17 alert(e.message); 18 } 19 } 20 21 try{ 22 xmlDoc.async=false; 23 xmlDoc.load("stu.xml"); 24 //document.write("xmlDoc is loaded, ready for use"); 25 var list = xmlDoc.getElementsByTagName("stu"); 26 for(var i=0;i<list.length;i++){ 27 document.write(list[i].getElementsByTagName("name")[0].childNodes[0].nodeValue 28 +"<br/>"); 29 } 30 }catch(e){ 31 alert(e.message); 32 } 33 34 </script> 35 </body> 36 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>XML-DOM</title> 6 </head> 7 <body> 8 <h3>XML-DOM:节点的遍历</h3> 9 <ul id="uid"> 10 <li>成龙</li> 11 <li>甄子丹</li> 12 <li>李连杰</li> 13 <li>宋小宝</li> 14 </ul> 15 <script type="text/javascript"> 16 //获取ul中的所有li节点 17 var list = document.getElementById("uid").getElementsByTagName("li"); 18 document.write(list.length+"<br/>"); 19 20 //通过属性获取ul的所有子节点 21 var list2 = document.getElementById("uid").childNodes; 22 document.write(list2.length+"<br/>"); 23 document.write("<hr/>"); 24 25 //遍历所有list2节点 26 for(var i=0;i<list2.length;i++){ 27 //document.write(list2[i].nodeType); 28 //判断是否是元素节点 29 if(list2[i].nodeType==1){ 30 document.write(list2[i].firstChild.nodeValue+"<br/>"); 31 } 32 } 33 </script> 34 </body> 35 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>XML-DOM</title> 6 <style> 7 ul{list-style:none;} 8 ul li{line-height:30px;background-color:#ddd;margin-top:2px;} 9 ul li:hover{background-color:#fc0;} 10 ul li.cc{background-color:#f0c;} 11 </style> 12 </head> 13 <body> 14 <h3>XML-DOM:节点的删除</h3> 15 <ul id="uid"> 16 <li>成龙</li> 17 <li>甄子丹</li> 18 <li>李连杰</li> 19 <li>宋小宝</li> 20 <li>成龙</li> 21 <li>甄子丹</li> 22 <li>李连杰</li> 23 <li>宋小宝</li> 24 </ul> 25 <button onclick="doDel()">删除</button> 26 <script type="text/javascript"> 27 //获取上面所有的li节点并添加点击事件 28 var list = document.getElementsByTagName("li"); 29 for(var i=0;i<list.length;i++){ 30 list[i].onclick = function(){ 31 this.setAttribute("class","cc"); 32 } 33 } 34 35 function doDel(){ 36 //获取所有li节点 37 var list = document.getElementsByTagName("li"); 38 for(var i=0;i<list.length;i++){ 39 //判断是否选中 40 if(list[i].getAttribute("class")=="cc"){ 41 //执行删除 42 list[i].parentNode.removeChild(list[i]); 43 i--; 44 } 45 } 46 } 47 </script> 48 </body> 49 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>XML-DOM</title> 6 7 </head> 8 <body> 9 <h3>XML-DOM:改变节点的属性</h3> 10 <a id="aid" href="http://www.baidu.com">百度</a> 11 <script type="text/javascript"> 12 //获取上面超级链接节点 13 var a = document.getElementById("aid"); 14 a.title = "百度网址"; //HTML DOM属性操作 15 //a.bb = "cc"; //以HTML DOM为节点添加不存在的属性是不可以的。 16 a.setAttribute("bb","cc"); //可通过XML DOM的属性操作 17 alert(a.href+":"+a.getAttribute(‘title‘)); 18 </script> 19 </body> 20 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>XML-DOM</title> 6 <style> 7 ul{list-style:none;} 8 ul li{line-height:30px;background-color:#ddd;margin-top:2px;width:100px;} 9 </style> 10 </head> 11 <body> 12 <h3>XML-DOM:节点的创建</h3> 13 <ul id="uid"> 14 <li>成龙</li> 15 <li>甄子丹</li> 16 <li>李连杰</li> 17 <li>宋小宝</li> 18 </ul> 19 名称:<input id="nid" type="text" size="10" name="name"/> 20 <button onclick="doAdd()">添加</button> 21 <script type="text/javascript"> 22 function doAdd(){ 23 //获取输入框中的值 24 var name = document.getElementById("nid").value; 25 //获取节点ul 26 var ul = document.getElementById("uid"); 27 //创建一个文本节点 28 var tt = document.createTextNode(name); 29 //创建一个li的元素节点 30 var li = document.createElement("li"); 31 //添加 32 li.appendChild(tt); //将文本添加li中 33 //ul.appendChild(li); //将li添加的ul中末尾 34 ul.insertBefore(li,ul.firstChild); //将li插入的ul中首位 35 } 36 </script> 37 </body> 38 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>XML-DOM</title> 6 <style> 7 #did{width:400px;height:300px;border:1px solid blue;} 8 img{width:80px;border:2px solid #fff;margin:2px;} 9 img:hover{border:2px solid red;} 10 </style> 11 </head> 12 <body> 13 <h3>XML-DOM:节点的克隆</h3> 14 <div id="did"></div> 15 <div id="mid"> 16 <img src="./images/11.jpg"/> 17 <img src="./images/22.jpg"/> 18 <img src="./images/33.jpg"/> 19 <img src="./images/44.jpg"/> 20 </div> 21 <h4>双击图片可实现图片的添加</h4> 22 <script type="text/javascript"> 23 //获取所有图片 24 var list = document.getElementsByTagName("img"); 25 //遍历并添加双击事件 26 for(var i=0;i<list.length;i++){ 27 list[i].ondblclick = function(){ 28 //获取div 29 var did = document.getElementById("did"); 30 //将当前被双击的图片克隆一份添加到did中 31 did.appendChild(this.cloneNode()); 32 } 33 } 34 </script> 35 </body> 36 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>XML-DOM</title> 6 <style> 7 #did{width:400px;border:1px solid blue;} 8 #did img{width:400px;} 9 #mid img{width:80px;border:2px solid #fff;margin:2px;} 10 #mid img:hover{border:2px solid red;} 11 </style> 12 </head> 13 <body> 14 <h3>XML-DOM:节点的替换</h3> 15 <div id="did"><img src="./images/11.jpg"/></div> 16 <div id="mid"> 17 <img src="./images/11.jpg"/> 18 <img src="./images/22.jpg"/> 19 <img src="./images/33.jpg"/> 20 <img src="./images/44.jpg"/> 21 </div> 22 <h4>双击图片可实现图片的替换</h4> 23 <script type="text/javascript"> 24 //获取所有图片 25 var list = document.getElementsByTagName("img"); 26 //遍历并添加双击事件 27 for(var i=0;i<list.length;i++){ 28 list[i].ondblclick = function(){ 29 //获取div 30 var did = document.getElementById("did"); 31 //将当前被双击的图片克隆一份替换到did中 32 did.replaceChild(this.cloneNode(),did.firstChild); 33 } 34 } 35 </script> 36 </body> 37 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>XML DOM实例</title> 6 <style> 7 select{width:100px;height:200px;border:1px solid #ddd;float:left;} 8 div{width:100px;height:200px;float:left;text-align:center;padding-top:50px;} 9 </style> 10 </head> 11 <body> 12 <!-- 注释 --> 13 <h2>XML DOM中的Select对象操作实现</h2> 14 <select id="sid1" size="10" multiple> 15 <option value="0">邓丽君</option> 16 <option value="1">张国荣</option> 17 <option value="2">梅艳芳</option> 18 <option value="3">黄家驹</option> 19 <option value="4">迈克尔.杰克逊</option> 20 <option value="5">姚贝娜</option> 21 <option value="6">张雨生</option> 22 </select> 23 <div> 24 <button onclick="doMove(‘sid1‘,‘sid2‘)">>></button> 25 <br/><br/><br/><br/> 26 <button onclick="doMove(‘sid2‘,‘sid1‘)"><<</button> 27 </div> 28 <select id="sid2" size="10" multiple></select> 29 <script type="text/javascript"> 30 //执行下拉项的移动操作 31 function doMove(d1,d2){ 32 //获取对应的下拉框 33 var select1 = document.getElementById(d1); 34 var select2 = document.getElementById(d2); 35 //获取第一个下拉框中的所有下拉项option 36 var list = select1.getElementsByTagName("option"); 37 //遍历判断是否选中 38 for(var i=0;i<list.length;i++){ 39 if(list[i].selected){ 40 list[i].selected = false; 41 select2.appendChild(list[i]); 42 i--; 43 } 44 } 45 46 } 47 48 49 </script> 50 51 </body> 52 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>XML DOM实例</title> 6 <style> 7 select,option,div,button{margin:0px;padding:0px;} 8 #lid,#rid,div{ 9 width:80px; 10 height:260px; 11 float:left; 12 } 13 div{ 14 text-align:center; 15 padding-top:60px; 16 } 17 </style> 18 </head> 19 <body> 20 <!-- html注释 --> 21 <h2>XML DOM实例:XML DOM 中table</h2> 22 <table id="tid" width="500" border="1"> 23 <thead> 24 <tr> 25 <th>学号</th> 26 <th>姓名</th> 27 <th>性别</th> 28 <th>年龄</th> 29 <th>操作</th> 30 </tr> 31 </thead> 32 <tbody> 33 <tr> 34 <td>1001</td> 35 <td>张三</td> 36 <td>男</td> 37 <td>20</td> 38 <td><button onclick="dodel(this)">删除</button></td> 39 </tr> 40 <tr> 41 <td>1002</td> 42 <td>李四</td> 43 <td>女</td> 44 <td>21</td> 45 <td><button onclick="dodel(this)">删除</button></td> 46 </tr> 47 <tr> 48 <td>1003</td> 49 <td>王五</td> 50 <td>男</td> 51 <td>22</td> 52 <td><button onclick="dodel(this)">删除</button></td> 53 </tr> 54 </tbody> 55 </table> 56 <br/><br/><br/> 57 <h2>添加学生信息</h2> 58 <form action="#" name="myform" onsubmit="return doAdd()"> 59 学号:<input type="text" name="sno"/><br/><br/> 60 姓名:<input type="text" name="name"/><br/><br/> 61 性别:<input type="text" name="sex"/><br/><br/> 62 年龄:<input type="text" name="age"/><br/><br/> 63 <input type="submit" value="添加"/> 64 </form> 65 <script type="text/javascript"> 66 //执行删除的方法 67 function dodel(bt){ 68 //获取表格节点 69 bt.parentNode.parentNode.parentNode.removeChild(bt.parentNode.parentNode); 70 } 71 72 //执行添加 73 function doAdd(){ 74 //获取表单信息 75 var data = new Array(); 76 data[0] = document.myform.sno.value; 77 data[1] = document.myform.name.value; 78 data[2] = document.myform.sex.value; 79 data[3] = document.myform.age.value; 80 81 //获取表格并申请添加一行 82 var tbody = document.getElementById("tid").getElementsByTagName("tbody")[0]; 83 //遍历数据并添加 84 var tr = document.createElement("tr"); 85 for(var i=0;i<data.length;i++){ 86 var td = document.createElement("td"); 87 var text = document.createTextNode(data[i]); 88 td.appendChild(text); 89 tr.appendChild(td); 90 } 91 var td = document.createElement("td"); 92 td.innerHTML = ‘<button onclick="dodel(this)">删除</button>‘; 93 tr.appendChild(td); 94 tbody.appendChild(tr); 95 96 //当前表单清空 97 document.myform.reset(); 98 99 return false; 100 } 101 </script> 102 </body> 103 </html>
标签:
原文地址:http://www.cnblogs.com/yexiang520/p/5720025.html