Javascript文档对象模型(DOM)实例分析

/* 得到<img />Elements */
var oImgs = document.getElementsByTagName("img");

/* 得到第一段里所有的<img /> */
var oPs = document.getElementsByTagName("p");
var oImgsInP = oPs[0].getElementsByTagName("img");

还有getElementsByName()，getElementsById();

/* 得到id为"div1"的<div> */
var oDivs = document.getElementsByTagName("div");
var oDiv1 = null;
for(var i=0; i<oDivs.length; i++){
if(oDivs[i].getAttribute("id") == "div1"){
oDiv1 = oDivs[i];break;
}
}

/* 使用document.getElementById() */
var oDiv1 = document.getElementById("div1");

生成与操作Node

createAttribute(name) ：创建一个名为name的属性节点。IE,Mozilla,opera支持，Safari不支持。
createCDATASection(text) ：创建一个子节点为text的CDATA区。Mozilla支持，IE,Opera,Safari不支持。
createComment(text) ：创建一个注释内容为text的注释节点。各浏览器均支持。
createDocumentFragment() ：创建一个文档片断（fragment）节点。各浏览器均支持。
createElement(tagName) ：创建一个名为tagName的元素节点。各浏览器均支持。
createEntityReference(name) ：Creates an entity reference node with the given name。Mozilla 支持。IE,Opera,Safari不支持。
createProcessingInstruction(target, data) ：Creates a PI node with the given target and data。 Mozilla 支持。IE,Opera,Safari不支持。
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);
}

使用removeChild(), replaceChild(), and insertBefore()

/* remove 节点 */
function removeMessage(){
var op = document.body.getElementsByTagName(''p'')[0];
op.parentNode.removeChild(op);
}

/* replace 节点 */
function insertMessage(){
var oNewP = document.createElem

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!