您的位置：首页 > Web前端 > JavaScript

JavaScript学习7：DOM基础

2015-05-31 11:59 531 查看

  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不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript

相关文章推荐

新的分享

章节导航