javascript使用Dom

最新推荐文章于 2022-11-12 10:25:59 发布

湫龙

最新推荐文章于 2022-11-12 10:25:59 发布

阅读量3.2k

点赞数

分类专栏： OA总结

本文链接：https://blog.csdn.net/qiulongtianshi/article/details/13766087

版权

OA总结专栏收录该内容

18 篇文章 1 订阅

订阅专栏

一、什么是DOM？

DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。单纯的Javascript要结合DOM才能做DHTML编程，才能做出漂亮的效果、应用于WEB。这点几乎与其它的语言无异，正如C/C++需要库支持是一样的道理。否则就是单纯的在语法上做研究了。因此，必须要对DOM有一定的认识，才能把Javascript应用于WEB，或你的RIA应用当中，因为DHTML本质上就是操作DOM树。希望你能够把DHTML.chm这本手册也拿上，如果你需要兼容gecko，把gecko的DOM手册也带上。因为API太多，想不起来的接口还可以查这本手册。如果你要测试浏览器是否是支持DOM的，简单的一句就可以判断

<script> 
    var isSupportDOM = !!document.getElementById; //两个取反，这已经在上节中说过了，意思是强制转型  + "支持 DOM！"); 
</script>

二、DOM树

要注意：DOM树的根统一为文档根—document，DOM既然是树状结构，那么他们自然有如下的几种关系:

根结点(document)

父结点(parentNode)

子结点(childNodes)

兄弟结点兄弟结点

例子：
假设网页的HTML如下 ,程序代码 :

<html> 
 <head> 
   <title>never-online's website</title> 
 </head> 
 <body> 
    <div>tutorial of DHTML and javascript programming</div> 
 </body> 
</html>

我们参照树的概念，画出该HTML文档结构的DOM树：
          html
       body head
        div     title
         文本    文本
从上面的图示可以看出
html有两个子结点，而html就是这两个子节点的父结点
head有节点title，title下有一个文本节点
body下有节点div，div下有一个文本节点

三、操作DOM树

假设我要改变上面HTML文档中div结点的文本，如何做?

程序代码

<html> 
<head> 
<title>never-online's website</title> 
<script> 
  function changedivText (strText) { 
    var nodeRoot = document; //这个是根结点 
    var nodeHTML = nodeRoot.childNodes[0]; //这个是html结点 
    var nodeBody = nodeHTML.childNodes[1]; //body结点 
    var nodeDiv = nodeBody.childNodes[0]; //DIV结点 
    var nodeText = nodeDiv.childNodes[0];//文本结点' 
    nodeText.data = strText; //文本节点有data属性，我们可以改变这个属性，也就成功的操作了DOM树中的一个结点了 
} 
</script> 
</head> 
<body> 
<div>tutorial of DHTML and javascript programming</div> 
 <input οnclick="changedivText('change?')" type="button" value="change"/> 
</body> 
</html>

从上面的示例可以看出，我们可以用上面的这种方法操作DOM树上的任一节点。（注：1. 跨域除外，跨域通常是在操作frame上，简单的说，就是两个frame不属于同一域名。2.上面的操作为了演示，采用的方法是从根结点一直到文本结点的遍历，在DOM方法上，有更简洁的方法，这些以后会有更多示例加以说明，下文中也会有介绍）

四、DOM节点

细心些的朋友也许发现了，在上面写的HTML代码时用<>与</>包函起来的就是一个结点，事实上是这样的吗？答案是否定的。下面就是说说节点类型，否则在有的时候是会犯错误的。比如，你把上面的代码放到Mozilla firefox的浏览器里运行一下，就会知道了。DOM中的结点类型比较多，这里写一些在HTML文档中（注：XML也是DOM树结构）常见的几种结点类型。

1、DOCUMENT_NODE （document）文档根结点类型，该枚举型的值是9.

2、ELEMENT_NODE （element）元素结点类型，该枚举型的值是1。上文中的html, body, div这些结点都是属于该类型。

3、TEXT_NODE （text）文本结点类型，该枚举型的值是3。上文中的文本，如：tutorial of DHTML and javascript programming就是属于该类型。（注：一个空格也就可能是一个文本结点）通常更需要注意的是文本结点，有可能一个回车，一个空格都是文本结点。这一点以后会碰到，当然，我们也有办法处理，这里先不要急，以后也会说到的。