【HTML5开发系列】DOM及其相关
对象模型(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及其相关的更多相关文章
- 【HTML5开发系列】meta元素详解
meta元素可以用来定义文档的各种元数据.他有很多种用法,一个HTML文档可以包含多个meta元素. meta元素在HTML5中的变化 charset属性是HTML5中新增的.在HTML4中,http ...
- 【HTML5开发系列】HTML元素总结
HTML元素汇总,包含HTML4元素和HTML5新增元素.Y表示有变化,N则表示没有变化,N/A表示未知 文档和元数据元素 包括说明HTML文档的结构,向浏览器说明文档的情况,定义脚本程序和css样式 ...
- 【HTML5开发系列】CSS3
选择器 属性 背景和边框 盒模型 布局 文本 动画 其他
- 【HTML5开发系列】表单元素
<form> 创建一个HTML表单 属性: action 表示提交表单时浏览器应该把用户填写的数据发送到什么地方 method 用来指定表单数据发送到服务器的方式.允许值有get和post ...
- iOS开发系列-iOS布局相关
LayoutSubViews 需要在某个View调整子视图的位置时,可以重写. 以下情况会出发LayoutSubViews方法的调用 init初始化不会触发layoutSubviews,但是是用ini ...
- HTML5游戏开发系列教程5(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-5/ 最终我决定准备下一篇游戏开发系列的文章,我们将继续使用can ...
- HTML5游戏开发系列教程10(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-10/ 最后我们将继续使用canvas来进行HTML5游戏开发系列 ...
- HTML5游戏开发系列教程9(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-9/ 今天我们将继续使用canvas来进行HTML5游戏开发系列的 ...
- HTML5游戏开发系列教程8(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-8/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用c ...
随机推荐
- Linux使用nginx部署Laravel
问题描述 Laravel是PHP下当今最受欢迎的web应用开发框架,github上start数远超第二名Symfony,以前我用这个框架做项目的时候通常就是扔到apache里面,然后配置.htacce ...
- 把e.printStackTrace的堆栈信息打印在log.error()中
不要这样写: log.error(e);这样只是简单的记录下错误的类型,不能精确出错误出错在哪行 要写成:log.error(e.toString(),e);
- bind域名dns解析及主从服务的配置
bind域名dns解析及主从服务的配置 1.dns解析介绍 人们习惯记忆域名,但机器间互相只认IP地址,域名与IP地址之间是多对一的关系,一个ip地址不一定只对应一个域名,且一个域名只可以对应 ...
- ECSHOP热门搜索关键词随机显示
实现ECSHOP热门搜索关键词随机显示,需要修改ECSHOP模板和ECShOP程序,按照步骤修改即可. 一.打开 include/lib_main.php 文件,找到下面这段代码,删除之(大概在165 ...
- 转:阿里 Weex 思路与实战(web相关)
Weex——关于移动端动态性的思考.实现和未来 2016-04-05 勾股.伊耆 移动开发前线 本文由手机淘宝技术团队赵锦江(勾股).黄金涌(伊耆)等专家创作.手淘作为电商应用,对客户端/前端的动态性 ...
- 最简单的基于FFmpeg的移动端样例:IOS 视频解码器
===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...
- Linux Barrier I/O 实现分析与barrier内存屏蔽 总结
一直以来.I/O顺序问题一直困扰着我.事实上这个问题是一个比較综合的问题,它涉及的层次比較多,从VFS page cache到I/O调度算法,从i/o子系统到存储外设.而Linux I/O barri ...
- Weblogic OutOfMemory exception的误解 -- thread limitation
不是全部的OutofMemory exception都是内存问题... 前几天有个客户的site报了下面错误: [ERROR][thread ] Could not start thread Time ...
- Laravel5.1之表单验证
一.生成一个验证类 1.生成 artisan make:request TestRequest 2.生成的文件在项目Http下的Requests文件夹下 3.默认生成的文件如下 class TestR ...
- SVN服务端的安装搭建(Linux)
在CentOS下安装 SVN 大多数 GNU/Linux 发行版系统自带了Subversion ,所以它很有可能已经安装在你的系统上了.可以使用下面命令检查是否安装了. svn --version 如 ...