<ul> <li>HTML</li> <li>CSS</li> <li>JS</li> </ul> <script> var aLi=document.getElementsByTagName('li'); //获取第二个子节点之后紧跟的节点 var x=aLi[].nextElementSibling; alert(x.innerHTML); //返回：JS //获取第二个子节点之前紧跟的节点 var x=aLi[].previousElementSibling; alert(x.innerHTML); //返回：HTML </script> </body>
4、DOM应用。
DOM最实际的应用就是可以通过JS创建、插入和删除节点。
(1)、创建节点
createElement()方法可创建元素节点。
语法：document.createElement(tagName)
appendChild()方法可在指定节点的末尾插入一个新的子节点，每次都向末尾添加。
语法：父级.appendChild(new node)
实例：创建并添加li元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript实例</title> <script> window.onload=function (){ var oBtn=document.getElementById('btn'); var oUl=document.getElementById('u'); var oTxt=document.getElementById('txt'); //文本框输入提示 oTxt.placeholder='请输入文字创建li元素'; oBtn.onclick=function (){ //创建li元素 var oLi=document.createElement('li'); //创建的li元素的HTML=文本框输入的值 oLi.innerHTML=oTxt.value; //插入到oUl父级下，作为子节点，在每个创建的li末尾插入新创建的li元素 oUl.appendChild(oLi); //父级.appendCild(子节点); }; }; </script> </head> <body> <input type="text"value=""> <input type="button"value="创建li"> <ul></ul> </body> </html>
(2)、插入节点
insertBefore()方法可在已有的子节点前插入一个新的子节点。
语法：父级.insertBefore(new node, node) 第一个参数为要插入的新子节点。第二个参数是原有节点，也就是在谁之前插入。
实例：创建并添加li元素，每个新创建的li元素都插入到之前插入的li元素之前
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript实例</title> <script> window.onload=function (){ var oBtn=document.getElementById('btn'); var oUl=document.getElementById('u'); var oTxt=document.getElementById('txt'); oBtn.onclick=function (){ //创建li元素 var oLi=document.createElement('li'); //获取所有li元素 var aLi=oUl.getElementsByTagName('li'); oLi.innerHTML=oTxt.value; //这里需要注意：页面中本没有li元素，li元素是通过JS创建的 //所以第一个li元素应该添加到父级下最后一个子节点 //然后基于这个节点，将之后再插入的子节点插入到上一个节点之前 //如果li元素本来不存在，则执行else，在父级插入一个子节点。 //如果li元素的个数>，说明已经创建了，则插入到这个子节点之前。 if(aLi.length>){ oUl.insertBefore(oLi,aLi[]); } else{ oUl.appendChild(oLi); } }; }; </script> </head> <body> <input type="text" value=""> <input type="button" value="创建li"> <ul></ul> </body> </html>
(4)、删除节点
removeChild()方法用于删除一个节点
语法：父级.removeChild(node) 参数为要删除的子节点。
实例：简单的表格添加和删除
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript实例</title> <script> window.onload=function (){ var oTab=document.getElementById('tab'); var oName=document.getElementById('user'); var oAge=document.getElementById('age'); var oBtn=document.getElementById('btn'); //设置添加的ID项的值 var id=oTab.tBodies[].rows.length+; oBtn.onclick=function (){ //创建一个tr var oTr=document.createElement('tr'); //创建第一个td（ID项） var oTd=document.createElement('td'); //获取ID，已经删除的ID号，不能再重用。 oTd.innerHTML=id++; //将创建的td放入创建的tr中 oTr.appendChild(oTd); //创建第二个td（姓名项） var oTd = document.createElement('td'); oTd.innerHTML=oName.value; oTr.appendChild(oTd); //创建第三个td（年龄项） var oTd = document.createElement('td'); oTd.innerHTML=oAge.value; oTr.appendChild(oTd); //创建第四个td（操作项） var oTd = document.createElement('td'); oTd.innerHTML='<a href="javascript:;">删除</a>'; oTr.appendChild(oTd); oTd.getElementsByTagName('a')[].onclick=function (){ //删除整行 oTab.tBodies[].removeChild(this.parentNode.parentNode); }; //将创建好的tr放入tbody中 oTab.tBodies[].appendChild(oTr); }; }; </script> </head> <body> 姓名：<inputtype="text"> 年龄：<inputtype="text"> <input type="button" value="添加"> <table> <caption>员工表</caption> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td></td> <td>小白</td> <td></td> <td></td> </tr> <tr> <td></td> <td>小明</td> <td></td> <td></td> </tr> <tr> <td></td> <td>小红</td> <td></td> <td></td> </tr> <tr> <td></td> <td>张三</td> <td></td> <td></td> </tr> <tr> <td></td> <td>李四</td> <td></td> <td></td> </tr> </tbody> </table> </body> </html>