|
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对象 |
删除列表框、下拉菜单的选项的方法
- 直接使用列表框或下拉菜单对象.remove(index)方法删除指定选项
- 直接将指定选项赋值为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;
}