javaScript DOM操作技术
Posted 漫长学习路
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaScript DOM操作技术相关的知识，希望对你有一定的参考价值。
在一般情况下我们操作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>
创建
最常用到的几个方法是createDocumentFragment()－－创建文档碎片节点
createElement(tagname)－－创建标签名为tagname的元素
createTextNode(text)－－创建包含文本text的文本节点
createElement()－－创建根节点
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> 很原始的创建DOM表格方法，而且没有什么技巧；
还好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
理解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元素的HTMLCollection。由于这个集合是动态的，因此只要有新DIV添加到元素中，这个集合就会得到更加，而与此同时我们的divs.length也会增加，这就意味着我们的i和divs.length永远不会相等;
如果我们想循环创建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这样才能有助于我们以后的开发和成长;
以上是关于javaScript DOM操作技术的主要内容，如果未能解决你的问题，请参考以下文章