JavaScript DOM 操作

DOM：Document Object Model（文档对象模型）

DHTML（Dynamic  HTML：动态HTML）

XMLDOM树

一个XMLDOM，其实是一个内存中的树，一个XML数据

中的每一个<>中的第一个单词，就代表着一个节点。

比如：

<rss>

         <channel/>

</rss>

<channel />，就代表channel节点。如果channel这个节点，直接以/>结尾，那么它就不包含子节点。而rss节点，就是一个包含子节点channel的节点。我们也可以说，rss是channel的父节点，channel就是rss的子节点。根节点，就是没有父节点的节点，也就是顶层节点。

documentElement：这样就能够得到一个XML DOM树的根节点，具体到我们想要分析的RSS文档，就是rss那个节点。

childNodes与item

这样就能够得到一个节点的所有子节点，以一个数组的形式返回。

var childs=node.childNodes;

alert(childs.length);

var itemnode=childs.item(0);

上面的childs就是一个JavaScript的数组，我们可以通过childs.length，得

到这个数组的长度。也可以通过item(int)，得到其中的某一个元素，这个元素，

自然也是一个节点。

 

tagName 可以获得一个节点的名称

<rss>的tagName自然就是rss，<title>的tagName，自然就是title。我们的程序就是通过判断tagName，来识别信息的。

outerText(text) 就是一个节点包含的内容

比如：

< author>读书、思考、生活</ author>。

那么这个节点的outerText，就是： 读书、思考、生活。

var nodeitem = nodes.item(i); //获取子节点对象

alert(nodeitem.outerText);   //获取节点的文本        

 

setAttribute/ getAttribute设置/获取节点的属性值

如：

setAttribute("属性名","值")

 

var obj = document.getElementById("img");

obj.setAttribute("src","图片路径");

 

getAttribute("属性名")：获取属性的值

 

createElement(tagname) 创建标签元素

如：

var op = document..createElement("p"); //创建一个P标签:<p></p>

 

createTextNode() 创建文本节点

如：

var otext = document.createTextNode("Hello World");

 

appendChild() 把文本节点加入到元素中

每种节点类型都有这个方法

如：

var op = document..createElement("p");

var otext = document.createTextNode("Hello World");

op.appendChild(otext);

 

removeChild() 删除一个指定的节点

如：

var op = document.getElementById("p_id");

document.body.removeChild(op);

 

replaceChild() 替换节点

有两个参数：被添加的节点和被替换的节点

如：

var newp = document.createElement("p");

var otext = document.createTextNode("Hello World");

newp.appendChild(otext);

var oldp = document.getElementById("p_id");

document.body.replaceChild(newp,oldp);

 

insertBefore() 插入节点

有两个参数：要添加的节点和插入在哪个节点之前

如：

var newp = document.createElement("p");

var otext = document.createTextNode("Hello World");

newp.appendChild(otext);

var oldp = document.getElementById("p_id");

document.body.insertBefore(newp,oldp);

 

createDocumentFragment() 创建文档碎片节点

一旦把节点添加到document.body(或者它的后代节点)中，页面就会更新并反映出这个变化。

对于少量的更新这是很好的，就像在前面的例子中那样。然而，当要向document添加大量数据时，如果逐个添加这些变动，这个过程有可能会十分缓慢。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中。

如：

var attrText = ["first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth"];

var oFragment = document.createDocumentFragment();

for(var i=0;i<attrText.length;i++){

         var op = document.createElement("p");

         var otext = document.createTextNode("Hello World");

         op.appendChild(otext);

         oFragment.appendChild(op);

}

document.body.appendChild(oFragment);