DOM节点操作与节点之间关系浅析
操作节点
// 向节点的子节点列表的末尾添加新的子节点
someNode.appendChild(newchild)
例子
下面的函数将在文档末尾插入一个新段：
| 代码如下 |
复制代码 |
|
function appendMessage (message) {
var pElement = document.createElement("p");
var messageNode = document.createTextNode(message);
pElement.appendChild(messageNode);
document.body.appendChild(pElement);
}
|
// 在已有的子节点前插入一个新的子节点
someNode.insertBefore(newchild, refchild)
下面的下面片段可创建一个新的 <book> 节点，并在文档中的最后一个 <book> 元素前插入此节点：
| 代码如下 |
复制代码 |
|
//check if the last childnode is an element node
function get_lastchild(n)
{
var x=n.lastChild;
while (x.nodeType!=1)
{
x=x.previousSibling;
}
return x;
}
xmlDoc=loadXMLDoc("books.xml");
var newNode=xmlDoc.createElement("book");
var newTitle=xmlDoc.createElement("title");
var newText=xmlDoc.createTextNode("A Notebook");
newTitle.appendChild(newText);
newNode.appendChild(newTitle);
xmlDoc.documentElement.insertBefore(newNode,get_lastchild(x));
|
// 将某个子节点替换为另一个
someNode.replaceChild(new_node, old_node)
下面的代码片段可替换首个 <book< 元素中的 <title> 元素：
| 代码如下 |
复制代码 |
|
//check if first child node is an element node
function get_firstchild(n)
{
var x=n.firstChild;
while (x.nodeType!=1)
{
x=x.nextSibling;
}
return x;
}
xmlDoc=loadXMLDoc("books.xml");
//create a title element and a text node
var newNode=xmlDoc.createElement("title");
var newText=xmlDoc.createTextNode("Giada's Family Dinners");
//add the text node to the title node,
newNode.appendChild(newText);
//replace the first child node with the new node
var x=xmlDoc.getElementsByTagName("book")[0];
x.replaceChild(newNode,get_firstchild(x));
//output all titles
var y=xmlDoc.getElementsByTagName("title");
for (i=0;i<y.length;i++)
{
document.write(y[i].childNodes[0].nodeValue);
document.write("<br />");
}
输出：
Giada's Family Dinners
Harry Potter
XQuery Kick Start
Learning XML
|
// 从子节点列表中删除某个节点
someNode.removeChild(node)
removeChild函数则可以删除文档中的指定节点。我们仍然使用一个例子来说明该函数的使用方法。
HTML代码
| 代码如下 |
复制代码 |
<div id="test"> <p>我是将要被删除的节点</p></div>实例JavaScript代码
<script type="text/javascript">
function remove(){
var test = document.getElementById("test");
var children = test.childNodes; for(i=0;i<children.length;i++)
{
test.removeChild(children[i]); }
}
</script> |
删除节点示例
我是将要被删除的节点
remove() ，点击这个按钮就会将上面div的子结点全部删除。
从上面的JS代码可以看到，使用removeChild的格式为：
父节点.removeChild(子结点)
removeChild的返回值
removeChild删除节点后会返回被删除节点的引用，这样当我们以后再想重新将它添加到文档中，或者是对它进行其它操作的时候就可以使用这个引用了。例如下面的代码段：
var removed = xxx.removeChild(xxxx);
则removed就是被删除的节点，可以在后面的代码中使用。
创建节点、appendChild,insertBefore，DOM节点查找、增加节点
| 代码如下 |
复制代码 |
|
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
function showpic(pic){
var gallerynode = document.getElementById('gallery');
source = pic.getAttribute('href');
gallerynode.setAttribute('src',source);
var text = pic.getAttribute('title');
//alert(text);
var des = document.getElementById('des');
//alert(des.nodeValue); //返回 null
//alert(des.childNodes[0].nodeValue); //该段才是获取文本节点的值
des.childNodes[0].nodeValue = text;
}
//创建原素，并用appendChild追加到元素后面
function t1(){
var pnode = document.createElement('p');
var text = document.createTextNode('给创建的文本节点增加内容,appendChild方法');
pnode.appendChild(text);
var art = document.getElementById('art');
//alert(art);
art.appendChild(pnode);
}
//利用insertBefore向元素前插入
function t2(){
var pnode = document.createElement('p');
var art = document.getElementById('art');
var zinode = art.children[0];
art.insertBefore(pnode,zinode);//第一个参数表示待插入的，第二个是定位的位置
}
</script>
<style type="text/css">
body{ background:#ccc;}
.container{ width:800px; margin:0 auto;}
*{ margin:0; padding:0;}
ul{ list-style:none; padding:0; margin:0; width:300px; }
ul li{background:#ccc; float:left; margin-right:10px; margin-bottom:10px; margin:30px 10px;}
ul li a{ text-decoration:none; }
#gallery { border:2px solid #ccc; display:block; clear:both;}
#des{ border-bottom:1px solid red; width:400px; text-align:center; margin-bottom:10px; padding-bottom:5px; clear:both; }
#art p{ width:200px; height:100px; background:red; margin-bottom:10px;}
</style>
</head>
<body>
<div class='container'>
<h1>My Image Gallery</h1>
<ul>
<li><a href='images/pic001.jpg' onmouseover="showpic(this)" onclick='return false;' title='变道车全负责' alt='' >01</a></li>
<li><a href='images/pic002.jpg' onmouseover="showpic(this)" onclick='return false;' title='一个萝卜一个坑，一个厕所一人蹲' alt='' >02</a></li>
<li><a href='images/pic003.jpg' onmouseover="showpic(this)" onclick='return false;' title='驶入禁止入段，造成碰撞事故' alt='' >03</a></li>
<li><a href='images/pic004.jpg' onmouseover="showpic(this)" onclick='return false;' title='障碍物路段，避让原则' alt='' >04</a></li>
<li><a href='images/pic005.jpg' onmouseover="showpic(this)" onclick='return false;' title='狭窄山体路段，避让原则' alt='' >05</a></li>
</ul>
<p id='des'>这是一段描述文字</p>
<img id='gallery' src='images/pic001.jpg' alt='' />
<div id='art'>
<p>这是一个默认的P原素</p>
</div>
<p>
<input type='button' value='增加节点' onclick='t1();' />
<input type='button' value='往前面插入节点' onclick='t2();' />
</p>
<script type='text/javascript'>
/*var des = document.getElementById('des');
//alert(document.getElementsByTagName('a')[0].getAttribute('title'));
des.childNodes[0].nodeValue = document.getElementsByTagName('a')[0].getAttribute('title');
function autopic(){
var anode =document.getElementsByTagName('ul')[0].getElementsByTagName('a');
//alert(anode.length);
for(var i =0 , len=anode.length ; i<len ; i++){
showpic(anode[i]);
}
}
autopic();*/
</script>
</div>
</body>
|
节点关系
// 父节点
someNode.parentNode
// 子节点
someNode.childNodes
// 子节点个数
someNode.childNodes.length
// 第一个子节点
someNode.firstChild
// 最后个子节点
someNode.lastChild
// 上一个同胞节点
someNode.previousSibling
// 下一个同胞节点
someNode.nextSibling
// 仅元素节点 IE9 / chrome / firefox
// 子节点个数
someNode.childElementCount
// 第一个子节点
someNode.firstElementChild
// 最后个子节点
someNode.lastElementChild
// 上一个同胞节点
someNode.previousElementSibling
// 下一个同胞节点
someNode.nextElementSibling
补充：网页制作,Dom教程
