以下代码为遍历文档树:html>
test1123
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节点添加一个子节点newChildvar
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的不同之处:
前者会替换当前元素,后者替换当前元素中的内容。