您的位置：首页 > 编程语言 > Java开发

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

2017-09-01 17:19 603 查看 
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航