文档对象模型DOM
文档对象模型DOM
简介
- DOM是针对HTML和 XML文档的一个API
Node类型
-
简介
- DOM1级定义为一个NOde接口，该接口将由DOM中所有节点类型实现
- JavaScript中所有的节点类型都继承自Node类型，所有的节点类型的共享着相同的基本属性和访问
-
节点关系属性：
-
nodeType
-
表示节点类型
-
Document–> 9
- document 是Document构造函数的实例
-
Element -->1;
- document.body是Element构造函数的实例
-
TextNode -->3;
- document.body.firstChild 是TextNode构造函数的实例
-
Comment–> 8
-
-
-
nodeName
- 该属性取决于节点类型，如果是元素类型，值为元素的标签名
-
nodeValue
- 该属性取决于节点类型，如果是元素类型，值有null
-
childNodes
-
保存一个NodeList对象，NodeList是一种类数组对象用于保存一组有序的节点
-
访问时可以通过中括号访问，也可以通过item()方法访问
-
可以使 用slice方法将NodeList转换为数组
- var arr = Array.prototype,slice.call(node,0)
-
-
parentNode
- 指向文档树中的父节点。
- 包含在childNodes列表中所有的节点都具有相同的父节 点，每个节点之间都是同胞/兄弟节点。
-
previousSibling
- 兄弟节点中的前一个节点
-
nextSibling
- 兄弟节点的下一个节点
-
firstChild
- childNodes列表中的第一个节点
-
lastChild
- childNodes列表中的最后一个节点
-
ownerDocument
- 指向表示整个文档的文档节点。
- 任何节点都属于它所在的文档，任何节点都不能 同时存在于两个或更多个文档中。
-
hasChildNode
- 在包含一个或者多个子节点的情况下返回true
-
-
操作节点
-
appendChild（）
- 向childNodes列表末尾添加一个节点
- 返回新增的节点
- 关系更新如果参数节点已经为文 档的一部分，位置更新而不插入
- dom树可以看做是由一系列的指针连接起来的，
- 任何 DOM节点不能同时出现在文档中的多个位置
-
insertBefore（）
- 第一个参数：要插入的节点
- 第二个参数：作为参照的节点
- 被插入的节点会变成参照节点的前一个同胞节点,同时被方法返回。
- 如果第二个参数为null 将会将该节点追加在NodeList后面
-
replaceChild（）
- 第一个参数：要插入的节点
- 第二个参数：要替换的节点
- 要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置
-
removeChild（）
- 一个参数，即要移除的节点。
- 移除的节点将作为方法的返回值。
-
cloneNode（）
- 用于创建调用这个方法的节点的一个完全相同的副本。
- 有一个参数为布尔类型参数为true 时，表示深复制，即复制节点以及整个子节点数。
- 参数为false的时候，表示浅复制， 只复制节点本身。
- 该方法不会复制添加到DOM节点中的JavaScript属性，例如事件处 理程序等。该方法只复制特定,子节点，其他一切都不复制。
- 但是IE中可以复制，建议 标准相同，在复制之前，移除所有事件处理程序。
-
normalize()
- 处理文档树中的文本节点，由于解析器的实现或DOM操作等原因，可能会出现文本节点 不包含文本，或者接连出现两个文本节点，当在某个节点上调用了该方法，会删除空 白节点，会找到相邻的两个文本节点，并将他们合并为一个文本节点。
-
Document类型
-
简介
- Javascript通过使用Document类型表示文档。
- 在浏览器中，document对象是 HTMLDocument的一个实例，表示整个HTML页面。
- document对象是window对象的一个 属性，因此可以直接调用。
- HTMLDocument继承自Document。
-
文档子节点
-
documentElement
- 始终指向HTML页面中的元素。
-
body
- 直接指向元素
-
doctype
- 访问<!DOCTYPE>, 浏览器支持不一致，很少使用
-
title
- 获取文档的标题
-
URL
- 取得完整的URL
-
domain
- 取得域名，并且可以进行设置，在跨域访问中经常会用到。
-
referrer
-
取得链接到当前页面的那个页面的URL，即来源页面的URL。
-
-
images
- 获取所有的img对象，返回HTMLCollection类数组对象
-
forms
- 获取所有的form对象，返回HTMLCollection类数组对象
-
link
-
获取文档中所有带href属性的<a>元素
-
-
-
查找元素
-
getElementById()
- 参数为要取得元素的ID，如果找到返回该元素，否则返回null。如果页面中多个 元素的ID值相同，只返回文档中第一次出现的元素。如果某个表单元素的name值等 于指定的ID，该元素也会被匹配。
-
getElementsByTagName()
- 参数为要取得元素的标签名，返回包含另个或者多个元素的NodeList，在HTML 文档中该方法返回的是HTMLCollection对象，与NodeList非常类似。可以通过 [index/name],item(),namedItem(name)访问
-
getElementsByName()
- 参数为元素的name,返回符合条件的NodeList
-
getElementsByClassName()
- 参数为一个字符串，可以由多个空格隔开的标识符组成。当元素的class属性值 包含所有指定的标识符时才匹配。HTML元素的class属性值是一个以空格隔开的列 表，可以为空或包含多个标识符。
-
Element类型
-
简介
- 所有的HTML元素都由HTMLElement类型表示，或者其子类型表示。
-
属性
-
id
- 元素在文档中的唯一标识符
-
title
- 有关元素的附加说明信息
-
className
- 与元素class特性对应
-
src
- img元素具有的属性
-
alt
- img元素具有的属性
-
lang
- 元素内容的语言代码，很少使用！
-
dir
- 语言方向，ltr,rtl 左到右，右到左、
-
-
自定义属性
-
根据HTML5规范，自定义特性应该加上data前缀，以便验证。
-
获取自定义属性
-
getAttribute（）
- 参数为实际元素的属性名
-
-
设置自定义属性
-
setAttribute（）
- 第一个参数为要设置的特性名，
- 第二个参数为对应的值。如果 该值存在，替换
-
-
-
移除属性
-
removeAttribute（）
- 移除指定特性
-
-
attributes属性
-
创建元素
-
document.createElement()
- 参数为要创建元素的标签名。
-
-
特殊特性
-
style
- 通过getAttribute()访问时，返回的style特性值中包含的是CSS文本，而通过属性 来访问返回一个对象，由于style属性是用于以编程方式访问元素样式的，因此并没有直接映射 到style特性
-
onclick
- 类似的事件处理程序，通过getAttribute()访问时，返回相应代码字符串；访问 onclick属性时，返回一个javascript函数
-
-
作为文档树的文档
-
将文档看做是Element对象树，忽略文档Text,Comment节点。Element中的属性
-
children
- 类似于childNodes,返回NodeList对象，但是该对象中仅包含Element对象
-
firstElementChild
- 第一个孩子元素节点
-
lastElementChild
- 最后一个孩子元素节点
-
nextElementSibling
- 下一个兄弟元素节点
-
previousElementSibling
- 上一个兄弟元素节点
-
childElementCount
- 子元素的数量，返回值和children.length值相等
-
-
-
元素内容
-
innerHTML
- 返回元素内容，包括html标签
-
innerText
- 元素内部的文本，去除回车和换行
-
textContent
- 元素内部的文本，不去除空格和回车
-
Text类型（文本类型）
Comment类型（注释类型）
DOM事件
简介
- JavaScript与HTML之间的交互是通过事件实现的
- 事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间
事件三要素
-
事件目标（event target）
- 发生的事件与之相关联获与之相关的对象
-
事件处理程序（event handler）
- 处理或相应事件的函数
-
事件对象（event object）
- 与特定事件相关且包含有关事件详细信息的对象
事件流
-
描述对的是从页面中接收事件的顺序
-
事件冒泡（IE事件流）
-
从内往外
- div->body->html->document
-
事件开始由最具体的元素接收，然后逐级向上传播到不具体的节点
-
-
事件捕获（Netscape事件流）
-
从外到内
- document->html->body->div
-
不太具体的节点更早接收事件，具体的节点到最后接收事件
-
-
DOM事件流
-
事件捕获阶段
- document->html->body
-
处理目标阶段
- 事件处理
-
事件冒泡阶段
- body->html->document
-
-
事件处理程序
-
响应某个事件的函数为事件处理程序， 事件处理程序以"on"开头(onclick,onload)
-
HTML事件处理程序
-
某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。 这个特性的值应该是能够执行的JavaScript代码。
- 点击按钮会调用showMsg()函数，事件处理程序的代码在执行时，有权访问全局作用域的任 何代码。
-
缺点
- 1)时差问题，用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时 的事件处理程序有可能尚不具备执行的条件。
- 2)这种扩展事件处理程序的作用域链在不同 浏览器中会导致不同结果。
- 3)HTML与JavaScript代码紧密耦合。
-
-
DOM0级事件处理程序
-
通过javascript指定事件处理程序的传统方式，将一个函数赋值给一个事件处理程序 属性。
- var btn = document.getElementById(“btn”); btn.onclick = function(){ alert(‘cliked’); }
-
特点是简单，跨浏览器。
-
dom0级方法制定的事件处理程序被认为是元素的方法，因此这个时候事件处理程序 是在元素的作用域中运行，this指向当前元素。
-
btn.onclick = null; //删除事件处理程序
-
-
DOM2级事件处理程序
-
非IE事件处理程序
-
addEventListener（） 事件绑定
-
参数
-
要绑定的事件名 不加前缀on
-
作为事件处理的函数
-
布尔值
- true在捕获阶段调用事件处理程序；
- false在冒泡阶段调用【默认】
-
-
-
removeEventListener（） 事件解绑
-
参数
-
要绑定的事件名 不加前缀on
-
作为事件处理的函数
-
布尔值
- true在捕获阶段调用事件处理程序；
- false在冒泡阶段调用【默认】
-
-
-
补充
- 可以添加多个事件处理程序，并且按照添加他们的顺序触发
- 移除事件传入的参数与添加处理程序时使用的参数相同
- 添加事件时如果使用匿名函数将无法删除
-
-
IE事件处理程序
-
简介
- 事件处理程序会在全局作用域中运行，因此this指向window对象。
- 为一个对象添加两 个相同的事件，事件处理程序的顺序是按照添加相反顺序进行处理。
-
attachEvent（） 事件绑定
-
参数
- 事件类型，加前缀on
- 事件处理函数
-
-
detachEvent（） 事件移除
-
参数
- 事件类型，加前缀on
- 事件处理函数
-
-
-
-
-
事件对象
-
DOM事件对象
-
简介
- 在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有 与事件相关的信息，包括导致事件的元素，事件的类型以及其他与特定事件相 关的信息。
- 兼容DOM的浏览器默认会将event对象传入到事件处理函数中。
- 事件对象的属性均为只读属性
-
bubbles
-
Boolean类型
- 事件是否冒泡
-
-
cancelable
-
Boolean类型
- 是否可取消事件默认行为
-
-
currentTarget
-
Element类型
- 事件处理程序当前正在处理事件的那个元素
-
在事件处理程序内部，对象this始终等于 currentTarget 的值
-
-
eventPhase
-
Integer类型
- 调用事件处理程序的阶段;1捕获 2处于目标 3冒泡
-
-
target
-
Element类型
- 事件真正目标
-
-
type
-
String类型
- 事件类型，需要一个函数，处理多个事件时，可使用该属性。
-
-
preventDefault()
-
Function类型
- 取消事件的默认行为
-
-
stopPropagation()
-
Function类型
- 取消事件的进一步捕获或者冒泡
-
-
-
IE事件对象
事件类型
- UI事件
- 焦点事件
- 鼠标与滚轮事件
- 键盘与文本事件
扫一扫
2160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
