目录

DOM基础

 

DOM简介

DOM(Document Object Model,文档对象模型)将XML/HTML文档构造成一个层次化的节点树,并提供了一系列的应用程序编程接口,以允许程序或脚本动态的访问和修改文档的内容、结构和样式。

内容结构

DOM由W3C进行了标准化,W3C DOM标准中立于平台和语言,分为以下3个部分:

  1. 核心DOM:针对结构化文档的标准模型
  2. XML DOM: 针对XML文档的标注模型
  3. HTML DOM:针对HTML文档的标准模型

标准化历史

DOM标准化的历史如下:

核心DOM

核心DOM定义了一个通用性的,以节点为基础的结构化文档模型,DOM文档模型中的所有内容都是节点,整个文档是一个文档根节点。

基本属性

节点的基本属性如下:

节点类型

核心DOM规范中定义了以下节点类型:

类型说明Type值子节点
Document(文档节点)表示整个文档(DOM树的根节点)9Element(max.one)
ProcessingInstruction
Comment
DocumentType
Element(元素节点)表示标签元素1Text
ProcessingInstruction
Comment
CDATASection
EntityReference
Attribute(属性节点)表示元素的属性2Text
EntityReference
Text(文本节点)表示元素或属性中的文本内容3
CDATASection(CDATA区段节点)表示文档中的 CDATA 区段4
DocumentFragment(文档片段节点)表示轻量级的Document 对象11Text
ProcessingInstruction
Comment
CDATASection
EntityReference
Comment(注释节点)表示注释8

其他还有几个,但一般不太用到,在此暂不列出。

节点层次

节点树中的节点彼此拥有层级关系:父节点(parent),子节点(child)和同胞节点(sibling)等。父节点拥有子节点,同级的子节点被称为同胞节点。 另外一部分节点如元素节点拥有属性节点. DOM规范为节点提供了以下诸多属性,以用于获取节点的层次关联信息。

属性说明
childNodes获取当前节点的所有子节点(※1)
firstChild获取当前节点的第一个子节点(※1)
lastChild获取当前节点的最后一个子节点(※1)
ownerDocument获取该节点的文档根节点,相当与document
parentNode获取当前节点的父节点
previousSibling获取当前节点的前一个同级节点
nextSibling获取当前节点的后一个同级节点
attributes获取当前元素节点的所有属性节点集合(※2)

创建节点

方法说明
document.write()这个方法可以把任意字符串插入到文档中
document.createElement()创建一个元素节点
node.appendChild()将新节点追加到子节点列表的末尾
document.createTextNode()创建一个文本节点
node.insertBefore()将新节点插入在前面
node.replaceChild()将新节点替换旧节点
node.cloneNode()复制节点
node.removeChild()移除节点

HTML DOM

HTML DOM定义了一个HTML文档的文档对象模型。

HTML文档首先是一个XML文档,为简单起见,XML DOM部分也包含在HTML DOM里一并说明。

HTML文档的主要构成元素是各类HTML标签,HTML文档中的标签对应着元素节点。

元素属性

HTML元素的属性有attribute与property两个概念,这两个通常都被翻译成属性,但含义完全不一样。

通常每个attribute都有一个同名的property,property可以看成是attribute的包装器,同时也对attribute值进行必要的类型转换。

HTML:
<input id="input1" type="checkbox" checked= "checked"/>
<input id="input2" type="checkbox" checked= "true"/>

JavaScript:
console.log(document.getElementById("input1").getAttribute("checked")); // checked
console.log(document.getElementById("input1").checked); // true

console.log(document.getElementById("input2").getAttribute("checked"); // true

元素事件

事件阶段(Event Phases)

当一个DOM事件被触发的时候,它并不只是在它的起源对象上触发一次,而是会经历以下三个不同的阶段:

  1. 捕获阶段
    事件的第一个阶段是捕获阶段。事件从文档的根节点出发,随着DOM树的结构向事件的目标节点流去。途中经过各个层次的DOM节点,并在各节点上触发捕获事件,直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径,在冒泡阶段,事件会通过这个路径回溯到文档跟节点。
  2. 目标阶段
    捕获阶段结束,即当事件到达目标节点后,事件就进入了目标阶段,事件在目标节点上被触发。
  3. 冒泡阶段
    事件在目标元素上触发后,并不在这个元素上终止。它会随着DOM树一层层向上冒泡,直到到达最外层的根节点。

事件处理

TODO:待编辑

事件分类

TODO:待编辑

元素样式

TODO:待编辑

视口

TODO:待编辑