javase36补充(DOM节点的层次关系操作节点节点增删改查)

来源：互联网发布：js隐藏滚动条编辑：程序博客网时间：2024/05/29 12:29

<body><!--通过节点的层次关系获取对象关系1、父节点 parentNode对应一个节点对象2、子节点   childNode 对应一个节点集合3、兄弟节点    上一个兄弟节点 previousSibling    下一个兄弟节点  nextSibling--><script type="text/javascript">function getNodeBy(){    //获取页面中的表格节点    var tabNode = document.getElementById("tabid");    //获取父节点 parentNode    //var node = tabNode.parentNode;    //alert(node.nodeName);//body    //获取子节点 childNodes    //var node = tabNode.childNodes;    //alert(node[1].childNodes[0].nodeName);    //获取兄弟节点    //上一个    var node = tabNode.previousSibling;    alert(node.nodeName);    var node1 = tabNode.nextSibling;    alert(node1.nodeName);//尽量少用兄弟节点 因为在解析的时候会出现浏览器不同 解析不一致 会解析出标签中的空白节点 凑在一起没问题 但是很难看}</script><input type="button" value="通过节点层次关系获取节点" onclick="getNodeBy()"/><table id="tabid">    <tr>        <th>姓名</th>        <th><a href="javascript:void(0)" onclick="sorttab()">年龄</a></th>        <th>地址</th>    </tr>    <tr>        <td>张苏纳</td>        <td>11</td>        <td>天堂</td>    </tr>    <tr>        <td>小白</td>        <td>14</td>        <td>上号</td>    </tr>    <tr>        <td>如果</td>        <td>8</td>        <td>玩玩</td>    </tr>    <tr>        <td>是</td>        <td>18</td>        <td>大岸</td>    </tr></table></body>

<style type="text/css">    div{        border:#009 1px solid;        width:200px;        padding:30px;        margin:10px;    }    #div_1{        background-color:#0F0;    }    #div_2{        background-color:#AABBF0;    }    #div_3{        background-color:#00CCF0;    }    #div_4{        background-color:#00aaF0;    }</style></head><body><script type="text/javascript">//创建并添加节点//在div_1节点添加一个文本节点function creatNode(){    /*        1、创建一个文本节点        2、获取div_1节点        3、将文本节点添加到div_1节点中              */      //1、创建节点 使用document中的createTextNode方法    var oTextNode = document.createTextNode("新的文本");    //2、获取div_1节点    var oDivNode = document.getElementById("div_1");    //3、将文本节点添加到div_1节点中    oDivNode.appendChild(oTextNode);}//在div_1中创建并添加一个按钮节点function createAndAdd2(){    //1、创建一个按钮节点    var oButNode = document.createElement("input");    oButNode.type="button";    oButNode.value="新按钮";    //2、获取div_1节点    var oDivNode = document.getElementById("div_1");    //3、将文本节点添加到div_1节点中    oDivNode.appendChild(oButNode);}//通过另一种方式完成添加节点function createAndAdd3(){    //其实是使用了容器型标签中的一个属性innerHTML    //这个属性可以设置html文本     //、获取div_1节点    var oDivNode = document.getElementById("div_1");    //oDivNode.innerHTML="<input type='button' value='有个按钮'>";//因为是html被解析完就成为一个按钮了    oDivNode.innerHTML="<a href='www.baidu.com'>百度</a>";//单引号。关键}//将div_2节点删除function delNode(){    //1、获取div_2节点    var oDivNode = document.getElementById("div_2");    //2、使用div节点的removeNode方法删除    //oDivNode.removeNode(true);//火狐 dw没反应 ie还能用 不支持 较少用 删掉自己    //一般使用removeChild()方法删除子节点    //获取div_2的父节点 然后再用父节点的removeChild将div_2删除    oDivNode.parentNode.removeChild(oDivNode);}//用div_3节点替换div_1节点function updateNode(){    //思路 获取div_3和div_1    //使用replaceNode进行替换    var oDivNode_1 = document.getElementById("div_1");    var oDivNode_3 = document.getElementById("div_3");    //oDivNode_1.replaceNode(oDivNode_3);谋权篡位 和上一个都是从文档层次 建议从元素层次     //建议使用replaceChild方法    oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);    //下网用div_3替换div_1 并保留div_3节点    //其实就是对div_3进行克隆} function cloneDemo()    {        var oDivNode_1 = document.getElementById("div_1");        var oDivNode_3 = document.getElementById("div_3");        var oCopyDiv_3 = oDivNode_3.cloneNode(true);//true就带一家人一起复制  默认false只有壳        //alert(oCopyDiv_3.nodeName);        oDivNode_1.parentNode.replaceChild(oCopyDiv_3,oDivNode_1);    }   </script><input type="button" value="创建并添加节点" onclick="createAndAdd3()" /><input type="button" value="删除节点" onclick="delNode()" /><input type="button" value="更新节点" onclick="updateNode()" /><input type="button" value="克隆节点" onclick="cloneDemo()" /><div id="div_1">如果</div><div id="div_2">有一天</div><div id="div_3">在人间</div><div id="div_4">和平</div></body>

阅读全文

0 0

javase36补充(DOM节点的层次关系 操作节点 节点增删改查)

javase36补充(DOM节点的层次关系操作节点节点增删改查)