DOM常用对象
一、select对象
HEML中的下拉列表
属性：
1.options 获得当前select下所有option
2.options[i] 获得当前select下i位置的option
3.selectedIndex 获得当前选中的option的下标
4.size 设置或返回下拉列表中的可见行数。
5.length 返回下拉列表中的选项数目。
6.multiple 设置或返回是否选择多个项目。
7.id 设置或返回下拉列表的 id。
8.name 设置或返回下拉列表的名称。
方法：
1.add(新option对象) 向下拉列表添加一个选项。
2.blur() 从下拉列表移开焦点。
3.remove(index) 从下拉列表中删除一个选项。
时间：
1.onchange 当改变选择时调用的事件句柄。
二、option对象
HTML 表单中下拉列表中的一个选项。
创建：var newOpt=new Option(innerHTML,value);//创建option对象同时，设置对象的innerHTML和value属性
一句话：创建，设置，追加: select.add(new Option(innerHTML,value));
属性：
1.index 获取当前option的下标位置，专用于删除
2.selected 设置或返回 selected 属性的值。true false
示例：联动菜单
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>联动菜单</title> 5 <meta charset="utf-8" /> 6 <script> 7 /*使用 HTML DOM 的方式实现联动菜单*/ 8 var categories=[ 9 {"id":10,"name":'男装',"children":[ 10 {"id":101,"name":'正装'}, 11 {"id":102,"name":'T恤'}, 12 {"id":103,"name":'裤衩'} 13 ]}, 14 {"id":20,"name":'女装',"children":[ 15 {"id":201,"name":'短裙'}, 16 {"id":202,"name":'连衣裙'}, 17 {"id":203,"name":'裤子',"children":[ 18 {"id":2031,"name":'长裤'}, 19 {"id":2031,"name":'九分裤'}, 20 {"id":2031,"name":'七分裤'} 21 ]}, 22 ]}, 23 {"id":30,"name":'童装',"children":[ 24 {"id":301,"name":'帽子'}, 25 {"id":302,"name":'套装',"children":[ 26 {"id":3021,"name":"0-3岁"}, 27 {"id":3021,"name":"3-6岁"}, 28 {"id":3021,"name":"6-9岁"}, 29 {"id":3021,"name":"9-12岁"} 30 ]}, 31 {"id":303,"name":'手套'} 32 ]} 33 ]; 34 35 //专门遍历一级分类 data保存当前同级分类的数组 36 function loadData(data){ 37 //创建一个select对象 38 //在select对象中追加一个新option，内容为请选择"-请选择-",值为0 39 //遍历data中每个类别对象 40 // 每遍历一个，就要在select中追加一个option，内容是当前对象的name属性值为当前对象的id属性 41 // 42 var select=document.createElement("select"); 43 select.add(new Option("-请选择-",0)); 44 for (var key in data) 45 { 46 select.add(new Option(data[key].name,data[key].id)); 47 } 48 //为新创建的select对象，添加onchange时间 49 select.onchange=function(){ 50 //this-->select 51 52 //将当前select后的元素都删除 53 var parent=this.parentNode; 54 while(parent.lastChild!=this){ 55 parent.removeChild(parent.lastChild); 56 } 57 58 /* 59 获得和选中项位置对应的类别子对象 60 */ 61 var category=data[this.selectedIndex-1]; 62 if(category!=undefined&&category.children){ 63 loadData(category.children); 64 } 65 } 66 document.querySelector("#category").appendChild(select); 67 68 } 69 70 window.onload=function(){ 71 loadData(categories); 72 } 73 74 </script> 75 </head> 76 <body> 77 <div id="category"></div> 78 </body> 79 </html>
三、table对象、tableRow对象、tableCell对象
table对象
属性：
1.tHead 返回表格的 THead 对象。如果不存在该元素，则为 null。
2.tFoot 返回表格的 TFoot 对象。如果不存在该元素，则为 null。
3.tBodies 返回包含表格中所有 tbody 的一个数组。
4.rows 获得表中所有行对象; rows[i] 获得表中小标为i的一个行对象;
5.width 设置或返回表格的宽度。
6.border 设置或返回表格边框的宽度。
方法：
1.insertRow(rowIndex) 用于在表格中的指定位置插入一个新行。不写或-1为追加到最后一行
2.deleteRow(rowIndex) 从表格删除一行。
3.createTHead() 在表格中创建一个空的 tHead 元素; deleteTHead() 从表格删除 tHead 元素及其内容。
4.createTFoot() 在表格中创建一个空的 tFoot 元素; deleteTFoot() 从表格删除 tFoot 元素及其内容。
tableRow对象 代表table对象中的某一个tr对象
属性：
1.cells: 当前行中所有td对象
2.cells[i]: 获得当前行中下标为i的td
3.rowIndex: 当前行的下标位置，专用于删除行
方法：
1.var newCell=insertCell(index)
核心DOM：var td=document.createElement("td");tr.appendChild(td);
2.deleteCell(index)
tableCell对象
属性:cellIndex
示例：动态操作表格
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>动态操作表格</title> 5 <meta charset="utf-8" /> 6 <style> 7 table{width:500px; border-collapse:collapse; 8 text-align:center; 9 } 10 th,td{border:1px solid #ccc} 11 </style> 12 <script> 13 var data=[ 14 {"id":1001,"name":'可口可乐',"price":2.5,"count":3000}, 15 {"id":1003,"name":'百事可乐',"price":2.5,"count":5000}, 16 {"id":1011,"name":'非常可乐',"price":2.3,"count":1000} 17 ]; 18 window.onload=function(){ 19 var tbody= 20 document.querySelector("#data table tbody"); 21 22 //遍历data数组中每个商品对象 23 for(var i=0;i<data.length;i++){ 24 // 每遍历一个对象，就追加一个新行tr 25 var tr=tbody.insertRow(); 26 // 遍历当前对象中每个属性 27 for(var key in data[i]){ 28 // 每遍历一个，就在tr中新增一个td 29 var td=tr.insertCell(); 30 // 将td的内容设置为当前对象的当前属性的值 31 // 如果当前属性名为"price" 32 // 则前加"¥",再toFixed(2) 33 td.innerHTML= 34 key=="price"?"¥"+data[i][key].toFixed(2): 35 data[i][key]; 36 } 37 //遍历完当前对象所有属性后，添加"删除按钮列" 38 //Step1: 向tr中追加新td 39 var td=tr.insertCell(4); 40 //Step2: 创建button元素对象btn 41 var btn=document.createElement("button"); 42 //Step3: 修改btn的内容为"删除" 43 btn.innerHTML="删除"; 44 //Step4: 设置btn的onclick为"删除函数对象" 45 btn.onclick=function(){ 46 var tr=this.parentNode //td 47 .parentNode; //tr 48 //Step1: 获得正在删除商品的名称，pname 49 // (获得tr中下标为1的格中的内容) 50 var pname=tr.cells[1].innerHTML; 51 //Step2: 弹出确认框:"是否继续删除"+pname+"吗？" 52 // 如果用户选择确认，才删除当前行 53 if(confirm( 54 "是否继续删除 "+pname+" 吗？")){ 55 tr.parentNode.removeChild(tr); 56 } 57 }; 58 //自动调用btn.onclick(); this-->当前btn 59 //Step5: 在td下追加btn 60 td.appendChild(btn); 61 } 62 } 63 </script> 64 </head> 65 <body> 66 <div id="data"> 67 <table> 68 <thead> 69 <tr> 70 <th>编号</th> 71 <th>名称</th> 72 <th>单价</th> 73 <th>数量</th> 74 <th>操作</th> 75 </tr> 76 </thead> 77 <tbody> 78 79 </tbody> 80 </table> 81 </div> 82 </body> 83 </html>
四、Form对象
1.查找form document.forms[序号|name]
2.数据采集的元素 document.forms[序号|name].elements[序号|name]
属性：
1.elements[] 包含表单中所有元素的数组。
2.method 设置或返回将数据发送到服务器的 HTTP 方法。
事件：
1.reset() 把表单的所有输入元素重置为它们的默认值。
2.submit 提交表单。
事件句柄：
1.onreset 在重置表单元素之前调用。
2.onsubmit 在提交表单之前调用。
示例：表单验证
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>实现带样式的表单验证 6 </title> 7 <link rel="Stylesheet" href="css/3_2.css" /> 8 <script src="js/3_2.js"></script> 9 </head> 10 <body> 11 <form> 12 <h2>增加管理员</h2> 13 <table> 14 <tr> 15 <td>姓名：</td> 16 <td> 17 <input name="userName"/> 18 <span>*</span> 19 </td> 20 <td> 21 <div class="vali_Info"> 22 10个字符以内的字母、数字和下划线的组合 23 </div> 24 </td> 25 </tr> 26 <tr> 27 <td>密码：</td> 28 <td> 29 <input type="password" name="pwd"/> 30 <span>*</span> 31 </td> 32 <td> 33 <div class="vali_Info">6位数字</div> 34 </td> 35 </tr> 36 <tr> 37 <td></td> 38 <td colspan="2"> 39 <input type="submit" value="保存"/> 40 <input type="reset" value="重填"/> 41 </td> 42 </tr> 43 </table> 44 </form> 45 </body> 46 </html>
1 table{width:700px} 2 /*父元素下的第1个，第n个，最后一个td子元素*/ 3 td:first-child{width:60px} 4 /*IE不支持nth-child*/ 5 td:nth-child(2){width:200px} 6 /*IE*/ 7 td:first-child+td{width:200px} 8 /*IE不支持--可以靠总宽度来调节 9 td:last-child{width:340px}*/ 10 td span{color:red} 11 12 .vali_Info{/* 页面初始，验证消息不显示 */ 13 display:none; 14 } 15 .txt_focus{/*只要文本框获得焦点时，给文本框穿*/ 16 border-top:2px solid black; 17 border-left:2px solid black; 18 } 19 20 .vali_success,.vali_fail{ 21 background-repeat:no-repeat; 22 background-position:left center; 23 display:block; 24 } 25 /* 验证消息：验证通过时div的样式 */ 26 .vali_success{ 27 background-image:url("../images/ok.png"); 28 padding-left:20px; 29 width:0px;height:20px; 30 overflow:hidden; 31 } 32 /* 验证消息：验证失败时div的样式 */ 33 .vali_fail{ 34 background-image:url("../images/warning.png"); 35 border:1px solid red; 36 background-color:#ddd; 37 color:Red; 38 padding-left:30px; 39 }
1 window.$=HTMLElement.prototype.$=function(selector){ 2 return (this==window?document:this).querySelectorAll(selector); 3 } 4 /*当文本框获得焦点时： 5 给当前文本框穿txt_focus 6 同时找到旁边div，脱掉衣服*/ 7 window.onload=function(){ 8 var form=document.forms[0];//找到第1个form对象 9 //找到姓名和密码文本框对象 10 var txtName=form.elements["userName"]; 11 var txtPwd=form.elements["pwd"]; 12 /*为form绑定提交事件*/ 13 form.onsubmit=function(){ 14 //依次调用每个文本框的验证方法 15 //只有所有验证都返回true，结果才为true 16 //只要有一个验证失败(返回false)，就返回false 17 // 取消事件 18 var r=true; 19 //找到姓名文本框，调用文本框的onblur方法 20 r=txtName.onblur()&&txtPwd.onblur(); 21 if(!r){//如果r验证未通过，则取消提交事件 22 var e=window.event||arguments[0]; 23 if(e.preventDefault){ 24 e.preventDefault() //DOM 25 }else{ 26 e.returnValue=false //IE8 27 } 28 } 29 } 30 //为两个文本框对象绑定相同的获得焦点事件处理函数 31 txtName.onfocus=txtPwd.onfocus=function(){ 32 this.className="txt_focus"; 33 //找到this旁边的div，脱掉衣服 34 this.parentNode 35 .parentNode 36 .$("div")[0] 37 .removeAttribute("class"); 38 } 39 txtName.onblur=valiName; 40 //txtName.onblur() this-->txtName 41 txtPwd.onblur=valiPwd; 42 43 } 44 function valiName(){//专门验证姓名文本框的方法 45 //当前文本框对象脱衣服 46 this.className=""; 47 //找到旁边div 48 var div=this.parentNode.parentNode.$("div")[0]; 49 //使用正则表达式验证当前文本框的内容是否正确 50 var r=/^\w{1,10}$/.test(this.value); 51 // 如果正确，给div穿vali_success 52 // 否则穿vali_fail 53 div.className=r?"vali_success":"vali_fail"; 54 //返回正则表达式的验证结果 55 return r; 56 } 57 function valiPwd(){//专门验证密码文本框的方法 58 this.className=""; 59 var div=this.parentNode.parentNode.$("div")[0]; 60 var r=/^\d{6}$/.test(this.value); 61 div.className=r?"vali_success":"vali_fail"; 62 return r; 63 }
