415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法(点击后弹窗效果以及去掉效果)

时间:2022-08-03 21:39:22

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

form、length、options、selectedindex、type       使用options[index]返回具体选项所对应的常用属性:defaultselected、index、selected、text、value    
DOM访问表格子元素的常用属性和方法
caption、rows   通过rows[index]返回表格指定的行所对应的属性:cells    通过cells[index]返回表格指定的列所对应的属性:cellindex      
DOM创建节点的方法:
document.createElement(Tag),Tag必须是合法的HTML元素   
DOM复制节点的方法:
节点cloneNode(boolean deep),当deep为true时,表示复制当前节点以及当前结点的全部后代节点。为false时,只复制当前节点。    
DOM添加、删除节点的方法:
appendChild(newNode) 将newNode添加成当前节点的最后一个子节点insertBefore(newNode,refNode) 将refNode节点之前插入newNode节点
replaceChild(newNode,oldNode) 将oldNode节点替换成newNode节点
removeChild(oldNode) 将oldNode子节点删除
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>查找列表框、下拉菜单控件</title>
</head>
<body>
<form action="#">
<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="change('0')">
<input type="button" value="上一个城市" onClick="change(s.selectedIndex-1)">
<input type="button" value="下一个城市" onClick="change(s.selectedIndex+1)">
<input type="button" value="最后一个城市" onClick="change(s.length-1)">
</form>
</body>
<script type="text/javascript">
// var f=document.getElementById('city').form;
// alert(f.length);
//获取下拉列表框的select元素对象d的个数
// var s=document.getElementById('city');
// alert(s.length);
/*function first(){
//
var s=document.getElementById('city');
//获取select中的第一个option元素
var o=s.options[0];
//获取option的文本
alert(o.text);
}
function last(){
//获取select元素
var s=document.getElementById('city');
//获取select选中元素的上一个y元素
var o=s.options[s.selectedIndex-1];
//获取option元素中的文本值
alert(o.text);
}
function next(){
//获取select元素
var s=document.getElementById('city');
//获取select选中元素的上一个y元素
var o=s.options[s.selectedIndex+1];
//获取option元素中的文本值
alert(o.text); }
function over(){
//获取select元素
var s=document.getElementById('city');
//获取select选中元素的上一个y元素
var o=s.options[s.length-1];
//获取option元素中的文本值
alert(o.text);}*/ var s=document.getElementById('city');
function change(index){
//获取select元素 //获取select选中元素的上一个y元素
var o=s.options[index];
//获取option元素中的文本值
alert(o.text);}
</script>
</html>
function getcaption(){
//获取表格元素
var tab=document.getElementById("mytable");
//获取标题元素
var cap=tab.caption;
//获取标题中的内容
alert(cap.innerHTML);
}
// 获取row-1行 col-1列的元素
function getCell(row,col){
// 获取表格元素
var tab=document.getElementById("mytable");
var cell=tab.rows[row-1].cells[col-1];
// 获取单元格内容
alert(cell.innerHTML);
}
// 获取row-1行col-1列的元素
function getshow(row,col){
// 获取表格元素
var tab=document.getElementById("mytable");
var cell=tab.rows[row-1].cells[col-1];
// 获取单元格中的内容
alert(cell.innerHTML);
}
function getqf(row,col){
//获取表格元素
var tab = document.getElementById("mytable");
var cell = tab.rows[row-1].cells[col-1];
//获取单元格中的内容
alert(cell.innerHTML);
}
function change(){
//获取用户输入的行的值
var row=document.getElementById("row").value;
//获取用户输入的l列的值
var col=document.getElementById("cell").value;
//获取y用户要修改单元格以后的值
var content=document.getElementById("course").value;
//获取表格对象
var tab=document.getElementById("mytable");
tab.rows[row-1].cells[col-1].innerHTML=content;
}
</script>
</head> <body>
<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="getcaption()">
<input type="button" value="第一行、第一格" onClick="getCell('1','1')">
<input type="button" value="第二行、第二格" onClick="getCell('2','2')">
<input type="button" value="第三行、第二格" onClick="getCell('3','2')"><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="change()" >
</body>
</html>
<title>创建元素</title>
<script type="text/javascript">
/*function create(){
//获取ul元素
var u=document.getElementById("city");
//创建新的节点li
var l=document.createElement("li");
//给li设置内容
l.innerHTML="广州";
//将li添加到ul元素中
u.appendChild(l);
}*/ function create(){
//创建新的节点li
var l=document.createElement("li");
//给li设置内容
l.innerHTML="淄博";
//获取ul元素
var u=document.getElementById("city");
//在ul的第一个元素前插入li元素
u.insertBefore(l,u.firstChild.nextElementSibling);} function create(){
//创建新的节点li
var l=document.createElement("li");
//给li设置内容
l.innerHTML="高新区";
//获取ul元素
var u=document.getElementById("city");
//将北京替换成南京
u.replaceChild(l,u.firstChild.nextElementSibling);} function copy(){
u=document.getElementById("city");
//获取要复制 的节点
var oldli=u.firstChild.nextElementSibling;
//复制节点
var newli=oldli.cloneNode(true);
//将复制d的节点添加到ul里
u.appendChild(newli); }
function del(){
//获取ul元素
var u=document.getElementById("city");
//获取要删除的子元素
var oldli=u.lastChild.previousElementSibling;
//删除上海
u.removeChild(oldli);
} </script>
</head> <body>
<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()">
</body>
</html>
<title>查找表单控件</title>
<script type="text/javascript">
function create1(){
//创建select元素
var sel=document.createElement("select");
//给select标签设置属性
sel.id="city";
sel.size="5";
//获取body元素
var bo=document.getElementById("test"); //创建10个option元素
for(var i=0;i<10;i++){
var op=new Option("选项"+i,i);
//列表框或下拉菜单对象.option[i]=创建好的option对象
sel.options[i]=op;
}
//将select元素添加到body标签中
bo.appendChild(sel);
}
</script>
</head>
<body id="test">
<input type="button" value="创建一个城市列表框" onClick="create1()">
<input type="button" value="一条条删除列表框的内容">
<input type="button" value="一次性清空列表框内容">
</body>
</html>