(5)通过节点的层次关系获取节点对象:增删改查节点
通过节点的层次关系获取节点对象
关系:
1,父节点:parentNode:对应一个节点对象
2,子节点:childNodes:对应一个节点集合
3,兄弟节点
上一个兄弟节点:previouesSibling
下一个兄弟节点:nextSibling
* 除了求父节点,其他节点均要判断nodes[i] instanceof Element,否则会输出空白文本节点#text*
获取子父,用document对象中的方法,在下面的div演示中,除了层次关系,都用的是div中的方法
* 一、获取层次节点*
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
function getNodeByLevel1()
{
//获取页面中的表格节点
var tabNode=document.getElementById("tabid");
//获取父节点,parentNode
var node=tabNode.parentNode;
//alert(node.nodeName);//body
//获取子节点
/* var nodes=tabNode.childNodes;
//alert(nodes.length);
for(var i=0;i<nodes.length;i++)
{
if(nodes[i] instanceof Element)//在现在的浏览器解析中,会将回车符也作为一个节点,nodes[i] instanceof Text,则输出#text
alert(nodes[i].nodeName);
}
*/
//获取上一个兄弟节点
/* var nodebro=tabNode.previousSibling;
if(nodebro instanceof Text)
alert(nodebro.previousSibling.nodeName);//div
else
alert(nodebro.nodeName);
*/
//获取下一个兄弟节点
var nodebro=tabNode.nextSibling;
if(nodebro instanceof Text)
alert(nodebro.nextSibling.nodeName);//dl
else
alert(nodebro.nodeName);
}
</script>
<input type="button" value="通过节点层次获取节点" onclick="getNodeByLevel1()"/>
<div>div区域</div>
<table id="tabid">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
<dl>
<dt>上层项目</dt>
<dt>下层项目</dt>
</dl>
<a href="">一个超链接</a>
</body>
</html>
二、在层次上添加节点:添加文本、按钮或者用innerHTML添加标签
<style type="text/css">
div{
border:#30F 1px solid;
width:200px;
padding:30px;/*内边距文字边界距离*/
margin:10px;/*外边距,即不同的div之间的距离*/
}
div#div_1/*id选择器,*/
{
background-color:#93F;
}
</style>
</head>
<body>
<script type="text/javascript">
//创建并添加节点
//需求:在div_1节点中添加一个文本节点
function crtAndAdd()
{
//1,创建节点,使用document中的createTextNode方法
var oTextNode=document.createTextNode("创建一个新文本节点");
//2,获取div_1节点
var oDivNode=document.getElementById("div_1");
//3,将文本节点添加到div_1中,用div中的appendChild方法
oDivNode.appendChild(oTextNode);
}
function crtAndAdd2()
{
//需求:在div_1中创建并添加一个按钮节点
//创建一个按钮节点,用document中的createElement元素
//1,创建一个按钮节点,要先创建input标签节点,再添加属性为按钮
var oButNode=document.createElement("input");
oButNode.type="button";
oButNode.value="一个新按钮";
//2,获取div_1节点
var oDivNode=document.getElementById("div_1");
//3,将按钮添加到div_1节点中,用div中的appendChild方法
oDivNode.appendChild(oButNode);
}
//通过另一种方式添加到div_1中
function crtAndAdd3()
{
//使用容器型标签中的一个属性:innerHTML,这个属性可以设置html文本
//1,获取div_1节点
var oDivNode=document.getElementById("div_1");
oDivNode.innerHTML="<input type='button' value='有个按钮'/>";
//oDivNode.innerHTML="<a href='http://www.sina.com.cn'>有个超链接</a>";
}
</script>
<input type="button" value="创建并添加节点" onclick="crtAndAdd3()"/>
<hr/>
<div id="div_1">
</div>
三、删除节点
<style type="text/css">
div{
border:#30F 1px solid;
width:200px;
padding:30px;/*内边距文字边界距离*/
margin:10px;/*外边距,即不同的div之间的距离*/
}
div#div_2
{
background-color:#9F3;
}
</style>
</head>
<body>
function delNode()
{
//需求:删除div_2节点,
//1,获取节点
var oDivNode=document.getElementById("div_2");
//用div中的removeNode方法,删除节点
oDivNode.removeNode(true);//传true,能够删除子之后的所有元素,较少用
//一般用removeChild方法,删除子节点
//获取div_2的父节点,然后再用父节点的removeChild将div_2删除
oDivNode.parentNode.removeChild(oDivNode);
}
</script>
<input type="button" value="删除节点" onclick="delNode()"/>
<hr/>
<div id="div_2">
好好学习,天天向上!
</div>
</body>
</html>
四、替换和克隆节点
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
border:#30F 1px solid;
width:200px;
padding:30px;/*内边距文字边界距离*/
margin:10px;/*外边距,即不同的div之间的距离*/
}
div#div_1/*id选择器,*/
{
background-color:#93F;
}
div#div_3
{
background-color:#630;
}
</style>
</head>
<body>
<script type="text/javascript">
//用div_3节点替换div_1节点
function updateNode()
{
/*获取div_1,div_3
* 使用replaceNode进行替换
*/
var oDivNode_1=document.getElementById("div_1");
var oDivNode_3=document.getElementById("div_3");
oDivNode_1.replaceNode(oDivNode_3);//用div_3替换div_1
//但不建议用replaceNode方法,建议用replaceChild方法
//1,获取div_1的父节点
var oDivNode=document.getElementById(oDivNode_1);
//2,用replaceChild方法进行替换
oDivNode.parentNode.replaceChild(oDivNode_3,oDivNode_1);//div_3的原位置删除
}
function updateNode()
{
//克隆div_3
var oDivNode=document.getElementById("div_3");
var oDivNodeNew=oDivNode.cloneNode(true);
var oDivNode_1=document.getElementById("div_1");
oDivNode_1.parentNode.replaceChild(oDivNodeNew,oDivNode_1);
}
</script>
<input type="button" value="创建并添加节点" onclick="crtAndAdd3()"/>
<input type="button" value="删除节点" onclick="delNode()"/>
<input type="button" value="修改节点" onclick="updateNode()"/>
<input type="button" value="克隆节点" onclick="updateNode2()"/>
<hr/>
<div id="div_1">
</div>
<div id="div_2">
好好学习,天天向上!
</div>
<div id="div_3">
div区域演示文字
</div>
<div id="div_4">
节点的增删改查
</div>
</body>
</html>