JavaScript——驰骋网页的脚本执行者（7）

十、文档对象模型（Dom）

1.Dom的介绍

DOM是JavaScript操作HTML和XML文档API（应用程序编程接口），DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。1998年10月DOM1级规范成为W3C的推荐标准，为基本的文档结构以及查询提供了接口。但是要注意，IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生JavaScript对象的行为或活动特点并不一致。

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标记。每个节点拥有各自的特点，数据和方法，另外也有与其他节点存在某种关系。节点之间的关系构成了层次，所有页面标记则表现为一个以特定节点为根节点的树形结构。

 

 

2.Node类型

DOM1级定义为一个Node接口，该接口将由DOM中的所有节点类型实现。除了IE之外，在其他所有浏览器中都可以访问到这个类型。javascript中所有的节点类型都继承自Node类型，所有节点类型都共享着相同的基本属性和方法。

nodeType ：节点类型，如：

Document：9（type）；Element：1；TextNode：3；Comment：8

（document是Document构造函数的实例，document.body是Element构造函数的实例，document.body.firstChild是Comment构造函数的实例（假设后直接跟注释））

nodeName：节点名称，该属性的值取决于节点类型。如果是元素类型，值为元素的标签名。

nodeValue：节点值内容，该属性取决于节点类型。如果是元素类型，存在null值。

childNodes：孩子节点，该属性保存了一个NodeList对象，NodeList是一种类数组对象用来保存一组有序的节点，NodeList是基于DOM结构动态执行查询的结果，DOM结构变化可以自动反应到NodeList对象中。访问时可以通过中括号访问，也可以通过item()方法访问。可以使用slice方法将NodeList转换为数组。

parentNode：父节点。包含在childNodes列表中所有的节点都具有相同的父节点，每个节点之间都是兄弟节点。

previousSibling：兄弟节点中的前一个节点。

nextSibling：兄弟节点中的下一个节点。

firstChild：childNodes列表中的第一个节点。

lastChild：childNodes列表中的最后一个节点。

ownerDocument：整个文档的文档节点。任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。

 

hasChildNodes()：判断某节点是否有孩子节点。

appendChild()：在childNodes列表末尾添加一个节点，返回值是新增的节点。关系更新后参数节点已经为文档的一部分，任何DOM节点不能同时出现在文档中的多个位置（唯一性），需要父节点对象进行调用；

insertBefore()：在某节点前插入一个节点，第一个参数是要插入的节点，第二个参数是作为参照的节点。第二个参数为null时则会将该节点追加在NodeList后面，需要父节点对象进行调用。

replaceChild()：替换一个节点，第一个参数是要插入的节点，第二个参数是要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置，需要父节点对象进行调用；

removeChild()：移除一个节点，参数为移除的节点，移除的节点将作为方法的返回值。其他方法和任何节点对象都可以调用。

cloneNode()：用于创建调用这个方法的节点的一个完全相同的副本，接收一个布尔类型的参数。参数为true时，表示深复制，即复制节点以及相关子节点；参数为false的时候，表示浅复制，只复制节点本身。该方法不会复制添加到DOM节点中的JavaScript属性，例如事件处理程序等。该方法只复制特定子节点，其他一切都不复制。但是IE中可以复制，建议参考统一标准，在复制之前，移除所有事件处理程序。

normalize()：用于删除文本节点中的空白，由于解析器的实现或DOM操作等原因，可能会出现文本节点不包含文本，或者接连出现两个文本节点，当在某个节点上调用了该方法，会删除空白节点，会找到相邻的两个文本节点，并将他们合并为一个文本节点。

 

3.Document类型

Javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。HTMLDocument继承自Document。

documentElement：始终指向HTML页面中的元素

body：直接指向元素

doctype：访问, 浏览器支持不一致，很少使用

title：获取相应的title

URL：获取相应的URL

domain：获取域名，并且可以进行设置，在跨域访问中经常会用到

referrer：获取链接到当前页面的URL，即来源页面的URL

images：获取所有的img对象，返回HTMLCollection类数组对象

forms：获取所有的form对象，返回HTMLCollection类数组对象

links：获取文档中所有带href属性的元素

 

getElementById()：参数为要取得元素的ID，如果找到则返回该元素，否则返回null。如果页面中多个元素的ID值相同，只返回文档中第一次出现的元素。如果某个表单元素的name值等于指定的ID，该元素也会被匹配。

getElementsByClassName()：参数为一个字符串，可以由多个空格隔开的标识符组成。当元素的class属性值包含所有指定的标识符时才匹配。HTML元素的class属性值是一个以空格隔开的列表，可以为空或包含多个标识符。

getElementsByTagName()：参数为要取得元素的标签名，返回包含单个或者多个元素的NodeList，在HTML文档中该方法返回的是HTMLCollection对象，与NodeList非常类似。可以通过[index/name]、item()或namedItem(name)访问。

getElementsByName()：参数为元素的name属性，返回符合条件的HTMLCollection。

 

4.Element类型

所有的HTML元素都由HTMLElement类型表示，或者其子类型表示。每个HTML元素都应具有如下一些属性以及HTML元素特有的属性。

id：元素在文档中的唯一标识符

title：有关元素的附加说明信息

className：与元素class特性对应

src：img元素具有的属性

alt：img元素具有的属性

lang：元素内容的语言代码，很少使用

dir：语言方向，ltr为左到右，rtl为右到左

每个元素都有一个或者多个特性，这些特性的用途是给出相应元素或内容的附加信息。可以通过属性访问到该属性对应的值，特性的名称是不区分大小写的，即"id"与"ID"表示相同的特性，需要注意的是，根据HTML5规范，自定义特性应该加上data-前缀，以便验证。

 

Element类型存在attributes属性，其中包含一个NamedNodeMap，与NodeList类似。

 

getNamedItem(name)：返回nodeName属性为name的节点

removeNamedItem(name)：从列表中删除nodeName属性为name的节点

setNamedItem(node)：向列表中添加一个节点

item(pos)：返回位于数字pos位置处的节点

getAttribute()：取得自定义属性，参数为实际元素的属性名。calss、name、id、title、lang、dir一般只有在取得自定义特性值的情况下，才会使用该方法，大多数直接使用属性进行访问，比如style和onclick。

setAttribute() ：设置属性，含有两个参数，第一个参数为要设置的特性名，第二个参数为对应的值，如果该值存在，则替换。

removeAttribute()：移除指定的属性/特性。

 

Element类型存在style属性，通过getAttribute()访问时，返回的style特性值中包含的是CSS文本，访问style属性时，返回一个对象。由于style属性是用于以编程方式访问元素样式的，因此并没有直接映射到style特性。

Element类型存在onclick属性，类似onclick()的事件处理程序，通过getAttribute()访问时，返回相应代码字符串；访问onclick属性时，返回一个javascript函数。

 

createElement()：创建一个元素，参数为要创建元素的标签名。该标签名在HTML中不区分大小写，但是在XML中区分大小写。

 

将文档看做是Element对象树，忽略文档Text和Comment节点，Element中的属性有：

children：类似于childNodes，返回NodeList对象，但是该对象中仅包含Element对象

firstElementChild：第一个孩子元素节点

lastElementChild：最后一个孩子元素节点

nextElementSibling：下一个兄弟元素节点

previousElementSibling：上一个兄弟元素节点

childElementCount：子元素的数量，返回值和children.length值相等

innerHTML：元素内容

innerText：文本内容

 

5.Text类型

文本节点，包含的是可以按照字面解释的存文本内容。

length：文本长度

appendData(text)：追加文本

deleteData(beginIndex,count)：删除文本

insertData(beginIndex,text)：插入文本

replaceData(beginIndex,count,text)：替换文本

splitText(beiginIndex)：从beginIndex位置将当前文本节点分成两个文本节点

document.createTextNode()：创建文本节点，参数为要插入节点中的文本

substringData(beiginIndex,count)：从beginIndex开始提取count个子字符串

 

6.Comment类型（注释类型）（略）

 

十一、事件

1.事件介绍

JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

事件三要素：

event target事件目标（发生的事件与之相关联或与之相关的对象）；

event handler事件处理程序（处理或相应事件的函数）；

event object事件对象（与特定事件相关且包含有关该事件详细信息的对象）；

 

2.事件流

事件流描述的是从页面中接受事件的顺序。

事件冒泡（默认事件执行顺序）是指事件开始由最具体的元素接收，然后逐级向上（由内向外）传递到不具体的节点。如：

　　

　　　　

　　

当点击了

元素，这个click事件会按照div.inner->div.center>div.outer的顺序传递。

事件捕获是指不具体的节点更早接收事件，具体的节点到最后才接收事件（由外向内）。如上例子中，当点击了

元素，会按照div.outer->div.center>div.inner方式触发click事件。

DOM事件流规定了事件流包括三个阶段：事件捕获阶段，处理目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会；然后是实际目标接收到事件（并执行处理过程）；最后是事件冒泡。

 

3.事件处理

事件处理的一般过程是先获取事件源，再为事件源绑定事件处理函数。例如：

<div id="outer">
    <div id="center">
        <div id="inner">div>
    div>
div>
<script>
    var outer = document.getElementById("outer");
    var center = document.getElementById("center");
    var inner = document.getElementById("inner");

    var handler = function(event){
        alert(event.currentTarget.id);
        event.stopPropagation();
    };
    outer.onclick = handler;
    center.onclick = handler;
    inner.onclick = handler;
script>

（document支持通过querySelector()以string形式传入CSS选择器作为参数获取元素）

 

4.事件类型

当事件类型（如鼠标点击、鼠标悬浮、键盘按下等等）发生在事件源上时，事件源绑定的事件处理函数就会执行，实现相应的功能。以下为一些常见事件类型：

onload：当完成加载后触发

unload：当完成卸载后触发（firefox不支持）

select：当用户选中文本框的一个或多个字符时触发

resize：当浏览器窗口被调整到一个新的高度或者宽度时触发

scroll：当用户滚动带滚动条的元素内容时触发resize

focus：元素获得焦点的时候触发（不支持冒泡）

blur：元素失去焦点时触发

click：点击主鼠标按钮或者按下回车按键时触发。只有在一个元素上相继发生mousedown和mouseup事件，才会触发click事件

dblclick：双击主鼠标按钮时触发。只有在一个元素上相继触发两次click事件才会触发dbclick事件

mousedown：任意鼠标按钮按下时触发（该事件的event对象中包含了button属性，表示按下或释放的按钮。0表示主鼠标按钮；1表示中间的滚动按钮；2表示次鼠标按钮）

mouseup：释放鼠标按钮触发

mousemove：鼠标在元素内部移动的时候重发触发

mousewheel：鼠标滚动时触发

mouseover：鼠标位于事件元素外部，移入事件元素边界内时触发（支持子元素）

mouseout：鼠标位于事件元素内部，移出事件元素边界外时触发（支持子元素）

mouseenter：鼠标位于事件元素外部，移入事件元素边界内时触发（不支持子元素）

mouseleave：鼠标位于事件元素内部，移出事件元素边界外时触发（不支持子元素）

keydown：按下键盘任意键时触发，如果按住不放会重复触发此事件

keypress：按下键盘字符键时触发，如果按住不放会重复触发此事件

keyup：释放键盘上任意键时触发

当键盘事件发生时，event对象的keyCode属性中会包含一个代码与键盘上的操作键对应，keyCode属性的值与ASCII码中对应的小写字母和数字编码相同

 

5.事件对象

当事件处理函数执行的时候，Dom会将事件对象event传递给事件处理函数（function(event){...}），event中包含了事件的详细信息，它的属性均为只读属性。

 

在事件处理程序内部，对象this始终等于currentTarget值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，this、currentTarget、target值相同。

 

6.事件绑定

（1）调用前置了“on”的事件类型来绑定事件处理函数，如onclick和onkeyup，特点是属性操作，简单，兼容性比较好；

（2）调用addEventListenner()、removeEventListener()方法，非IE低版本兼容。

addEventListener()：事件绑定，参数为：要绑定的事件名、作为事件处理的函数和布尔值（true在捕获阶段调用事件处理程序，false在冒泡阶段调用）

removeEventListener()：事件删除，参数为：要删除的事件名、作为事件处理的函数和布尔值（true在捕获阶段调用事件处理程序，false在冒泡阶段调用）

可以添加多个事件处理程序，并且按照添加她们的顺序触发，移除事件传入的参数与添加处理程序时使用的参数相同。无法操作匿名的事件处理函数。

（3）调用attachEvent()、detachEvent()方法，IE低版本才兼容。（略）

 

可以通过在事件处理函数中添加event.preventDefault()或者return false来阻止元素会发生的默认事件，也可以通过在元素的href属性（如a标签）中写入javascript:void(0);阻止。

 

7.事件代理

事件代理的概念是将事件绑定在当前元素的父辈元素上而非当前元素上，当点击当前元素时，执行父辈元素上绑定的事件处理函数，可以通过event.target获取当前元素，实现针对当前元素的相关操作。

事件代理机制的好处在于，不用为处于变动状态（如添加或删除）的当前事件元素重复绑定事件处理函数，通过父元素就能对其灵活控制。