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经常被称为DHTML(Dynamic HTML,动态HTML)
  • DOM级别1规范
    发布于1998年10月1日,专注于HTML和XML文档模型
  • DOM级别2规范
    发布于2000年11月13日,对DOM级别1添加了样式表对象模型和事件处理模型
  • DOM级别3规范
    从2004年开始陆续发布,对DOM级别2作了系列扩展

核心DOM

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

基本属性

节点的基本属性如下:

  • nodeType
    获取节点的类型。例如 1代表元素节点,2代表属性节点,3代表文本节点,通常这三类节点使用的最为普遍.
  • nodeName
    获取节点的名称。如果节点是元素节点，则 nodeName属性返回标签名;如果节点是属性节点，则nodeName属性返回属性的名称;其他节点类型,nodeName属性将返回不同节点类型的不同名称。
  • nodeValue
    设置或返回节点的值。如果节点是元素节点或文档节点，nodeValue属性值为null;如果节点是属性节点，nodeValue代表属性的值;如果节点是文本节点，nodeValue代表节点的内容;如果节点是注释节点，nodeValue代表注释的内容

节点类型

核心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)
  • ※1 部分类型的节点如文本节点等没有子节点.
  • ※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是HTML标签属性，设计期在文档中直接记述，运行期可以通过Node的接口方法getAttribute(name)和setAttribute(name,value)进行访问。attribute值只存在文字列类型。
  • 而property是JS对象属性，运行期象一般的JS对象访问一样直接元素进行操作。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:待编辑


跳至内容顶部