JavaScript DOM特性与应用详解(1)(4)

生成与操作Node

◆createAttribute(name) ：创建一个名为name的属性节点。

◆createCDATASection(text) ：创建一个子节点为text的CDATA区。

◆createComment(text) ：创建一个注释内容为text的注释节点。

◆createDocumentFragment() ：创建一个文档片断（fragment）节点。

◆createElement(tagName) ：创建一个名为tagName的元素节点。

◆createTextNode(text) ：创建一个包含text的文本节点。

其中最重要的方法是createElement(),createDocumentFragment(), create TextNode()。

/*使用createElement(),createTextNode(),appendChild()动态添加节点*/    
function createMessage(){     
 var op = document.createElement("p");     
 var oText = document.createTextNode("hello world!");     
 op.appendChild(oText);     
 document.body.appendChild(op);     
}    
/*使用createElement(),createTextNode(),appendChild()动态添加节点*/  
function createMessage(){  
 var op = document.createElement("p");  
 var oText = document.createTextNode("hello world!");  
 op.appendChild(oText);  
 document.body.appendChild(op);  
} 

使用createDocumentFragment()：

//通常做法     
var arrText = ['first', 'second', 'third'];     
for(var i=0; i<arrText.length; i++){     
    var op = document.createElement('p');     
    var oText = document.createTextNode(arrText[i]);     
    op.appendChild(oText);     
    document.body.appendChild(op);     
}     
//使用documentFragment     
var arrText = ['first', 'second', 'third'];     
var oFragment = document.createDocumentFragment();     
for(var i=0; i<arrText.length; i++){     
    var op = document.createElement('p');     
    var oText = document.createTextNode(arrText[i]);     
    op.appendChild(oText);     
    oFragment.appendChild(op);     
}     
document.body.appendChild(oFragment);    
//通常做法  
var arrText = ['first', 'second', 'third'];  
for(var i=0; i<arrText.length; i++){  
 var op = document.createElement('p');  
 var oText = document.createTextNode(arrText[i]);  
 op.appendChild(oText);  
 document.body.appendChild(op);  
}  
//使用documentFragment  
var arrText = ['first', 'second', 'third'];  
var oFragment = document.createDocumentFragment();  
for(var i=0; i<arrText.length; i++){  
 var op = document.createElement('p');  
 var oText = document.createTextNode(arrText[i]);  
 op.appendChild(oText);  
 oFragment.appendChild(op);  
}  
document.body.appendChild(oFragment);   

通过DocumentFragment的方式效率更高。

HTML DOM

使用DOM的核心方法是针对所有XML的，针对HTML DOM有特殊的方法，如：

◆使用DOM core：oImg.setAttribute("src", "picture.gif");

◆使用HTML DOM：oImg.src = "picture.jpg";