一、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>