标签：
在一般情况下我们操作DOM都比较简单明了，尤其是jquery出来之后，我们会发现操作DOM变得如此简单，但是也会有许多隐藏的坑，所以有时候操作DOM也并非想象中那么简单；
简单而常用的操作：
document.getElementById() 根据Id获取元素节点
document.getElementsByName() 根据name获取元素节点
document.getElementsByClassName()
根据class获取元素节点
<html>
<head>
<title>createElement() Example</title>
</head>
<body >
<div id="div1">
<p id="p1" class="class1">
我是第一个P</p>
<p name="p2" class="class2">
我是第二个P</p>
</div>
</body>
<script type="text/javascript">
var id=document.getElementById("p1").innerHTML;
alert(id);
var name=document.getElementsByName("p2");
alert(name);
var node = document.getElementsByClassName("class1");
alert(node[0].innerHTML);
</script>
</html>
createTextNode()－－创建textNode节点
appendChild()－－追加节点内容
<html>
<head>
<title>createElement() Example</title>
<script type="text/javascript">
function createMessage() {
var oP = document.createElement("p");
var oText = document.createTextNode("Hello World!");
oP.appendChild(oText);
document.body.appendChild(oP);
}
</script>
</head>
<body onload="createMessage()">
</body>
</html>现在我们的开发中引入脚本一般都是会事先写一个src特性包含外部文件，另一种方式就是整个HTML页面里面包含script代码，这里要说的是另外一种动态脚本，指的是页面加载时不存在，但将来的某一个时刻通过修改DOM动态添加脚本；
function loadScript(url){
var script=document.createElement("script");
script.type="text/javascript";
<span style="white-space:pre"> </span>script.src=url;
<span style="white-space:pre"> </span>document.body.appendChild(script);
<span style="white-space:pre"> </span>}动态样式：
这里要说的动态样式和动态脚本很像，样式也可以通过src指定文件，也可以包含，所以也可以使用我们的动态样式去加载；
function loadCss(url){
var link=document.createElement("link");
link.rel="stylesheet";
link.type="text/css";
link.href=rul;
var head=document.getElementsByTagName("head")[0];
head.appendChild(link);
}
<table>元素是HTML中最复杂的结构之一。要想创建表格，一般都必须涉及表示表格行，单元格，表头等方面的标签。
下面演示一下用DOM来创建HTML表格。
<script type="text/javascript">
var table=document.createElement("table");
table.border=1;
table.width="100%";
//创建tbody
var tbody=document.createElement("tbody");
table.appendChild(tbody);
//创建第一行
var row1=document.createElement("tr");
tbody.appendChild(row1);
var cell_1=document.createElement("td");
cell_1.appendChild(document.createTextNode("cell 1,1"));
row1.appendChild(cell_1);
var cell_2=document.createElement("td");
cell_2.appendChild(document.createTextNode("cell 2,1"));
row1.appendChild(cell_2);
//创建第二行
var row2=document.createElement("tr");
tbody.appendChild(row2);
var cel2_1=document.createElement("td");
cel2_1.appendChild(document.createTextNode("cell 1,2"));
row2.appendChild(cel2_1);
var cel2_2=document.createElement("td");
cel2_2.appendChild(document.createTextNode("cell 2,2"));
row2.appendChild(cel2_2);
//将表格添加到文档主体中
document.body.appendChild(table);
</script> 还好JS提供了HTMLDOM方法
<script type="text/javascript">
Var Table=Document.Createelement("Table");
Table.Border=1;
Table.Width="100%";
//创建tbody
Var Tbody=Document.Createelement("Tbody");
Table.Appendchild(Tbody);
//创建第一行
Tbody.Insertrow(0);
Tbody.Rows[0].Insertcell(0);
Tbody.Rows[0].Cells[0].Appendchild(Document.Createtextnode("Cell 1,1"));
Tbody.Rows[0].Insertcell(1);
Tbody.Rows[0].Cells[1].Appendchild(Document.Createtextnode("Cell 2,1"));
//将表格添加到文档主体
Document.Body.Appendchild(Table);
</script>
理解NodeList及namedNodeMap和HTMLCollection是从整体上透彻理解DOM的关键所在。这三个集合都动态的保存着最新最准确的信息每当文档结构发生变化时，它们都会得到更新，所有NodeList对象都是在访问DOM文档时实时运行的查询。例如下面这段代码会死循环；
<script type="text/javascript">
var divs=document.getElementsByTagName("div"),
i,
div;
for(i=0;i<divs.length;i++){
div=document.createElement("div");
document.body.appendChild(div);
}
</script> 如果我们想循环创建div的话，最好先创建一个临时变量保存div的长度；
<script type="text/javascript">
var divs=document.getElementsByTagName("div"),
i,
leb,
div;
for(i=0,len=divs.length;i<len;i++){
div=document.createElement("div");
document.body.appendChild(div);
}
</script> 1.最基本的节点类型是Node,用于抽象的标示文档中一个独立的部分，所有的其他类型都继承自Node。
2.document类型表示整个文档，是一组分层的根节点。
3.Element节点表示文档中的所有HTML元素或XML元素，可以用来操作这些元素的内容和特性。
4.另外还有一些节点类型，分别表示文本内存，注释，文档类型，CDATA区域和文档片段。
在我们日常的开发中，有很多JS框架供我们选择，比如jquery和angularjs这些都对DOM进行了很好的封装，不过我们还是要有必要去学习一下DOM这样才能有助于我们以后的开发和成长;
标签：
原文地址：http://blog.csdn.net/liaodehong/article/details/51684809
