繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript & DHTML DOM基础和基本API
- Javascript
- 自己开发Dojo的建议框架
- js每次Title显示不同的名言
- 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
- 无限级别的菜单（侧拉菜单）
- 点选TOP后并不是直接跳到页顶的，而是滚动上去
- js下拉菜单中自动信息轮换播放
- 英文首字母全大写的js实现脚本
- 实例区别onClick和onDBClick两事件方法
- 改变文本框字体颜色的js脚本
- js星空效果代码
- 判断li是否有样式的js代码
- 文本框点击时文字消失，失去焦点时文字出现
- 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开
- 右下角弹出窗口效果代码
- JS控制对象移动效果
- 验证用户是否修改过页面的数据的实现方法
- Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
- 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
- EXT富客户端后台管理系统 初步代码
- 不同浏览器javascript变量作用域的处理方法
Javascript & DHTML DOM基础和基本API
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 357 ::
收藏到网摘: n/a
DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。 一、什么是DOM？
什么叫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的，简单的一句就可以判断
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
二、DOM树
要注意：DOM树的根统一为文档根—document，DOM既然是树状结构，那么他们自然有如下的几种关系:
根结点(document)
父结点(parentNode)
子结点(childNodes)
兄弟结点 兄弟结点
(sibling) (sibling)
例子：
假设网页的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下有一个文本节点
doby下有节点div，div下有一个文本节点
三、操作DOM树
开篇已经说过，DHTML本质就是操作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 onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>
从上面的示例可以看出，我们可以用上面的这种方法操作DOM树上的任一节点。（注：1. 跨域除外，跨域通常是在操作frame上，简单的说，就是两个frame不属于同一域名。2.上面的操作为了演示，采用的方法是从根结点一直到文本结点的遍历，在DOM方法上，有更简洁的方法，这些以后会有更多示例加以说明，下文中也会有介绍）
DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。
三、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就是属于该类型。
（注：一个空格也就可能是一个文本结点）
通常更需要注意的是文本结点，有可能一个回车，一个空格都是文本结点。这一点以后会碰到，当然，我们也有办法处理，这里先不要急，以后也会说到的。
四、DOM常用的API
这些常用的API是要记下来的，当然在非IE的浏览器里也会有效，是符合w3c的。这些API在以后的编程中会常常用到。正如每个编程平台所提供的API一样，常用必须记下来，节省时间从而提高编程效率。只写几个最常用的，其它的API会在以后的示例中写出。由浅而深，从易到难嘛。
1、获取ELEMENT_NODE，元素节点
1)、方法：document.getElementById(元素的Id)，返回值为元素的节点引用。可以假想一下这个API的原理：象我们上面所做的是遍历每个节点（从根到我们所需结点），这个API，也可以想成是从根遍历，查询每个结点（空白结点和空结点除外），并获取该结点的id是否为指定的ID，如果是的话，就返回这个结点（注：在JS中，数组和对象是引用类型），如果没有就返回空。我们可以写写这个代码，帮助我们理解document.getElementById。下面是一个简单遍历BODY中元素的示例。
三、移除结点。
1) object.parentNode.removeChild(oChildNode)，这个就是语法，下面看示例。
这一节就先写到这里，下一节我们就可以用这几个简单的API做许多事情了，几个API就可以写出很多效果
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
二、DOM树
要注意：DOM树的根统一为文档根—document，DOM既然是树状结构，那么他们自然有如下的几种关系:
根结点(document)
父结点(parentNode)
子结点(childNodes)
兄弟结点 兄弟结点
(sibling) (sibling)
例子：
假设网页的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下有一个文本节点
doby下有节点div，div下有一个文本节点
三、操作DOM树
开篇已经说过，DHTML本质就是操作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 onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>
从上面的示例可以看出，我们可以用上面的这种方法操作DOM树上的任一节点。（注：1. 跨域除外，跨域通常是在操作frame上，简单的说，就是两个frame不属于同一域名。2.上面的操作为了演示，采用的方法是从根结点一直到文本结点的遍历，在DOM方法上，有更简洁的方法，这些以后会有更多示例加以说明，下文中也会有介绍）
DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。
三、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就是属于该类型。
（注：一个空格也就可能是一个文本结点）
通常更需要注意的是文本结点，有可能一个回车，一个空格都是文本结点。这一点以后会碰到，当然，我们也有办法处理，这里先不要急，以后也会说到的。
四、DOM常用的API
这些常用的API是要记下来的，当然在非IE的浏览器里也会有效，是符合w3c的。这些API在以后的编程中会常常用到。正如每个编程平台所提供的API一样，常用必须记下来，节省时间从而提高编程效率。只写几个最常用的，其它的API会在以后的示例中写出。由浅而深，从易到难嘛。
1、获取ELEMENT_NODE，元素节点
1)、方法：document.getElementById(元素的Id)，返回值为元素的节点引用。可以假想一下这个API的原理：象我们上面所做的是遍历每个节点（从根到我们所需结点），这个API，也可以想成是从根遍历，查询每个结点（空白结点和空结点除外），并获取该结点的id是否为指定的ID，如果是的话，就返回这个结点（注：在JS中，数组和对象是引用类型），如果没有就返回空。我们可以写写这个代码，帮助我们理解document.getElementById。下面是一个简单遍历BODY中元素的示例。
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
三、移除结点。
1) object.parentNode.removeChild(oChildNode)，这个就是语法，下面看示例。
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
这一节就先写到这里，下一节我们就可以用这几个简单的API做许多事情了，几个API就可以写出很多效果
评论 (0) All
