一、基本概念
HTML DOM 定义了访问和操作HTML文档的标准方法。
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
DOM 被分为不同的部分：
1.Core DOM 定义了一套标准的针对任何结构化文档的对象
2.XML DOM 定义了一套标准的针对 XML 文档的对象
3.HTML DOM 定义了一套标准的针对 HTML 文档的对象。
节点：根据 DOM，HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的：
>整个文档是一个文档节点
>每个 HTML 标签是一个元素节点
>包含在 HTML 元素中的文本是文本节点
>每一个 HTML 属性是一个属性节点
>注释属于注释节点
节点彼此间都存在关系。
>除文档节点之外的每个节点都有父节点。
>大部分元素节点都有子节点。
>当节点分享同一个父节点时，它们就是同辈（同级节点）。
>节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点
>节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点
查找并访问节点
你可通过若干种方法来查找您希望操作的元素：
>通过使用 getElementById() 和 getElementsByTagName() 方法
>通过使用一个元素节点的 parentNode、firstChild 以及 lastChild childNodes属性
> nextSibling返回节点之后紧跟的同级节点。/ previousSibling返回节点之前紧跟的同级节点。
节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
nodeName 属性含有某个节点的名称。
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
二、HTML DOM对象参考
Document: 代表整个 HTML 文档，可被用来访问页面中的所有元素 常用集合属性：forms
Anchor : 代表 <a> 元素
Area : 代表图像映射中的 <area> 元素
Base : 代表 <base> 元素
Body : 代表 <body> 元素
Button : 代表 <button> 元素
Event : 代表某个事件的状态
Form : 代表 <form> 元素
Frame : 代表 <frame> 元素
Frameset: 代表 <frameset> 元素
Iframe : 代表 <iframe> 元素
Image : 代表 <img> 元素
Input button : 代表 HTML 表单中的一个按钮
Input checkbox : 代表 HTML 表单中的复选框
Input file : 代表 HTML 表单中的文件上传
Input hidden : 代表 HTML 表单中的隐藏域
Input password : 代表 HTML 表单中的密码域
Input radio : 代表 HTML 表单中的单选按钮
Input reset : 代表 HTML 表单中的重置按钮
Input submit : 代表 HTML 表单中的确认按钮
Input text : 代表 HTML 表单中的文本输入域（文本框）
Link : 代表 <link> 元素
Meta : 代表 <meta> 元素
Object : 代表 <Object> 元素
Option : 代表 <option> 元素
Select : 代表 HTML 表单中的选择列表
Style : 代表单独的样式声明
Table : 代表 <table> 元素
TableData : 代表 <td> 元素
TableRow : 代表 <tr> 元素
Textarea : 代表 <textarea> 元
实例：遍历绑定事件
1 <script type="text/javascript"> 2 //获取网页中所有的li节点 3 var list = document.getElementsByTagName("li"); 4 document.write("LI节点总数量："+list.length+"<br/>"); 5 6 //获取ul中的所有li节点 7 var list2 = document.getElementsByTagName("ul")[0].getElementsByTagName("li"); 8 document.write("UL中LI节点数量："+list2.length+"<br/>"); 9 10 //获取ol中的所有li子节点 11 var list3 = document.getElementById("oid").getElementsByTagName("li"); 12 document.write("OL中LI节点数量："+list3.length+"<br/>"); 13 14 //为ul中的li节点绑定点击事件 15 for(var i=0;i<list2.length;i++){ 16 list2[i].onclick = function(){ 17 alert(this.innerHTML); 18 //获取当前li节点的父节点ul并设置样式 19 this.parentNode.style.color = this.innerHTML; 20 } 21 } 22 </script>
1 <body> 2 <h3 id="hid">JavaScript的HTML DOM实例--延迟加载</h3> 3 <img src="./images/HLL-11_xuandong.gif" res="./images/11.jpg"/> 4 <img src="./images/HLL-11_xuandong.gif" res="./images/22.jpg"/> 5 <img src="./images/HLL-11_xuandong.gif" res="./images/33.jpg"/> 6 <img src="./images/HLL-11_xuandong.gif" res="./images/44.jpg"/> 7 <script type="text/javascript"> 8 //定时调用 9 setTimeout(function(){ 10 //获取网页中所有的图片标签 11 var list = document.images; 12 //遍历处理 13 for(var i=0;i<list.length;i++){ 14 list[i].src = list[i].getAttribute("res"); 15 list[i].width = 100; 16 } 17 },3000); 18 19 alert("当前cookie信息："+document.cookie); 20 </script> 21 </body>
实例：属性修改
<script type="text/javascript"> function dofun(){ var a = document.getElementById("aid"); //alert(a.nodeType); //获取信息 alert("地址："+a.href+"; 名称："+a.innerHTML+"; 提示信息："+a.title); //改变 a.href="http://www.163.com"; a.title = "网易地址"; a.innerHTML = "网易"; } </script>
实例：绘制图片
1 <body> 2 <h3>JavaScript的HTML DOM实例--canvas节点</h3> 3 <canvas id="myCanvas"></canvas> 4 5 <script type="text/javascript"> 6 var canvas=document.getElementById('myCanvas'); 7 var ctx=canvas.getContext('2d'); 8 ctx.fillStyle='#FF0000'; 9 ctx.fillRect(0,0,80,100); 10 </script> 11 </body>
实例：事件冒泡
1 <body> 2 <h3>JavaScript的HTML DOM实例--事件的冒泡</h3> 3 <div id="maxid" style="300px;height:300px;background-color:#ddd;"> 4 <div id="minid" style="100px;height:100px;background-color:#f0c;"></div> 5 </div> 6 <script type="text/javascript"> 7 var maxid = document.getElementById("maxid"); 8 var minid = document.getElementById("minid"); 9 //绑定事件 10 maxid.onclick = function(){ 11 alert("大div层被点击！"); 12 } 13 14 15 minid.onclick = function(ent){ 16 var event = ent || window.event; 17 alert("小div层被点击！"); 18 19 //判断浏览器 20 if(document.all){ 21 //alert("IE"); 22 event.cancelBubble = true; //阻止事件冒泡 23 }else{ 24 //alert("非IE"); 25 event.stopPropagation(); //阻止事件冒泡 26 } 27 28 // event.cancelBubble = true; 29 } 30 </script> 31 </body>
1 <body> 2 <h3>JavaScript的HTML DOM实例--form表单</h3> 3 <form action="1.html" name="myform" method="get"> 4 信息：<input type="text" name="uname"/> 5 <input type="submit"/> 6 </form> 7 <br/> 8 <button onclick="document.myform.reset();">重置</button> 9 <button onclick="document.myform.submit();">表单外的提交</button> 10 <button onclick="doSubmit();">改变表单提交</button> 11 12 <script type="text/javascript"> 13 function doSubmit(){ 14 var form = document.myform; 15 form.action = "2.html"; 16 form.method = "post"; 17 form.uname.value="lisi"; 18 form.submit(); 19 } 20 </script> 21 </body>
1 <body> 2 <!-- 注释 --> 3 <h2>JavaScript实例：HTML DOM中的Select对象</h2> 4 <select id="sid1" size="10" multiple> 5 <option value="0">邓丽君</option> 6 <option value="1">张国荣</option> 7 <option value="2">梅艳芳</option> 8 <option value="3">黄家驹</option> 9 <option value="4">迈克尔.杰克逊</option> 10 <option value="5">姚贝娜</option> 11 <option value="6">张雨生</option> 12 </select> 13 <div> 14 <button onclick="doMove('sid1','sid2')">>></button> 15 <br/><br/><br/><br/> 16 <button onclick="doMove('sid2','sid1')"><<</button> 17 </div> 18 <select id="sid2" size="10" multiple></select> 19 <script type="text/javascript"> 20 //执行下拉项的移动操作 21 function doMove(d1,d2){ 22 //获取对应的下拉框 23 var select1 = document.getElementById(d1); 24 var select2 = document.getElementById(d2); 25 //获取第一个下拉框中的所有下拉项 26 var list = select1.options; 27 //遍历并判断 28 for(var i=0;i<list.length;i++){ 29 //判断是否选中 30 if(list[i].selected){ 31 list[i].selected = false; //取消选中 32 var ob = list[i]; 33 select1.remove(i); 34 select2.add(ob); 35 i--; 36 } 37 } 38 } 39 40 41 </script> 42 43 </body>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>JavaScript实例</title> 6 <style> 7 select,option,div,button{margin:0px;padding:0px;} 8 #lid,#rid,div{ 9 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>JavaScript实例:HTML 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 var tab = document.getElementById("tid"); 70 tab.deleteRow(bt.parentNode.parentNode.rowIndex); 71 } 72 73 //执行添加 74 function doAdd(){ 75 //获取表单信息 76 var sno = document.myform.sno.value; 77 var name = document.myform.name.value; 78 var sex = document.myform.sex.value; 79 var age = document.myform.age.value; 80 81 //获取表格并申请添加一行 82 var row = document.getElementById("tid").insertRow(); 83 //为当前行添加一个个字段 84 row.insertCell(0).innerHTML = sno; 85 row.insertCell(1).innerHTML = name; 86 row.insertCell(2).innerHTML = sex; 87 row.insertCell(3).innerHTML = age; 88 row.insertCell(4).innerHTML = '<button onclick="dodel(this)">删除</button>'; 89 90 //当前表单清空 91 document.myform.reset(); 92 93 return false; 94 } 95 </script> 96 </body> 97 </html>