Javascript & DHTML DOM基础和基本API第2/5页
更新时间：2008年07月03日 20:58:05 作者：
DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。
二、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方法上，有更简洁的方法，这些以后会有更多示例加以说明，下文中也会有介绍）
相关文章
这篇文章主要为大家详细介绍了纯js实现隔行变色效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家详细介绍了layui实现三级联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
本文主要介绍了在DWR中实现直接获取一个JAVA类的返回值的两种方法，具有一定的参考价值，下面跟着小编一起来看下吧2016-12-12
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
今天小编就为大家分享一篇layui+SSM的数据表的增删改实例(利用弹框添加、修改)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
如果一个函数访问了此函数的父级及父级以上的作用域变量,那么这个函数就是一个闭包,本文将给大家分享js闭包的6种应用场景,文中有详细的代码示例,需要的朋友可以参考下2023-09-09
这篇文章主要为大家详细介绍了微信小程序自定义键盘，内部虚拟支付，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
下面小编就为大家带来一篇JavaScript对Json的增删改属性详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
借用Google的Javascript API Loader来加速你的网站
加速页面加载速度有一个方法就是把CSS和JS文件放到另外一个单独的服务器上，这样在访问量比较大的情况下可以分担主服务器的压力2009-01-01
如果AJAX加载的数据是一个HTML片段，而且这个HTML片段还包含脚本<script>块，那么在你把这数据xmlHttp.responseText用innerHTML方法插入到当前文档一个元素中，你会发现AJAX加载回来的脚本根本没有执行。2010-01-01
这篇文章主要介绍了js中一维数组和二维数组互转,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
最新评论