对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM把Javascript和HTML文档的结构和内容连接起来,通过DOM可以控制HTML的行为。DOM是一个树状结构,如下图所示。

DOM Level和兼容性问题
   DOM Level (即DOM等级)是W3C标准化过程中的版本号,在大多数情况下可以忽略他们。

  • DOM0级(DOM Level 0) 实际上DOM0级标准是不存在的。所谓DOM0级只是DOM历史坐标中的一个参照点而已。具体说来,DOM0级指的是Internet Explorer 4.0和Netscape Navigator 4.0最初支持的DHTML。
  • DOM1级的目标主要是映射文档的结构,由两个模块组成:DOM核心(DOM Core)和DOM HTML。其中,DOM核心规定的是如何映射基于XML的文档结构,以便简化对文档中任意部分的访问和操作。DOM HTML模块则在DOM核心的基础上加以扩展,添加了针对HTML的对象和方法。
  • DOM2级在原来DOM的基础上又扩充了(DHTML一直都支持的)鼠标和用户界面事件、范围、遍历(迭代DOM文档的方法)等细分模块,而且通过对象接口增加了对CSS(Cascading Style Sheets,层叠样式表)的支持。
  • DOM3级则进一步扩展了DOM,引入了以统一方式加载和保存文档的方法–在DOM加载和保存(DOM Load and Save)模块中定义;新增了验证文档的方法–在DOM验证(DOM Validation)模块中定义。DOM3级也对DOM核心进行了扩展,开始支持XML 1.0规范,涉及XML Infoset、XPath和XML Base。

    DOM的标准化过程中并不是完全顺利的,虽然每一个DOM Level都有描述他的标准文档。但是浏览器并没有完整的实现,只是简单挑选了其中有用的功能,而忽略了其他。而且各个浏览器之间实现同一种功能存在着不一致性。因此我们可以借助第三方Javascript库来屏蔽这些差异,比如jQuery等。
    DOM成员
    这里只列出主要的属性和方法
    Document

    Location

    Window

    History

    Screen

    HTMLElement

    CSSStyleDeclaration

    Event

    DOM事件流

        DOM事件流又称为DOM事件模型,当一个HTML元素产生一个事件时,该事件会在元素结点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流。
        DOM同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触发DOM中的所有对象,从document对象开始,也在document对象结束。
        DOM事件流的最独特的性质是,文本节点也触发事件(在IE中除外)
    冒泡事件模型:事件有触发节点一直传播到根节点,由下往上。
    捕获型事件模型:和冒泡事件模型刚好相反,它是从根节点一直传播到触发节点,有上往下。
    标准的事件传播分为三个阶段
    1)事件捕获阶段
      事件沿着DOM树向下传递,经历目标结点的每一个祖先结点,直到目标结点。(如用户点击了一个
    超链接,则该点击事件将从document结点到html结点,body结点以及包含该链接的父亲结点)
      在此过程中,浏览器都会检测针对该事件的捕获事件监听器,并运行该事件监听器。
    2)目标触发阶段
      浏览器在查找到已经指定给目标元素的事件监听器后,就会运行该事件监听器。
    3)事件冒泡阶段
      事件将沿着DOM树向上传递,再次逐个访问目标元素的祖先结点到document结点。
      在此过程中,浏览器都会将检测那些不是捕获事件监听器的事件监听器,并执行它们。

  • 注意:所有的事件都经过捕获阶段和目标阶段,但并不是所有的事件都会经过冒泡阶段。例如,让元素获得输入焦点的focus事件以及失去输入焦点的blur事件就都不会冒泡。
    停止事件冒泡
    停止事件冒泡是指,停止冒泡型事件的进一步传递(取消事件传递,不只是停止IE和DOM标准共有的冒泡型事件,我们还可以停止支持DOM标准浏览器的捕捉型事件,用stopPropagation()方法)。例如,停止了事件冒泡,该节点的所有父节点都不会再收到通知,不在被处理。它有三种方式来实现如下

    e.cancelBubble=true;
    e.stopPropagation();
    return false;

    阻止事件的默认行为

    阻止事件的默认行为是指,通常浏览器在事件传递并处理完后会执行与该事件关联的默认动作(如果存在这样的动作)。例如如,如果表单中input type 属性是 “submit”,点击后在事件传播完浏览器就自动提交表单。又例如,input 元素的 keydown 事件发生并处理后,浏览器默认会将用户键入的字符自动追加到 input 元素的值中。实现方式如下

    //如果提供了事件对象,则这是一个非IE浏览器
    if ( e && e.preventDefault )
    //阻止默认浏览器动作(W3C)
    e.preventDefault();
    else
    //IE中阻止函数器默认动作的方式
    window.event.returnValue = false;
    return false;

    事件处理程序
    HTML事件处理程序

    简单来说就是把事件处理直接写到HTML元素里头。比如:

    <input id="btn" value="按钮" type="button" onclick="sayHello();">
    <script>
    function sayHello(){
    alert("Hello!HTML添加事件处理");
    }
    </script>

    这样做有一个不好的地方,就是html和js之间的耦合性太强了,如果哪天我要修改sayHello方法,那么我不但要修改html代码,还有修改js代码。代码少时可以接受,但是代码成千上万时,那时改起来就苦逼了……
    DOM 0级事件处理程序

    即为指定对象指定事件处理。比如:

    <input id="btn" value="按钮" type="button">
    <script>
    var btn= document.getElementById("btn");
    btn.onclick=function(){
     alert("Hello!DOM 0级添加事件处理");
    }
    btn.onclick=null;//如果想要删除btn2的点击事件,将其置为null即可
    </script>

    从上面代码中,我们能看出,html代码和js的耦合性已经大大的降低。但是这还不是最好的。下面来看DOM 2级的事件处理程序。
    DOM 2事件处理程序

    主要涉及到两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和 removeEventListener()。

    他们都接受三个参数:事件名称、触发事件时要执行的函数、一个布尔值(是否在捕获阶段处理事件)。例如:

    <input id="btn" value="按钮" type="button">
    <script>
    var btn=document.getElementById("btn");
    btn.addEventListener("click",sayHello,false);//这里我们把最后一个值置为false,即不在捕获阶段处理,一般来说冒泡处理在各浏览器中兼容性较好
    function sayHello(){
    alert("Hello!DOM 2级添加事件处理程序");
    }
    btn.removeEventListener("click",sayHello,false);//如果想要把这个事件删除,只需要传入同样的参数即可
    </script>

    这种方式简单直接,也更简便,推荐使用。另外需要注意的一点是在删除事件处理的时候,传入的参数一定要与添加事件处理时一样,否则删除会失效。
    事件处理程序的浏览器兼容性解决方案

     var eventHandler={
    addHandler:function(element,type,func){
       if(element.addEventListener){
       element.addEventListener(type,func,false);
       }else if(element.attachEvent){
       element.attachEvent('on'+type,func);
      }else{
       element['on'+type]=func;
      }
      },
      removerHandler:function(element,type,func){
       if(element.removeEventListener){
       element.removeEventListener(type,func,false);
       }else if(element.detachEvent){
       element.detachEvent('on'+type,func);
       }else{
       element['on'+type]=null;
      }
    }
    }
    var btn=document.getElementById("btn");
    eventHandler.addHandle(btn,"click",sayHello);
    //eventHandler.removerHandler(btn,"click",SayHello);

    DOM和BOM的区别
        BOM是浏览器对象模型,用来获取或设置浏览器的属性、行为,例如:新建窗口、获取屏幕分辨率、浏览器版本号等;

    DOM是文档对象模型,用来获取或设置文档中标签的属性,例如获取或者设置input表单的value值;

    DOM和BOM它们之间是相互关联的。BOM中有document对象,DOM中有Window对象;

    由于DOM的操作对象是文档(Document),所以DOM和浏览器没有直接关系

    理解outHtml和innerText、innerHtml

【HTML5开发系列】DOM及其相关的更多相关文章

  1. 【HTML5开发系列】meta元素详解

    meta元素可以用来定义文档的各种元数据.他有很多种用法,一个HTML文档可以包含多个meta元素. meta元素在HTML5中的变化 charset属性是HTML5中新增的.在HTML4中,http ...

  2. 【HTML5开发系列】HTML元素总结

    HTML元素汇总,包含HTML4元素和HTML5新增元素.Y表示有变化,N则表示没有变化,N/A表示未知 文档和元数据元素 包括说明HTML文档的结构,向浏览器说明文档的情况,定义脚本程序和css样式 ...

  3. 【HTML5开发系列】CSS3

    选择器 属性 背景和边框 盒模型 布局 文本 动画 其他

  4. 【HTML5开发系列】表单元素

    <form> 创建一个HTML表单 属性: action 表示提交表单时浏览器应该把用户填写的数据发送到什么地方 method 用来指定表单数据发送到服务器的方式.允许值有get和post ...

  5. iOS开发系列-iOS布局相关

    LayoutSubViews 需要在某个View调整子视图的位置时,可以重写. 以下情况会出发LayoutSubViews方法的调用 init初始化不会触发layoutSubviews,但是是用ini ...

  6. HTML5游戏开发系列教程5(译)

    原文地址:http://www.script-tutorials.com/html5-game-development-lesson-5/ 最终我决定准备下一篇游戏开发系列的文章,我们将继续使用can ...

  7. HTML5游戏开发系列教程10(译)

    原文地址:http://www.script-tutorials.com/html5-game-development-lesson-10/ 最后我们将继续使用canvas来进行HTML5游戏开发系列 ...

  8. HTML5游戏开发系列教程9(译)

    原文地址:http://www.script-tutorials.com/html5-game-development-lesson-9/ 今天我们将继续使用canvas来进行HTML5游戏开发系列的 ...

  9. HTML5游戏开发系列教程8(译)

    原文地址:http://www.script-tutorials.com/html5-game-development-lesson-8/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用c ...

随机推荐

  1. Linux使用nginx部署Laravel

    问题描述 Laravel是PHP下当今最受欢迎的web应用开发框架,github上start数远超第二名Symfony,以前我用这个框架做项目的时候通常就是扔到apache里面,然后配置.htacce ...

  2. 把e.printStackTrace的堆栈信息打印在log.error()中

    不要这样写: log.error(e);这样只是简单的记录下错误的类型,不能精确出错误出错在哪行 要写成:log.error(e.toString(),e);

  3. bind域名dns解析及主从服务的配置

    bind域名dns解析及主从服务的配置 1.dns解析介绍     人们习惯记忆域名,但机器间互相只认IP地址,域名与IP地址之间是多对一的关系,一个ip地址不一定只对应一个域名,且一个域名只可以对应 ...

  4. ECSHOP热门搜索关键词随机显示

    实现ECSHOP热门搜索关键词随机显示,需要修改ECSHOP模板和ECShOP程序,按照步骤修改即可. 一.打开 include/lib_main.php 文件,找到下面这段代码,删除之(大概在165 ...

  5. 转:阿里 Weex 思路与实战(web相关)

    Weex——关于移动端动态性的思考.实现和未来 2016-04-05 勾股.伊耆 移动开发前线 本文由手机淘宝技术团队赵锦江(勾股).黄金涌(伊耆)等专家创作.手淘作为电商应用,对客户端/前端的动态性 ...

  6. 最简单的基于FFmpeg的移动端样例:IOS 视频解码器

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  7. Linux Barrier I/O 实现分析与barrier内存屏蔽 总结

    一直以来.I/O顺序问题一直困扰着我.事实上这个问题是一个比較综合的问题,它涉及的层次比較多,从VFS page cache到I/O调度算法,从i/o子系统到存储外设.而Linux I/O barri ...

  8. Weblogic OutOfMemory exception的误解 -- thread limitation

    不是全部的OutofMemory exception都是内存问题... 前几天有个客户的site报了下面错误: [ERROR][thread ] Could not start thread Time ...

  9. Laravel5.1之表单验证

    一.生成一个验证类 1.生成 artisan make:request TestRequest 2.生成的文件在项目Http下的Requests文件夹下 3.默认生成的文件如下 class TestR ...

  10. SVN服务端的安装搭建(Linux)

    在CentOS下安装 SVN 大多数 GNU/Linux 发行版系统自带了Subversion ,所以它很有可能已经安装在你的系统上了.可以使用下面命令检查是否安装了. svn --version 如 ...