一、什么是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的，简单的一句就可以判断
 
<script>
    var isSupportDOM = !!document.getElementById; //两个取反，这已经在上节中说过了，意思是强制转型
     alert("你的浏览器 " +(isSupportDOM?"":"不")+ "支持 DOM！");
</script>

二、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下有一个文本节点
body下有节点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节点。

细心些的朋友也许发现了，在上面写的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中元素的示例。


<html>
 <head>
  <title>never-online's website</title>
   <script>

 function myGetElementById (id) {
      var nodeRoot = document; //这个是根结点
      var nodeHTML = nodeRoot.childNodes[0]; //这个是html结点
      var nodeBody = nodeHTML.childNodes[1]; //body结点
      var bodyChild = nodeBody.childNodes; //body的孩子
      for (var i=0; i< bodyChild.length; i++) { //简单的遍历（指body的孩子下的深度为1)
        if (bodyChild[i].id==id) return bodyChild[i];
      };
      return null;
    }
    function TestGetElementById (id) {
      var node = myGetElementById(id);
      if (node!=null) {
        alert("找到结点 "+id+"!");
        alert(node.childNodes[0].data);
      } else {
        alert("没有找到结点 "+id+".");
      }
    }

</script>
</head>
<body>
<div id="aTestNode"></div>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="TestGetElementById('textNode')" type="button" value="change"/>
</body>
</html>

2)、属性：object.innerHTML，返回值：一个节点内的HTML值。该属性为可写属性。它虽然不是获取结点，但经常与获取结点相结合，所以我把它放在获取结点这一类，它的属性就类似于是纯文本节点属性中的data。以document.getElementById和object.innerHTML这两个API为例，

我们就可以把上面所写的代码简化一下了，示例如下：

<html>
<head>
<title>never-online's website</title>
<script>
  function changedivText (strText) {
    var node = document.getElementById("textNode");
    node.innerHTML = strText;
  }
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>

3)、方法：object.getElementsByTagName(标签的名字)，返回一个集合，该集合的把有元素都是有指定标签的元素。访问集合里的元素，可以用下标来访问。语法里的object，是指document（根）或者是一个ELEMENT_NODE。这个的原理示例我就不写了，可以作为一个作业，大家可以写写。这里写一些具体应用。如上例，我们还可以这样写。
<html>
<head>
<title>never-online's website</title>
<script>
 function changedivText (strText) {
    var node = document.getElementsByTagName("DIV");
    node[0].innerHTML = strText;
}
</script>
</head>
<body>
<div>tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>

再取一个例子，注意，BODY下的结点深度为2。
<html>
<head>
<title>never-online's website</title>
<script>
  function changedivText (strText) {
    var node = document.getElementById("nodeTest");
    var myNode = node.getElementsByTagName("DIV");
    myNode[0].innerHTML = strText;
}
</script>
</head>
<body>
  <div id="nodeTest">
   <div>tutorial of DHTML and javascript programming</div>
     <input onclick="changedivText('change?')" type="button" value="change"/>
  </div>
</body>
</html>

2、动态创建与插入结点
1)、创建结点对象。document.createElement(tagname)，tagname指的是一个标签，比如一个DIV，就是document.createElement("DIV")，

它返回的是这个结点的引用。
2)、在body的尾部插入结点用document.body.appendChild(object)，为了容易理解，下面这个示例，我用了IE专有的属性

object.outerHTML，得到一个该元素的HTML标签内容（包括自身），这样会更容易看到效果。
<html>
<head>
<title>never-online's website</title>
<script>
   function insertNode (strText) {
     alert("插入元素前的body HTML：
" +document.body.outerHTML);
     var node = document.createElement("DIV");
     node.innerHTML = strText;
      document.body.appendChild(node);
      alert("插入元素后的body HTML：
" +document.body.outerHTML);
}
</script>
</head>
<body>
 <div>tutorial of DHTML and javascript programming</div>
 <input onclick="insertNode('change?')" type="button" value="change"/>
</body>
</html>

3)、在元素处插入结点。object.insertBefore(oNewNode
[, oChildNode])，oNewNode为一个我们创建的结点，oChildNode是可选的，为
object下的一个子节点。同样的，为了看到效果，我也用了outerHTML。示例

<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
   alert("插入元素前的body HTML：
" +document.body.outerHTML);
    var node = document.createElement("DIV");
    var myNode = document.getElementById("textNode");
    node.innerHTML = strText;
     document.body.insertBefore(node,myNode);
   alert("插入元素后的body HTML：
" +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="change"/>
</body>
</html>

3、移除结点。
1) object.parentNode.removeChild(oChildNode)，这个就是语法，下面看示例。

<html>
<head>
<title>never-online's website</title>
<script>
  function insertNode (strText) {
    alert("插入元素前的body HTML：
" +document.body.outerHTML);
    var node = document.createElement("DIV");
    var myNode = document.getElementById("textNode");
    node.innerHTML = strText;
    document.body.insertBefore(node,myNode);
    alert("插入元素后的body HTML：
" +document.body.outerHTML);
}

   function removeCreateNode() {
     alert("移除元素前的body HTML：
" +document.body.outerHTML);
     var node = document.getElementById("textNode");
     node.parentNode.removeChild(node);
     alert("移除元素前的body HTML：
" +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="insert"/>
<input onclick="removeCreateNode()" type="button" value="remove"/>
</body>
</html>

parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持

python之路十六的更多相关文章

  1. 进击的Python【第十六章】：Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  2. python 教程 第十六章、 正则表达式

    第十六章. 正则表达式 1)    匹配多个表达式 记号  re1|re2 说明  匹配正则表达式re1或re2 举例  foo|bar  匹配  foo, bar 记号  {N} 说明  匹配前面出 ...

  3. Python 学习 第十六篇：networkx

    networkx是Python的一个包,用于构建和操作复杂的图结构,提供分析图的算法.图是由顶点.边和可选的属性构成的数据结构,顶点表示数据,边是由两个顶点唯一确定的,表示两个顶点之间的关系.顶点和边 ...

  4. python之路十五

    CSS position 属性 定义和用法position 属性规定元素的定位类型.说明这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身 ...

  5. python之路十九

    1.Django请求生命周期        -> URL对应关系(匹配) -> 视图函数 -> 返回用户字符串        -> URL对应关系(匹配) -> 视图函数 ...

  6. python之路十八

    1.JS 正则    test   - 判断字符串是否符合规定的正则        rep = /\d+/;        rep.test("asdfoiklfasdf89asdfasdf ...

  7. python之路十四

    概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...

  8. python之路十二

    本节内容 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令 创建数据库 外键 增删改查表 权限 事务 索引 python 操作mysql ORM sql ...

  9. python之路十

    协程协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程.协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他地方,在切回来的时 ...

随机推荐

  1. 【6年开源路】FineUI家族今日全部更新（FineUI + FineUI3to4 + FineUI.Design + AppBox）！

    刚才询问博客园团队: [6年开源路]三石今日送福利,AppBox4.0源码免费拿!FineUI家族今日全部更新(FineUI + FineUI3to4 + FineUI.Design + AppBox ...

  2. 浅谈 Web 中前后端模板引擎的使用

    前言 这篇文章本来不打算写的,实话说楼主对前端模板的认识还处在非常初级的阶段,但是为了整个 源码解读系列 的完整性,在深入 Underscore _.template 方法源码后,觉得还是有必要记下此 ...

  3. 自己写的一个Pager分页组件,WebForm，Mvc都适用

    我一说写这个功能的时候,好多人估计有疑问.分页功能网上多的是,搜一个不就行了,你这样不是浪费时间么.你说这句话的时候,我是比较信的,首先自己写一些东西是很耗时,有这些时间又能多打几盘LOL了.但是我觉 ...

  4. 应如何取B/S的B端的IP

    我们常讨论说要取真实IP,不同场景所谓的真实IP含义不一样. 如你要根据客户端IP去判断客户所在区域,那么要记录客户的出口IP,这里的出口IP才是你所谓的真实IP. 如你要判断多个客户端是不是同一个, ...

  5. C++知识回顾（一）

    感觉世界都是约定好的,每门语言的第一个程序总是Hello World!但是也有一些书似乎是在追求个性,会用一些其他的,但是是Not Hello World!本人需要再学习一下C++,所以从最基础的开始 ...

  6. js或css文件后面的参数是什么意思？

    经常看到不少导航网站测样式或js文件后面加了一些参数,主要是一你为一些并不经常更新的页面重新加载新修改的文件. 经常遇到页面里加载的js与css文件带有参数,比如: <script type=& ...

  7. 精灵方向移动问题[math.floor]

    local xd = math.cos(math.rad(self._direction));--self._direction方向角度 local yd = math.sin(math.rad(se ...

  8. Android必学——AsyncTask

    第一章  AsyncTask的基本构成 为是么要异步任务 1)Android单线程模型 2)耗时操作放在非主线程中执行 AsyncTask为何而生 1)子线程中跟新UI 2)封装.简化异步操作 pub ...

  9. [转]别再抱怨了，国内这么多优秀的Android资源你都知道吗？

    因为一些大家都知道的原因,android很多官方出品的优秀开发资源在国内无法访问. 国内的同行们对此也做出了很多努力,有很多朋友通过各种手段把很多优秀的资源搬运到了国内,为国内android开发者提供 ...

  10. JavaScript中---作用域

    作用域: 变量还有函数作用的范围. 浏览器的内核主要有两大功能,一个是渲染页面,另一个就是我们的JavaScript的解释器了. 我们主要来说说JavaScript解释器,在解析时是怎么样的工作原理. ...