DOM 是 Document Object Model（文档对象模型）的缩写,是 W3C（万维网联盟）的标准

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

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

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

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

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

DOM技术使用户页面可以动态的变化，从而大大使页面的交互性增强。但是DOM必须通过JavaScript等脚本语言来进行操作。

简单说就是DOM规定了HTML，XML等的一些规范，使JavaScript可以根据这些规范来进行各种操作。而这些规范我们可以用树来形象的表示：

通过这样的树，我们就可以很快找到我们想要操作的节点，进而进行各种属性，方法，事件等的操作。

使用前先来了解一下元素节点的意思吧。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。看这个图：

再来看一下html DOM的常用属性吧,如图

接下来就说一下具体的JavaScript对HTML网页内容进行的操作，常用的方法如下：

DOM中常用的事件如下：

下面根据以上来实现几个小例子：

1，添加新的节点：

    <span style="font-size:18px;">  <!DOCTYPE html>

        <html>

        <body>  

        <div id="div1">

        <p id="p1">这是一个段落。</p>

        <p id="p2">这是另一个段落。</p>

        </div>  

        <script>

        var para=document.createElement("p");//创建一个标签p节点名为para

        var node=document.createTextNode("这是新段落。");//定义节点元素的内容

        para.appendChild(node);//将元素和内容联系起来  

        var element=document.getElementById("div1");//找到节点为div1的节点

        element.appendChild(para);//向节点div1中添加新节点para

        </script>  

        </body>

        </html>

    </span>

2,删除某个节点元素：

    <span style="font-size:18px;">  <!DOCTYPE html>

        <html>

        <body>  

        <div id="div1">

        <p id="p1">这是一个段落。</p>

        <p id="p2">这是另一个段落。</p>

        </div>  

        <script>

        var parent=document.getElementById("div1");

        var child=document.getElementById("p1");

        parent.removeChild(child);//删除父节点中的子节点child

        </script>  

        </body>

        </html>

    </span>

3，获得焦点时改变颜色，这个是经常用的：

    <span style="font-size:18px;">  <!DOCTYPE html>

        <html>

        <head>

        <script>

        function myFunction(x)

        {

        x.style.background="yellow";

        }

        </script>

        </head>

        <body>  

        请输入英文字符：<input type="text" onfocus="myFunction(this)">  

        <p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>  

        </body>

        </html>

    </span>

4，鼠标移动上元素和移开元素：

    <span style="font-size:18px;">  <!DOCTYPE html>

        <html>

        <body>  

        <div

        onmouseover="mOver(this)"

        onmouseout="mOut(this)"

        style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">

        Mouse Over Me

        </div>  

        <script>

        function mOver(obj)

        {

        obj.innerHTML="谢谢你"

        }  

        function mOut(obj)

        {

        obj.innerHTML="把鼠标指针移动到上面"

        }

        </script>  

        </body>

        </html>

    </span>

总结起来就是：DOM文档对象模型，可以理解为所建的html文件就是一个文档。W3C把这个文档中的html元素都抽象成了一个个对象，js就是通过这些抽象的对象来执行各种操作。

HTML DOM的总结的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  5. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  6. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  7. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  8. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. jQuery学习之路（2）-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. Cognos第三方用户认证（CustomJavaProvider）

    关于Cognos第三方用户认证(CustomJavaProvider)的demo网上的例子很多,当然最权威的你可以从Cognos安装的SDK中去探索,本文不详细的说明代码,主要说一下认证的处理过程,以 ...

  2. （转）[Unity3D]UI方案及制作细节(NGUI/EZGUI/原生UI系统) 内附unused-assets清除实例

    转载请留下本文原始链接,谢谢.本文会不定期更新维护,最近更新于2013.09.17.   http://blog.sina.com.cn/s/blog_5b6cb9500101bplv.html   ...

  3. XXX全球 IP 地址库

    XXX全球 IP 地址库 Bulgaria 93.123.23.1 93.123.23.2 93.123.23.3 93.123.23.4 93.123.23.5 93.123.23.6 93.123 ...

  4. 【pyhon】理想论坛爬虫1.08

    #------------------------------------------------------------------------------------ # 理想论坛爬虫1.08,用 ...

  5. 表结构变更后出现的ERROR OGG-01161 Bad column index (88)

    2014-07-31 09:38:31 ERROR OGG-01668 PROCESS ABENDING. 2014-07-31 09:38:31 ERROR OGG-01161 Bad column ...

  6. ubuntu 安装 codelite

    http://www.linuxidc.com/Linux/2013-06/85332.htm Ubuntu 12.04下为codelite增添更新源 1.获取codelite的公钥 sudo apt ...

  7. 简单概率dp-hdu-4487-Maximum Random Walk

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4487 题目大意: 开始位置在0,每一步可以向右向左或者不动,问走了n步后,路径中能到达最右的期望. ...

  8. oracle 之flashback 深入研究。

    oracle 之flashback 深入研究. 今天是2013-08-24,开始进行oracle flashback 内部原理研究,记录一下笔记. SQL> startup ORACLE ins ...

  9. Httpclient 4, error 302. How to redirect?

    http://stackoverflow.com/questions/3658721/httpclient-4-error-302-how-to-redirect DefaultHttpClient ...

  10. atitit.提升开发效率---MDA 软件开发方式的革命(3)----自己主动化建表

    atitit.提升开发效率---MDA 软件开发方式的革命(3)----自己主动化建表 1. 建模在后自己主动建表 1 1. 传统上,须要首先建表,在业务编码.. 1 2. 模型驱动建表---很多其它 ...