javascript--HTML DOM常用元素对象
二，Select：访问select元素
属性：.selectedIndex 获取select中当前选中项的下标
.options 获取select中所有的option元素 返回值为数组
.options.length 获取option的长度 将其赋值为0 等同于删除所有option
.value 当前选中项的值（当选项中有value属性时 获得value属性值 若不存在value值则等同于获取innerHTML值）
方法：add() 在select中添加option
remove(i) 删除select中下标为i的option
事件：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位置的行
.rows[i] 获取下标为i的行 获取所有行.rows 返回值为数组
5.插入、删除、获取 （单元格 td）
tr.insertCell(i) 在某一行中下标为i的位置插入一个单元格,若不写下标 表示在末尾追加一个单元格
tr.deleteCell(i) 删除某一行中下标为i的单元格
tr.cells[i] 获取下标为i的单元格 获取所有单元格 tr.cells 返回值为数组
通过这种方式构造表格 无法在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进行访问
获取表单中元素：form.elements[i/name/id] form.elements 得到表单所有元素 返回值为数组
元素有name属性时 可直接 from.name属性值获取元素
获取元素个数：form.length
手动提交表单：form.submit() 和普通button搭配使用
事件：onsubmit() 表单提交前自动触发
<!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>
