js DOM

function dom(){
var oP = document.createElement("div");
    var oText = document.createTextNode("Hello World!");
    oP.appendChild(oText);
   
//    大部分情况下，HTML DOM元素中包含的所有特性都是可作为属性。
//假设有如下图像元素：
//<img src = "mypicture.jpg" border=0 />
//如果要使用核心的DOM来获取和设置src和border特性，那么要用getAttribute()和setAttribute()方法：
//alert(oImg.getAttribute("src"));
//alert(oImg.getAttribute("border"));
//oImg.setAttribute("src","mypicture2.jpg");
//oImg.setAttribute("border",1);
//然而，使用HTML DOM，可以使用同样名称的属性来获取和设置这些值：
//alert(oImg.src);
//alert(oImg.border);
//oImg.src="mypicture2.jpg";
//oImg.border ="1";
//唯一的特性名和属性名不一样的特例是class属性，它是用来指定应用于某个元素的一个CSS类，因为class在ECMAScript中是一个保留字，在javascript中，它不能被作为变量名、属性名或都函数名。于是，相应的属性名就变成了className;
//注：IE在setAttribute()上有很大的问题，最好尽可能使用属性。

//  oP.setAttribute("id","sss");//使用特性
    oP.id="fff";//使用属性
   
    document.body.appendChild(oP);
   
    var oOldP = document.getElementsByTagName("div")[0];
// alert(oOldP);
// oOldP.parentNode.removeChild(oOldP);

var oHtml = document.documentElement;
// alert(oHtml.nodeType);


// 当要向document添加大量数据时，如果逐个添加这些变动，这个过程有可能会十分缓慢。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中，假如想创建十个新段落.
// var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];
//                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);
}