二，Select：访问select元素
属性
.value 当前选中项的值（当选项中有value属性时 获得value属性值 若不存在value值则等同于获取innerHTML值）
事件：onchange 选项发生变化时触发的事件
删除select中最后一个option可以使用：select.remove(select.length-1);
三，option：访问option元素
创建：new Option(text,value) text表示内容 value表示属性
属性：.index 获取当前选项下标
.value
.text/.innerHTML
向select中添加一个option：select.appendChild(new Option(text,value));
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> //创建一个select <select name="sel" id="slct" onchange="onchge(this)"> <option value="1">111</option> <option value="2">222</option> <option value="3">333</option> </select> <script type="text/javascript"> //给定一个onchange事件 function onchge(elem){ // 切换选项输出下标 console.log(elem.selectedIndex); // 输出对应选项value值 console.log(elem.value); } // 获取select元素 通过下标 var select = document.getElementById("slct"); // 输出select内容 console.log(select); // 获取所有option console.log(select.options); // 获取select的长度 console.log(select.length); // 等同于上一种获取长度的方式 console.log(select.options.length) // 在select后添加一个option 并赋值 select.add(new Option("444","4")); </script> </body> </html> 四，table 访问表格元素
1.创建行分组：table.createTHead();
table.createTBody();
table.createTFoot();
2.删除行分组：table.deleteTHead();
TBody无法删除,并且一个table可以包含多个tbody
table.deleteTFoot();
3.获取行分组：table.tHead()
4.插入、删除、获取 (行 tr)
可以在thead、tbody、tfoot中插入行
.insertRow(i) 在下标为i的位置插入一行,若不写下标 表示在末尾追加一行
.deleteRow(i) 删除下标i位置的行
5.插入、删除、获取 （单元格 td）
tr.deleteCell(i) 删除某一行中下标为i的单元格
通过这种方式构造表格 无法在tr中添加th
设置表格样式通过table.style tr.style
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table id="tbl"> </table> <script type="text/javascript"> // 获取table元素 var table = document.getElementById("tbl"); // 设置表格宽度 table.style.width = "300px" // 创建行分组 var thead = table.createTHead(); // 创建行row var tr = thead.insertRow(); // 给行设置style tr.style.width = "100px"; tr.style.height = "50px"; tr.style.backgroundColor = "lightblue"; // 通过循环创建四个创建单元格 for (var i = 0; i <4; i++) { var td = tr.insertCell(); // 分别写入内容 td.innerHTML = i; } // </script> </body> </html> 五，Form 访问表单form元素
获取表单：document.forms[i/name/id] 可以通过下标、name属性值、id进行访问
获取表单中元素：
元素有name属性时 可直接 from.name属性值获取元素
获取元素个数：form.length
手动提交表单：
事件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action="" id="frm"> 用户名：<input type="text" name="ipt1"> 密码：<input type="password" name="ipt2"> <input type="button" name="ipt3" value="提交"> </form> <script type="text/javascript"> // 获取form元素 通过id var form = document.forms["frm"]; // 获取表单所有元素 返回值为数组 var input = form.elements; // 获取单个元素 通过name属性值 var ipt1 = form.ipt1; // 获取单个元素 通过下标 var ipt2 = input[1]; // 给提交按钮绑定事件 form.ipt3.onclick = function(){ if (ipt1.value && ipt2.value) { // 手动提交 只有当条件满足是才会执行提交操作 form.submit(); } } </script> </body> </html>
来源：博客园
作者：你可以这样称呼我
链接：https://www.cnblogs.com/blogzzy/p/11409610.html