415 DOM
Posted zs0322
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了415 DOM相关的知识，希望对你有一定的参考价值。
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时，只复制当前节点。
节点cloneNode(boolean deep)，当deep为true时，表示复制当前节点以及当前结点的全部后代节点。为false时，只复制当前节点。
DOM添加、删除节点的方法：
appendChild(newNode) 将newNode添加成当前节点的最后一个子节点insertBefore(newNode,refNode) 将refNode节点之前插入newNode节点
replaceChild(newNode,oldNode) 将oldNode节点替换成newNode节点
removeChild(oldNode) 将oldNode子节点删除
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>
以上是关于415 DOM的主要内容，如果未能解决你的问题，请参考以下文章