html+dom+深入,HTML DOM学习------深入了解

以下代码为遍历文档树：

html>

test1

123

var

test = document.getElementsByTagName("html")[0];

console.log(test.nodeName+" "+test.nodeType+" "+test.nodeValue);

console.log(test.firstChild.nodeName+" "+test.firstChild.nodeType+" "+test.firstChild.nodeValue);

console.log(test.lastChild.nodeName+" "+test.lastChild.nodeType+" "+test.lastChild.nodeValue);

var

test1 = test.firstChild.firstChild;

console.log(test1.nodeName+" "+test1.nodeType+" "+test1.nodeValue);

console.log(test1.nextSibling.nodeName+" "+test1.nextSibling.nodeType+" "+test1.nextSibling.nodeValue);

var

test2 = test.firstChild.lastChild;

console.log(test2.nodeName+" "+test2.nodeType+" "+test2.nodeValue);

console.log(test2.previousSibling.nodeName+" "+test2.previousSibling.nodeType+" "+test2.previousSibling.nodeValue);

var

test3 = test.previousSibling;

console.log(test3.nodeName+" "+test3.nodeType+" "+test3.nodeValue);

var

test4 = test.firstChild.nextSibling.nextSibling;

console.log(test4.nodeName+" "+test4.nodeType+" "+test4.nodeValue);

var

test5 = test.lastChild.firstChild;

console.log(test5.nodeName+" "+test5.nodeType+" "+test5.nodeValue);

console.log(test5.nextSibling.nodeName+" "+test5.nextSibling.nodeType+" "+test5.nextSibling.nodeValue);

运行结果：

注：在上述文档中，节点的firstChild都是

，lastChild都是

如果有,那么html的nextSibling是DOCTYPE节点。

注：在上述文档中，

节点的firstChild和lastChild不是,

而是一个换行符，是一个文本节点。

如果写作

123，那么head的firstChild和lastChild都是

对于其他标签也一样，所以要注意标签后有换行时，

他的firstChild应该是一个nameValue为'\n'的文本节点。

对于节点的操作：

创建节点：createElement()：创建一个元素

createTextNode()：创建一个文本节点

添加节点：obj.appendChild(newChild)：为某一obj节点添加一个子节点newChild

var

obj = document.getElementsByTagName("p")[0];

var

newChild = document.createElement("strong");

var

newChildTxt = document.createTextNode("new node:");

newChild.appendChild(newChildTxt);

obj.appendChild(newChild);

扩展：添加多个节点，使用循环

var

textArray = ["new node1\n","new node2\n","new node3\n","new node4\n","new node5\n"];

for(var i=0;i

var

newChild = document.createElement("pre");

var

newChildTxt = document.createTextNode(textArray[i]);

newChild.appendChild(newChildTxt);

obj.appendChild(newChild);

}

问题：

appendChild()工作机制：每添加一个新的节点，都会刷新页面，这样会是浏览器显得非常缓慢。

解决方案：

使用creatDocmentFragment()方法：创建文件碎片节点。

使用该方法可以只刷新一次界面动态添加多个节点。

示例：

var

textArray = ["new node1\n","new node2\n","new node3\n","new node4\n","new node5\n"];

var

temp = document.createDocumentFragment();

for(var i=0;i

var

newChild = document.createElement("pre");

var

newChildTxt = document.createTextNode(textArray[i]);

newChild.appendChild(newChildTxt);

temp.appendChild(newChild);

}

obj.appendChild(temp);

插入节点：insertBefore()：在某个节点之前插入一个节点

语法：obj.parentNode.insertBefore(newChild,obj);

示例：

var

obj = document.getElementsByTagName("p")[0];

var

newChild = document.createElement("h1");

var

newChildTxt = document.createTextNode("new node:

");

newChild.appendChild(newChildTxt);

if(obj.parentNode){

obj.parentNode.insertBefore(newChild,obj);

}

复制节点：cloneNode()

深度复制：复制当前节点及其所有子节点。

简单复制：只复制当前节点。

语法：obj.cloneNode(deep);

deep取true，是深度复制，deep取false，是简单复制。

删除节点：removeChild()

语法：obj.removeChild(objChild);(其中被删除的节点应为obj的子节点)

示例：(用hasChildNodes()来判断子节点是否存在)

var

obj = document.getElementById("di");

function removeNode(){

if(obj.hasChildNodes()){

obj.removeChild(obj.lastChild);

}

}

替换节点：replaceChild()

语法：obj.replaceChild(newNode,oldNode);其中obj为oldNode的父节点。

示例：

var

obj = document.getElementsByTagName("p")[0];

var

newNode = document.createElement("h1");

var

newNodeTxt = document.createTextNode("this is a replace node");

newNode.appendChild(newNodeTxt);

obj.parentNode.replaceChild(newNode,obj);

另一种获取网页对象的方法：DHTML对象模型方法。

通过innerHTML，innerText，outerHTML，outerText属性读取和修改HTML元素内容。

注：(innerText，outerHTML，outerText属性，只有IE支持)

innerText只能声明文本内容；

outerHTML和outerText与innerHTML和innerText的不同之处：

前者会替换当前元素，后者替换当前元素中的内容。