DOM 事件模型

DOM 事件模型

事件

HTML元素事件是浏览器内在自动产生的,当有事件发生时html元素会向外界(这里主要指元素事件的订阅者)发出各种事件,如click,onmouseover,onmouseout等等。

DOM事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM 事件流。

主流浏览器的事件模型

早在2004前在HTML元素事件的订阅，发送，传播，处理模型上各浏览器实现并不一致，直到DOM Level3中规定后，多数主流浏览器才陆陆续续支持DOM标准的事件处理模型—捕获型与冒泡型。

目前除IE浏览器外，其它主流的Firefox, Opera, Safari都支持标准的DOM事件处理模型。IE仍然使用自己的模型，即冒泡型，它模型的一部份被DOM采用，这点对于开发者来说也是有好处的，只使用DOM标准，IE都共有的事件处理方式才能有效的跨浏览器。

冒泡型事件(Bubbling)

这是IE浏览器对事件模型的实现，也是最容易理解的，至少笔者觉得比较符合实际的。冒泡，顾名思义，事件像个水中的气泡一样一直往上冒，直到顶端。从DOM树型结构上理解，就是事件由叶子结点沿祖先结点一直向上传递直到根结点；从浏览器界面视图HTML元素排列层次上理解就是事件由具有从属关系的最确定的目标元素一直传递到最不确定的目标元素.

捕获型事件(Capturing)

Netscape Navigator的实现，它与冒泡型刚好相反，由DOM树最顶层元素一直到最精确的元素，这个事件模型对于开发者来说（至少是我..）有点费解，因为直观上的理解应该如同冒泡型，事件传递应该由最确定的元素，即事件产生元素开始。

但这个模型在某些情况下也是很有用的，接下来会讲解到。

DOM标准事件模型

因为两个不同的模型都有其优点和解释，DOM标准支持捕获型与冒泡型，可以说是它们两者的结合体。它可以在一个DOM元素上绑定多个事件处理器，并且在处理函数内部，this关键字仍然指向被绑定的DOM元素，另外处理函数参数列表的第一个位置传递事件event对象。

首先是捕获式传递事件，接着是冒泡式传递，所以，如果一个处理函数既注册了捕获型事件的监听，又注册冒泡型事件监听，那么在DOM事件模型中它就会被调用两次。

注册与移除事件监听器

注册事件监听器，或又称订阅事件，当元素事件发生时浏览器回调该监听函数执行事件处理。目前主流浏览器中有两种注册事件的方法，一种是IE浏览器的，另一种是DOM标准的。

1.直接JS或HTML挂载法

element.onclick=function(){alert(this.innerHTML);}

移除时将事件属性设为nul即可，这个也是最常用的方法了，优缺点也是显然的：

?简单方便，在HTML中直接书写处理函数的代码块，在JS中给元素对应事件属性赋值即可

?IE与DOM标准都支持的一种方法，它在IE与DOM标准中都是在事件冒泡过程中被调用的。

?可以在处理函数块内直接用this引用注册事件的元素

?要给元素注册多个监听器，就不能用这方法了

2. IE下注册多个事件监听器与移除监听器方法

IE浏览器中HTML元素有个attachEvent方法允许外界注册该元素多个事件监听器,例如

element.attachEvent('onclick', observer);

attachEvent接受两个参数。第一个参数是事件名称，第二个参数observer是回调处理函数。这里得说明一下，有个经常会出错的地方，IE下利用attachEvent注册的处理函数调用时this指向不再是先前注册事件的元素，这时的this为window对象了，笔者很奇怪IE为什么要这么做，完全看不出好处所在。

要移除先前注册的事件的监听器,调用element的detachEvent方法即可，参数相同。

element.detachEvent('onclick', observer);

3. DOM标准下注册多个事件监听器与移除监听器方法

实现DOM标准的浏览器与IE浏览器中注册元素事件监听器方式有所不同，它通过元素的addEventListener方法注册，该方法既支持注册冒泡型事件处理，又支持捕获型事件处理。

element.addEventListener('click', observer, useCapture);

addEventListener方法接受三个参数。第一个参数是事件名称，值得注意的是，这里事件名称与IE的不同，事件名称是没’on’开头的;第二个参数observer是回调处理函数;第三个参数注明该处理回调函数是在事件传递过程中的捕获阶段被调用还是冒泡阶段被调用

移除已注册的事件监听器调用element的removeEventListener即可，参数不变.

element.removeEventListener('click', observer, useCapture);

跨浏览器的注册与移除元素事件监听器方案

弄清楚DOM标准与IE的注册元素事件监听器之间的异同后，就可以实现一个跨浏览器的注册与移除元素事件监听器方案:

//注册

function addEventHandler(element, evtName, callback, useCapture){

//DOM标准

if(element.addEventListener){

element.addEventListener(evtName, callback, useCapture);

}else{

//IE方式,忽略useCapture参数

element.attachEvent('on'+ evtName, callback);

}

}

//移除

//注册

function removeEventHandler(element, evtName, callback, useCapture){

//DOM标准

if(element.removeEventListener){

element.removeEventListener(evtName, callback, useCapture);

}else{

//IE方式,忽略useCapture参数

element.dettachEvent('on'+ evtName, callback);

}

}

如何取消浏览器事件的传递与事件传递后浏览器的默认处理

先说明取消事件传递与浏览器事件传递后的默认处理是两个不同的概念，可能很多同学朋友分不清，或者根本不存在这两个概念。

取消事件传递是指，停止捕获型事件或冒泡型事件的进一步传递。例如上图中的冒泡型事件传递中，在body处理停止事件传递后，位于上层的document的事件监听器就不再收到通知，不再被处理。

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

要取消浏览器的件传递,IE与DOM标准又有所不同。

在IE下,通过设置event对象的cancelBubble为true即可。

function someHandle(){

window.event.cancelBubble=true;

}

DOM标准通过调用event对象的stopPropagation()方法即可。

function someHandle(event){

event.stopPropagation();

}

因些，跨浏览器的停止事件传递的方法是:

function someHandle(event){

event = event || window.event;

if(event.stopPropagation)

event.stopPropagation();

else event.cancelBubble=true;

}

取消事件传递后的默认处理，IE与DOM标准又不所不同。

在IE下,通过设置event对象的returnValue为false即可。

function someHandle(){

window.event.returnValue=false;

}

DOM标准通过调用event对象的preventDefault()方法即可。

function someHandle(event){

event.preventDefault();

}

因些，跨浏览器的取消事件传递后的默认处理方法是：

function someHandle(event){

event = event || window.event;

if(event.preventDefault)

event.preventDefault();

else event.returnValue=false;

}

捕获型事件模型与冒泡型事件模型的应用场合

标准事件模型为我们提供了两种方案，可能很多朋友分不清这两种不同模型有啥好处，为什么不只采取一种模型。

这里抛开IE浏览器讨论（IE只有一种，没法选择）什么情况下适合哪种事件模型。

1. 捕获型应用场合

捕获型事件传递由最不精确的祖先元素一直到最精确的事件源元素，传递方式与操作系统中的全局快捷键与应用程序快捷键相似。当一个系统组合键发生时，如果注册了系统全局快捷键监听器，该事件就先被操作系统层捕获，全局监听器就先于应用程序快捷键监听器得到通知，也就是全局的先获得控制权，它有权阻止事件的进一步传递。所以捕获型事件模型适用于作全局范围内的监听，这里的全局是相对的全局，相对于某个顶层结点与该结点所有子孙结点形成的集合范围。

例如你想作全局的点击事件监听，相对于document结点与document下所有的子结点，在某个条件下要求所有的子结点点击无效，这种情况下冒泡模型就解决不了了，而捕获型却非常适合，可以在最顶层结点添加捕获型事件监听器，伪码如下:

function globalClickListener(event){

if(canEventPass ==false){

//取消事件进一步向子结点传递和冒泡传递

event.stopPropagation();

//取消浏览器事件后的默认执行

event.preventDefault();

}

}

这样一来，当canEventPass条件为假时，document下所有的子结点click注册事件都不会被浏览器处理。

2. 冒泡型的应用场合

可以说我们平时用的都是冒泡事件模型，因为IE只支持这模型。这里还是说说，在恰当利用该模型可以提高脚本性能。在元素一些频繁触发的事件中，如onmousemove,

onmouseover,onmouseout,如果明确事件处理后没必要进一步传递，那么就可以大胆的取消它。此外，对于子结点事件监听器的处理会对父层监听器处理造成负面影响的，也应该在子结点监听器中禁止事件进一步向上传递以消除影响。

综合案例分析

最后结合下面HTML代码作分析:

HTML运行后点击红色区域,这是最里层的DIV,根据上面说明,无论是DOM标准还是IE,直接写在html里的监听处理函数是事件冒泡传递时调用的,由最里层一直往上传递,所以会先后出现current is event_source

current is div2

current is div1

current is div0

current is body

添加以下片段:

var div2 = document.getElementById('div2');

addEventHandler(div2,'click',function(event){

event = event || window.event;

if(event.stopPropagation)

event.stopPropagation();

else event.cancelBubble=true;

},false);

当点击红色区域后,根据上面说明,在泡冒泡处理期间,事件传递到div2后被停止传递了,所以div2上层的元素收不到通知,所以会先后出现:

current is event_source

current is div2

在支持DOM标准的浏览器中,添加以下代码:

document.body.addEventListener('click',function(event){

event.stopPropagation();

},true);

以上代码中的监听函数由于是捕获型传递时被调用的,所以点击红色区域后,虽然事件源是ID为event_source的元素,但捕获型选传递,从最顶层开始,body结点监听函数先被调用,并且取消了事件进一步向下传递,所以只会出现

current is body

关于DOM事件模型的两件事[多图]

日期：2007年11月26日作者：

o事件捕捉（Event Capture）的实现问题

o IE的高级事件处理模型的问题

一、事件捕捉（Event Capture）的实现问题

首先在说这件事前，先感谢一下Realazy。

W3C DOM Level2的事件模型规范中，事件在DOM树中的传播过程（从根节点到目标节点）被分为了两个阶段：捕捉（Capture）和冒泡（Bubbling）。下面这个图能大概的说明整个过程：

关于DOM事件模型的两件事[多图]

日期：2007年11月26日作者：

The DOM spec states that capturing events should not fire on target, because the idea of a capturing

event is to detect events before they reach their targets. Because of bugs in Gecko and Safari, web

content that is tested mostly with Firefox or other Gecko-based browsers sometimes expects capturing listeners to fire on target. Such content will fail in Opera 7, 8 and current releases of 9 because of its correct implementation of the standard.

大意是说：DOM规范中陈述了捕捉型的事件不应该在目标元素上被执行，因为捕捉型事件的用意就是为了监测到达目标元素之前的事件。Firefox和Safari的实现都是带有bug的。

再来看看W3C的DOM Events规范中的原话：

A capturing EventListener will not be triggered by events dispatched directly to the EventTarget upon

which it is registered.

所以，在整个事件传播中，被执行的顺序是：

1.父元素中所有的捕捉型事件（如果有）自上而下地执行

2.目标元素的冒泡型事件（如果有）

3.父元素中所有的冒泡型事件（如果有）自下而上地执行

在了解了这些后，也许还是不要使用事件捕捉为妙，至少暂时不要。

二、IE的高级事件处理模型的问题

重复绑定

IE下没有addEventListener，但是也有自己的attachEvent，即所谓的Microsoft Model。二者的实现基本相同只是attachEvent的第一个参数（事件类型）需要加”on”，而addEventListener不用，另外attachEvent因为不支持事件捕捉，所以也没有第三个参数。

然而，attachEvent还有一个很要命的问题：重复绑定事件。（这是从ppk on JavaScript中学到的）

一个例子：

function sayHello(){

alert('Hello, world!');

}

// W3C Model

$('div1').addEventListener('click', sayHello, false);

(from W3C)

如果想创建一个捕捉事件，在支持W3C 事件模型的浏览器中，将addEventListener的第三个参数设为true就好了。例如：

document.getElementById('foo').addEventListener('click',function(){alert('Hello, world!');},true);

前一阵因为想弄懂事件捕捉，所以做了点小实验，分别在Firefox 2、Safari 3 on Windows和Opera 9上实践了事件捕捉（当然，因为IE不支持事件捕捉，所以…），实验的原理见下图：

ID为div1和div2的两个元素都被委派了捕捉阶段的事件处理函数，这样：

o当点击#div1（蓝色区域）时，应该会alert出”div1″

o当点击#div2（黄色区域）时，应该会先alert出”div1″，再alert出”div2″，因为在事件捕捉阶段，事件是从根元素向下传播的，#div1是#div2的父元素，自然绑定在#div1上的

click事件也会先于#div2上的click事件被执行。

然而，以上的设想只试用于Firefox 2和Safari 3 on Windows，在Opera 9中，事情会变成这样：

o当点击#div1（蓝色区域）时，什么都不会发生

o当点击#div2（黄色区域）时，会alert出”div1″，随后什么都不会再发生

可以看出，在Opera 9中，目标元素（TargetElement）的click事件没有被执行。通过Realazy（orz…）的指点，找到了这篇文章：《Event capture explained》，发现，

// Microsoft Model

$('div1').attachEvent('onclick', sayHello);

$('div1').attachEvent('onclick', sayHello);

在W3C模型中，相同事件处理函数的绑定会被忽略，也就是说第二个

$('div1').addEventListener('click', sayHello, false);会被忽略。

而在Microsoft模型中，第二个$('div1').attachEvent('onclick', sayHello);同样会被执行，所以，当你点击#div1的时候，alert框会弹出来两次。更有甚者，在detachEvent时候，也同样要detachEvent 两次才能彻底把sayHello从#div1的click事件中删除。

为什么不继续使用alertID()了？

这是因为IE的事件模型的另一个缺陷，在alertID中，使用了this关键字来指代被委派了该事件处理函数的元素，这样，在W3C模型中，alertID中的this指代了#div1或者#div2。

但是在Microsoft模型中，缺少了对this的支持后，this.id就会变为undefined，因为这时候this指代了window对象。

jquery中获得jq对象(dom对象集合)的方法

jquery对象访问。 Jq对象（dom对象集合）的Eq方法和jq选择器返回的都是是jquery对象，只能使用jquery 方法；Jq对象（dom集合）的get方法和“jq对象[i]”返回的是dom元素对象，只能使用dom方法。 Jq对象的find（selector |obj|ele）和children用来查找子对象和后代对象 Jq对象的find方法用于查找当前jq对象（dom集合）的后代对象，Jq对象的children方法用于查找当前jq对象（dom集合）的子对象对象。这两个方法都只能使用jq对象（dom对象集合）来调用，并且他们返回的也是jq对象。 Jq手册中的api方法都是js对象（dom集合）对象或者$对象的方法。只能使用jq对象（dom 集合）或者$来调用。如each，attr、val，find，children等等 Jq对象的index方法搜索当前集合中的匹配的元素，并返回相应元素的索引值，从0开始计数 如果不给index方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。 如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。 如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。 Jq选择器 1、个基本选择器： 基本选择器可以拼接一起来选择某组元素，原则： 对同一个元素描述的多个基本选择器中间没有任何间隔。 如div[name=aa]表示name属性等于aa的div元素（元素名选择器div和属性选择器[name=aa]中间没有任何间隔）。 div.cval表示class值等于cval的div元素，表示class值等于cval是div元素（类选择器.cval 和元素名选择器div之间同样没有任何间隔） #id值 .class值 元素名 //属性 [attr]具有aaa属性

50个实用的JQUERY案例

jquery案例 jquery案例1.如何创建嵌套的过滤器： 1.//允许你减少集合中的匹配元素的过滤器， 2.//只剩下那些与给定的选择器匹配的部分。在这种情况下， 3.//查询删除了任何没（:not）有（:has） 4.//包含class为“selected”（.selected）的子节点。 5..filter(":not(:has(.selected))") jquery案例2.如何重用元素搜索 1.var allItems=$("div.item"); 2.var keepList=$("div#container1div.item"); 3.//现在你可以继续使用这些jQuery对象来工作了。例如， 4.//基于复选框裁剪“keep list”，复选框的名称 5.//符合 6.

jquery案例3.任何使用has()来检查某个元素是否包含某个类或是元素： 1.//jQuery1.4.*包含了对这一has方法的支持。该方法找出 2.//某个元素是否包含了其他另一个元素类或是其他任何的 3.//你正在查找并要在其之上进行操作的东东。 4.$("input").has(".email").addClass("email_icon"); jquery案例4.如何使用jQuery来切换样式表 1.//找出你希望切换的媒体类型（media-type），然后把href设置成新的样式表。 2.$('link[media='screen']').attr('href','Alternative.css'); jquery案例5.如何限制选择范围（基于优化目的）： 1.//尽可能使用标签名来作为类名的前缀， 2.//这样jQuery就不需要花费更多的时间来搜索 3.//你想要的元素。还要记住的一点是， 4.//针对于你的页面上的元素的操作越具体化， 5.//就越能降低执行和搜索的时间。

4：JavaScriptjavaDOM

JavaScript制作页面特效课后练习 1．在某页面中有一个图片和五个超链接，如下图所示，单击不同的数字超链接显示不同的 图片： 图1 图片幻灯片显示效果 提示： （1）默认显示一个图片，五个超链接调用同一个传参函数，参数设置为显示图片的名称。 （2）使用“对象名.属性值”或setAttribute()的方式改变图片的名称。 2．做一个模仿删除用户的页面，功能如下： 默认情况下，在一个Table 里面放置若干用户信息，后面有“删除”链接：

图2 模仿删除用户的页面效果1 点击“删除”链接，弹出对话框，提示用户是否继续操作： 图3 模仿删除用户的页面效果2 用户点击确定后，要删除的一行，自动加上删除线，表示处于删除状态： 图4 模仿删除用户的页面效果3 提示： （1）使用confirm 弹出确认框，如果用户点击“确定”，则返回true，进行下一步操作； （2）定义一个类样式，用来标识删除状态，如果用户点击了“确定”按钮之后，该行所对 应的tr 标签，自动应用该类样式。 3．做一个横向导航菜单，并且每一项均包含一个二级的菜单，效果图如下：

图5 横向导航菜单 当鼠标不在菜单上时，二级菜单不显示，当鼠标移动到任一项上时，显示该项对应的二级菜 单。 提示： （1）使用对象的display 属性可以控制对象的显示与隐藏； （2）使用相对定位/绝对定位来控制二级菜单的显示位置； （3）使用鼠标的两个事件（onmouseove/onmouseout）来触发控制函数。 4．做一个横向不间断滚动的特效，效果图如下：

图6 图片横向滚动特效 要求：图片始终横向向左滚动，并且每一张图片首尾相连，不存在间断。 提示： （1）若要使图片不间断，则需要将图片列表重复一次，这样第一遍的末尾图片和第二遍的 开始图片就能相连了，即使用innerHTML 属性让图片内容翻倍；（2）使用setInterval()方法，可以控制一个函数每隔多少毫秒执行一次； （3）使用绝对定位与相对定位结合，可以使图片所在的层相对于父层的位置可控，方便随 着计时器的执行，left 的值递减；

HTML DOM简要教程

第一部分HTML DOM简介 1 DOM简介 HTML文档对象模型 HTML文档对象模型（Document Object Model）定义了访问和处理 HTML 文档的标准方法。HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。 什么是 DOM？ 通过JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。 DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3） DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。 ?Core DOM 定义了一套标准的针对任何结构化文档的对象 ?XML DOM定义了一套标准的针对XML 文档的对象 ?HTML DOM定义了一套标准的针对HTML 文档的对象 2 DOM节点 节点 根据 DOM，HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的： ?整个文档是一个文档节点 ?每个HTML 标签是一个元素节点 ?包含在HTML 元素中的文本是文本节点 ?每一个HTML 属性是一个属性节点 ?注释属于注释节点 Node层次 节点彼此都有等级关系。 HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。 下面这个图片表示一个文档树（节点树）： 3 DOM节点树 文档树（节点数）

前端面试中常见Vue知识点整理

看看面试题，只是为了查漏补缺，看看自己那些方面还不懂。切记不要以为背了面试题，就万事大吉了，最好是理解背后的原理，这样面试的时候才能侃侃而谈。 不然，稍微有水平的面试官一看就能看出，是否有真才实学还是刚好背中了这道面试题。 一、对于MVVM的理解？ MVVM 是Model-View-ViewModel 的缩写。 ?Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 ?View代表UI 组件，它负责将数据模型转化成UI 展现出来。 ?ViewModel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和Model的对象，连接Model和View。 在MVVM架构下，View 和Model 之间并没有直接的联系，而是通过ViewModel 进行交互，Model 和ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel通过双向数据绑定把View 层和Model 层连接了起来，而View 和Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM 来统一管理。 二、Vue的生命周期 beforeCreate（创建前），在数据观测和初始化事件还未开始 created（创建后），完成数据观测，属性和方法的运算，初始化事件，$el 属性还没有显示出来 beforeMount（载入前），在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。 注意此时还没有挂载html到页面上。 mounted（载入后），在el 被新创建的vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM 对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。 beforeUpdate（更新前），在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

javascript_dom

什么是DOM？ 通过JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西，JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。 在1998年，W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。 所有的浏览器都执行了这个标准，因此，DOM的兼容性问题也几乎难觅踪影了。 DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。 DOM被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）： Core DOM 定义了一套标准的针对任何结构化文档的对象 XML DOM 定义了一套标准的针对XML文档的对象 HTML DOM 定义了一套标准的针对HTML文档的对象。 HTML DOM 节点 HTML文档中的每个成分都是一个节点。 节点 根据DOM，HTML文档中的每个成分都是一个节点。 DOM是这样规定的： ?整个文档是一个文档节点 ?每个HTML标签是一个元素节点 ?包含在HTML元素中的文本是文本节点 ?每一个HTML属性是一个属性节点

注释属于注释节点 Node 层次 节点彼此都有等级关系。 HTML文档中的所有节点组成了一个文档树（或节点树）。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。 文档树（节点数） 请看下面这个HTML文档：

DOM Lesson one

Hello world! 上面所有的节点彼此间都存在关系。 除文档节点之外的每个节点都有父节点。举例， 和的父节点是节点，文本节点"Hello world!"的父节点是节点。 大部分元素节点都有子节点。比方说，节点有一个子节点：