一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

DOM节点操作与节点之间关系浅析

时间:2013-07-01 编辑:简简单单 来源:一聚教程网

操作节点

// 向节点的子节点列表的末尾添加新的子节点
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)

下面的下面片段可创建一个新的 节点,并在文档中的最后一个 元素前插入此节点:

 代码如下 复制代码

//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)

下面的代码片段可替换首个 元素:

 代码如下 复制代码

//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   {
  document.write(y[i].childNodes[0].nodeValue);
  document.write("
");
  }
输出:
Giada's Family Dinners
Harry Potter
XQuery Kick Start
Learning XML

// 从子节点列表中删除某个节点
someNode.removeChild(node)

removeChild函数则可以删除文档中的指定节点。我们仍然使用一个例子来说明该函数的使用方法。

HTML代码

 代码如下 复制代码
 

我是将要被删除的节点

实例JavaScript代码

删除节点示例

我是将要被删除的节点

remove() ,点击这个按钮就会将上面div的子结点全部删除。
从上面的JS代码可以看到,使用removeChild的格式为:

父节点.removeChild(子结点)

removeChild的返回值

removeChild删除节点后会返回被删除节点的引用,这样当我们以后再想重新将它添加到文档中,或者是对它进行其它操作的时候就可以使用这个引用了。例如下面的代码段:

var removed = xxx.removeChild(xxxx);

则removed就是被删除的节点,可以在后面的代码中使用。

创建节点、appendChild,insertBefore,DOM节点查找、增加节点

 代码如下 复制代码


新建网页


words" content="" />

 


 

   


       

My Image Gallery


       

               
  • seover="showpic(this)" onclick='return false;' title='变道车全负责' alt='' >01

  •            
  • 02

  •            
  • 03

  •            
  • 04

  •            
  • 05

  •        

       

这是一段描述文字


       
       

           

这是一个默认的P原素


         
       

       


           
           
       


       
   

节点关系

// 父节点
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

热门栏目