文档对象模型DOM

文档对象模型DOM文档对象模型DOM简介DOM是针对HTML和 XML文档的一个APINode类型简介DOM1级定义为一个NOde接口，该接口将由DOM中所有节点类型实现JavaScript中所有的节点类型都继承自Node类型，所有的节点类型的共享着相同的基本属性和访问节点关系属性：nodeType表示节点类型Document–> 9document 是Document构造函数的实例Elem

秃头学姐爱喝奶茶

234人浏览 · 2020-08-27 20:09:01

秃头学姐爱喝奶茶 · 2020-08-27 20:09:01 发布

文档对象模型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事件对象