轻松学习JavaScript十八：DOM编程学习之DOM简介

       一DOM概述

       DOM(文档对象模型)是HTML和XML的应用程序接口(API)。DOM将把整个页面规划成由节点层级构成的文档。

DOM描绘了一个层次化的节点树，运行开发人员添加，移除和修改页面的某一部分。HTML或XML页面的每个部分都

是一个节点的衍生物。通过DOM，可访问HTML文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模

型，DOM模型被构造为对象的树。 

       DOM是W3C(万维网联盟)的标准。DOM定义了访问HTML和XML文档的标准。“W3C 文档对象模型(DOM)是中立

于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

       W3C DOM 标准被分为 3 个不同的部分：

       1核心 DOM - 针对任何结构化文档的标准模型

       2XML DOM - 针对 XML 文档的标准模型

       3HTML DOM - 针对 HTML 文档的标准模型

       二DOM节点树与节点

       (1)DOM节点

       在DOM中，所有事物都是节点。DOM是被视为节点树的HTML。HTML文档中的所有内容都是节点：整个文档是

一个文档节点；每个HTML元素是元素节点；HTML元素内的文本是文本节点；每个HTML属性是属性节点；注释是注

释节点。那么从实际出发看看：

块级元素

       

        (2)节点父，子和同胞

       节点树中的节点彼此拥有层级关系。父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子

节点。同级的子节点被称为同胞(兄弟或姐妹)。

       1在节点树中，顶端节点被称为根(root)

       2每个节点都有父节点、除了根(它没有父节点)

       3一个节点可拥有任意数量的子

       4同胞是拥有相同父节点的节点

       下面的图片展示了节点树的一部分，以及节点之间的关系：

       (3)节点树

       看下面的代码组成的DOM树：

     
          
          
     

     
          
一级标题
          百度一下，你就知道
     

       从上面的HTML中：

       节点没有父节点；它是根节点

       和的父节点是节点

       文本节点 "一级标题" 的父节点是

节点

       并且：

       节点拥有两个子节点：节点和节点

       节点拥有一个子节点：

这是已有的段落

        运行的结果为：

       (2)JavaScript的DOM能够改变页面中的HTML内容

Hello World!

        运行的结果为：

       (3)JavaScript的DOM能够改变页面中的CSS样式

Hello world!
Hello world!

       运行的结果为：

       (4)JavaScript的DOM能够对页面中的事件做出反应

点击按钮来执行displayDate()函数。
显示时间标准时间按钮

         运行的结果为：

        在阐述为什么学习JavaScript的时候有的已经都涉及到，这里我们会学习更加复杂的东西来操作HTML元素和

CSS样式，这样会使得网页有动感，下拉菜单和图片无缝滚动等动态效果我们就可以实现了。这些都是后面要学习的

东西了，就不再多说，本篇知识概括一下。如果想看效果的话可以参考：轻松学习JavaScript四：JS点击灯泡来点亮

或熄灭这盏灯的网页特效映射出JS在HTML中作用和DIV+CSS实操六：经管系网页添加导航栏下拉菜单。