DOM访问表单。DOM访问列表框，下拉菜单。DOM访问表格子元素。DOM对HTML元素的增删改操作。DOM添加、删除节点的方法。DOM为下拉菜单（select）添加选项的方式

action	返回该表单的提交地址
elements	返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件。
length	返回表单内表单域的个数
method	返回表单内的method属性，主要有get和post两个值
target	确定提交表单时的结果窗口，主要有_self、_blank、_top等
reset()、submit()	重置表单和确定表单方法,重置提交

在elements返回的数组中访问具体的表单控件语法如下：

.elements[index]	返回该表单中第index个表单控件
.elements[elementName]	返回表单内id或name为elementName的表单控件
.elementName	返回表单内id或name为elementName的表单控件

<form id="myform" action="https://www.baidu.com/" method="get" target="_blank">
<input name="username" type="text" value="张三"><br>
<input name="password" type="text" value="123"><br>
<select name="city">
<option value="shanghai">上海</option>
<option value="beijing" selected="selected">北京</option>
</select><br>
<input type="button" value="获取表单内第一个控件" onclick="get(form.elements[0])">                                        // 获取的三种方法
<input type="button" value="获取表单内第二个控件" onclick="get(form.elements['password'])">
<input type="button" value="获取表单内第三个控件" onclick="get(form.city)">
<input type="button" value="操作表单" onclick="submit()">
</form>

//获取表单元素节点
var form=document.getElementById("myform");
//获取action，method，target，表长
// var actions=form.action;
// var methods=form.method;
// var ta=form.target;
// var chang=form.length;
// alert(actions+"..."+methods+"..."+ta+"..."+chang)

function get(element){
alert(element.value);
}
//重置方法
function resett(){
form.reset();
}
//提交
function submitt(){
form.submit();
}

DOM访问列表框、下拉菜单的常用属性：

form	返回列表框、下拉菜单所在的表单对象
length	返回列表框、下拉菜单的选项个数
options	返回列表框、下拉菜单里所有选项组成的数组
selectedIndex	返回下拉列表中选中选项的索引
type	返回下拉列表的类型，多选的话返回select-multiple，单选返回select-one

使用options[index]返回具体选项所对应的常用属性：

defaultSelected	返回该选项默认是否被选中
index	返回该选项在列表框、下拉菜单中的索引
selected	返回该选项是否被选中
text	返回该选项呈现的文本
value	返回该选项的value属性值

<select name="city" id="city" size="5">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="tianjin">天津</option>
<option value="nabjing">南京</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select><br>
<input type="button" value="第一个城市" onclick="get(i.options[0])">
<input type="button" value="上一个城市" onclick="get(i.options[i.selectedIndex-1])">
<input type="button" value="下一个城市" onclick="get(i.options[i.selectedIndex+1])">
<input type="button" value="最后一个城市" onclick="get(i.options[i.options.length-1])">

 

var i=document.getElementById("city");

function  get(n){

alert(n.text);

}

DOM访问表格子元素的常用属性和方法：

caption	返回表格的标题对象
rows	返回该表格里的所有表格行(数组)

通过rows[index]返回表格指定的行所对应的属性：

cells

返回该表格行内所有的单元格组成的数组

通过cells[index]返回表格指定的列所对应的属性：

cellIndex

返回该单元格在表格行内的索引值

<table id="mytable" border="1">
<caption>甲骨文课程表</caption>
<tr>
<td>HTML</td>
<td>JavaScript</td>
</tr>
<tr>
<td>javaSE</td>
<td>Oracle</td>
</tr>
<tr>
<td>MySQL</td>
<td>Struts2</td>
</tr>
</table>
<input type="button" value="表格标题" onclick="get(i.caption)">
<input type="button" value="第一行、第一格" onclick="get(i.rows[0].cells[0])">
<input type="button" value="第二行、第二格" onclick="get(i.rows[1].cells[1])">
<input type="button" value="第三行、第二格" onclick="get(i.rows[2].cells[1])"><br>
设置指定单元格的值：第<input type="text" id="row" size="2">行，
第<input type="text" id="cell" size="2">列的值为
<input type="text" id="course" size="10">
<input type="button" id="btn_set" value="修改" onClick="updateCell()">

var i=document.getElementById("mytable");
function get(node){
alert(node.innerHTML);
}

function updateCell(){
//获取第一个文本跨的值
var i1=document.getElementById("row").value;
//第二个
var i2=document.getElementById("cell").value;
//第三个
var i3=document.getElementById("course").value;
i.rows[i1-1].cells[i2-1].innerHTML=i3;
}

DOM添加、删除节点的方法：

appendChild(newNode)	将newNode添加成当前节点的最后一个子节点
insertBefore(newNode,refNode)	将refNode节点之前插入newNode节点
replaceChild(newNode,oldNode)	将oldNode节点替换成newNode节点
removeChild(oldNode)	将oldNode子节点删除

<ul id="city">
<li>北京</li>
<li>上海</li>
</ul>
<input type="button" value="创建插入替换节点" onClick="create()">
<input type="button" value="复制节点" onClick="copy()">
<input type="button" value="删除节点" onClick="del()">

var i=document.getElementById("city");//获取ul元素节点
function create(){
var j=document.createElement("li");//创建节点
j.innerHTML="淄博";
//i.appendChild(j);//将j添加到i上
//插入节点，获取最后一个节点
var last=i.getElementsByTagName("li");//获取ul下的所有li组成的数组
var la=last[last.length-1];//获取ul下最后一个元素节点
//i.insertBefore(j,la);//在最后一个元素节点前插入新节点

i.replaceChild(j,la);//替换节点
}
//复制节点
function copy(){
//浅复制,只复制元素节点
var li=i.getElementsByTagName("li");//获取ul下的li节点组成的数组
var zuihou=li[li.length-1];
// var lis=zuihou.cloneNode(false);
// i.appendChild(lis);
//深复制，元素节点以及文本内容
var l=zuihou.cloneNode(true);
i.appendChild(l);
}
function del(){
var j=i.getElementsByTagName("li");
var z=j[j.length-1];//获取最后一个子节点
i.removeChild(z);
}

DOM为下拉菜单（select）添加选项的方式：

new Option(text,value,defaultSelected,selected)

该构造器有4个参数，说明如下：

text	该选项的文本、即该选项所呈现的“内容”
value	选中该选项的值
defaultSelected	设置默认是否显示该选项
selected	设置该选项当前是否被选中

添加创建好的选项至列表框或下拉菜单的方式

直接为<select>的的指定选项赋值

列表框或下拉菜单对象.options[i]=创建好的option对象

删除列表框、下拉菜单的选项的方法

1. 直接使用列表框或下拉菜单对象.remove(index)方法删除指定选项
2. 直接将指定选项赋值为null

列表框或下拉菜单对象.remove(index)或对象.options[index]=null

<body id="test">
<input type="button" value="创建一个城市列表框" onclick="create()">
<input type="button" value="一条条删除列表框的内容" onclick="de()">
<input type="button" value="一次性清空列表框内容" onclick="clear1()">
</body>

//创建select元素节点
var select=document.createElement("select");
//设置select标签的id属性以及size属性
select.id="city";
select.size=3;
function create(){
//循环创建option元素
for(var i=0;i<10;i++){//创建option元素
var option=new Option("选项"+i,i);
//将创建好的option元素添加到ul中
select.options[i]=option;
}
//将select元素添加到body标签中
//获取body元素
var body=document.getElementsByTagName("body")[0];
body.appendChild(select);
}

function de(){
//删除select下的最后一个option
select.remove(select.options.length-1);
}
function clear1(){
//直接让option组成的数组的长度等于0
select.options.length=0;
}