JavaScript学习7：DOM基础
DOM的全称为DocumentObject Model，即文档对象模型，是针对HTML和XML文档的API。它描绘了一个具有层次结构的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM是由Netscape及微软公司创始的DHTML发展而来的，但是现在它已经成为了表现和操作页面的真正跨平台的、语言中立的方式。
一．对DOM的理解
DOM中的三个字母，D可以理解为整个Web加载的网页文档；O可以理解为类似window
对象之类的东西，可以调用属性和方法，这里我们所说的是document对象；M可以看做是网页文档的树形结构。
1节点
加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构，DOM将这种树型结构理解为由节点组成。如下图所示
从上图的树型结构我们可以看到，html标签没有父辈，没有兄弟，所以html标签为根标签，head标签是html子标签，而meta和title标签之间是兄弟关系。如果把每个标签当作一个节点的话，那么这些节点组合成了一棵节点树。
2节点种类
DOM中的节点大概分为：元素节点、文本节点和属性节点
二．查找元素
W3提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作，
列举如下：
我们通过getElementById()获取到特定元素节点时，这个节点对象就被我们获取到了，而通过这个节点对象，我们可以访问他的一系列属性。
那么这些属性值如何取出来呢？
我们来看一个简单的小例子：
<span style="font-size:18px;"><body>
<div id="box" title="测试页面" class="cla" style="color:blue;" >
学好JS，前台都不怕！
</div >
</body>
window.onload=function(){
var obj= document.getElementById('box');
alert(obj.tagName);
alert(obj.innerHTML);
alert(obj.id);
alert(obj.title);
alert(obj.style.color);
alert(obj.className);
};</span>
至于其他方法就不再一一说明了，想了解的可以去查相关的资料。
三．DOM节点
1 node节点属性
节点可分为三种，上文提到了，而这些节点又有三个非常有用的属性，分别为：nodeName、
nodeType、和nodeValue。如下是他们的说明：
2层次节点属性
节点的层次结构可以划分为：父节点与子节点、兄弟节点这两种。当我们获取其中一个元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点。
四．节点操作
DOM不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
