一、DOM简介

什么是DOM？简单地说，DOM是是针对HTML和XML文档的一个API，一套对文档的内容进行抽象和概念化的方法。

学习过ORM的同学可能知道ORM是将数据库中的表映射到类，建立一个表和类的映射模型，类属性为表字段，类实例为表记录，通过操作类和类的实例来对数据库进行增删改查。

DOM就是另一种模型，不同的是DOM是将一个HTML或XML文档映射到一个家谱树，文档中的内容划分为许多类型的节点，这些节点按照原本的层次组成一颗家谱树，通过对家谱树节点的操作来达到对整个文档的增删改查。

也就是说，DOM描绘了一个层次化的节点树，可以使用JS来操作这个节点树，进而改变底层文档的外观和结构。

另外DOM也分为几种不同的等级，这主要是根据每一级推出的时间及主要功能来分的。最开始的DOM（DOM0）在每个浏览器的实现都有很大的区别，大大增加了开发的难度，为此，W3C结合各家优点，推出了一个标准化的DOM（DOM1），主要定义了HTML和XML文档的底层结构。之后推出的DOM2和DOM3则在这个结构的基础上引入了更多的交互能力，其目的在于扩展DOM API，以满足操作XML的需求，同时提供更好的错误处理及特性检测，这些功能的关键是对命名空间的支持，我们在之后会详细讲解。

二、DOM节点树

说到DOM，就必须明白DOM将文档构建节点树的规则，HTML大家都熟悉，那就先来看下DOM节点树的组成。

DOM节点树由节点构成，而节点也是对象，有以下几种类型：

　　（1）最基本的节点是Node，用于抽象的表示文档中一个独立的部分；所有其他类型都继承自Node。

　　（2）Document类型表示整个文档，是一组分层节点的根节点。在JS中，document对象使Document的一个实例。

　　（3）Element节点表示文档中的所有HTML或XML元素，可以用来操作这些元素的内容和特性。

　　（4）另外还有一些节点类型，分别表示属性、文本内容、注释、文档类型、CDATA区域和文档片段。

其中我们最应该关心的的是前三类节点，此外，文本节点与属性节点对我们操控文档也有着很大帮助。

刚刚提到节点也是对象，这就说明了几个问题：

　　（1）每种节点都有其各自的属性和方法。

　　（2）节点之间除了家族关系（层次关系）外，还可能有继承关系（这主要说的是抽象节点Node与其他类型的关系），所以会有继承下来的共有属性与方法。

（一）Node类型

Node节点作为所有节点类型的超类，定义了各类节点共享着的的相同属性和方法：

1. 每个节点都有的属性：

　　（1）NodeType属性：表明节点类型。节点类型由在Node类型中定义的下列12个数值常量来表示，任何节点类型必居其一。

类型 nodeType常数值 描述
Node.ELEMENT_NODE 1 元素节点
Node.ATTRIBUTE_NODE 2 属性节点
Node.TEXT_NODE 3 文本节点
Node.CDATA_SECTION_NODE 4 字符数据节点（文本不会被解析器解析）
Node.ENTITY_REFERENCE_NODE 5 实体引用节点
Node.ENTITY_NODE 6 实体节点
Node.PROCESSING_INSTRUCTION_NODE 7 处理指令节点
Node.COMMENT_NODE 8 注释节点
Node.DOCUMENT_NODE 9 文档节点（DOM树的根节点）
Node.DOCUMENT_TYPE_NODE 10 向为文档定义的实体提供接口
Node.DOCUMENT_FRAGMENT_NODE 11 表示邻接节点和它们的子树。
Node.NOTATION_NODE 12 代表一个符号在DTD中的声明

　　（2）childNodes属性：指向一个NodeList对象（包含一组同胞节点）。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。NodeList的独特之处在于，他实际上是基于DOM结构动态执行查询的结果，这种特性的好处是DOM结构的变化能够自动反映在NodeList对象中，但也会产生一些问题，之后我们会讲到，主要是内存占用方面。另外还有一种HTMLCollection对象，和NodeList很类似，主要区别在于NodeList保存所有类型的节点，HTMLCollection只保存Element类型的节点，以及多一个namedItem方法（传入name属性返回节点）。

　　（3）parentNode、previousSibling、nextSibling属性：分别指向父节点、前一个同胞节点、后一个同胞节点。

2. 每个节点都有的方法：

　　（1）appendChild()：用于向childNodes列表的末尾添加一个节点，返回新增的节点。

　　（2）insertBefore()：定位插入子节点，返回新增的节点。

　　（3）replaceChild()：替换节点，返回被替换的节点。技术上将，这个是将旧节点的所有关系指针复制到新节点上，同时删除自身关系，这样旧节点就成了一个孤儿节点，在文档中没有了自己的位置。

　　（4）removeChild()：移除节点。也是通过删除关系指针的方式。

（二）Document类型

JS通过Document类型表示文档。在浏览器中，doucument对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。而且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问。Document节点具有下列特征：nodeType为9，nodeName为“#document”，nodeValue为null，parentNode为null，其子节点可能是一个Document、Element、ProcessingInstruction或Comment。

1. document子节点的快捷方式

（1）document.documentElement：指向<html>元素，等价于document.childNodes[0]和document.firstChild

（2）document.body：指向<body>元素

（3）document.doctype：指向<!DOCTYPE>的引用。由于各浏览器差别较大，因此这个属性用处很有限。

2. 文档信息

document对象的实例属性提供了网页的一些信息，包括title、URL、domain、referrer。

3. 查找元素

getElement系列：（1）ById，按Id查找，如果多个元素Id相同，则取第一次出现的元素。

（2）ByTagName，按标签名查找，返回一个NodeList，在HTML中返回HTMLCollection，可通过下标的方式取得单个元素。（下标值为数值-->调用item；下标值为字符串-->调用namedItem）

（3）ByName，HTML特有，返回一个HTMLCollection

（4）ByClass，HTML5新增，返回一个HTMLCollection

4. 特殊集合

常用的HTMLCollection对象：（1）document.anchors，包含所有带name特性的<a>元素。

（2）document.forms，包含所有<form>元素。

（3）document.images，包含所有<img>元素

（4）document.links，包含所有带href特性的<a>元素。

5. DOM一致性检测

由于DOM分为多个级别，也包含多个部分，因此检测浏览器实现了DOM的哪些部分就十分必要了。document.implementation属性就是为此提供信息和功能的对象，与浏览器对DOM的实现直接对应。DOM1级只为document.implementation规定了一个方法，即hasFeature()。这个方法接受两个参数：要检测的DOM功能的名称及版本号。如果浏览器支持给定名称和版本的功能，则该方法返回true。与之类似的还有一个isSupported()方法（在DOM2中规定），但这两个方法都有一个问题，不同实现对什么特性返回true或false并不一致，所以最好还是使用能力检测（在编写代码前先检测浏览器的能力）。

6. 文档写入

（1）write()、writeln()：动态写入内容，注意参数要先转义。

（2）open()、close()：打开和关闭网页的输出流。

（三）Element类型

Element类型用于表现文档元素，提供了对元素标签名、子节点及特性的访问。Element节点具有以下特征：nodeType为1，nodeName为元素标签名（tagName属性），nodeValue为null，parentNode可能是Document或Element，其子节点可能是Element、Text、Comment等

1. HTML元素

所有HTML元素都有HTMLElement类型表示（继承自Element），有如下属性:id、title、lang、dir、className

2. 操作特性

getAttribute()、setAttribute()、removeAttribute()

3. attributes属性

指向一个NamedNodeMap对象，对象保存了元素的每一个Attr节点。NamedNodeMap对象拥有下列方法：getNamed()、removeNamedItem()、setNamedItem()、item(pos)返回指定位置的节点。

4. 创建元素

第一步：document.createElement():创建新元素，同时设置新元素的ownerDocument属性。参数可以是标签名，也可以是完整的元素标签。

第二步：用之前提到过的append、insert或replace方法把新元素添加到文档树。

5. 元素的子节点

childNodes属性，包含了元素间所有的节点。如果只想获得元素子节点，可以调用getElementTagName方法。

（四）Text类型

文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容。纯文本可以包含转义后的HTML字符，但不能不含HTML代码。Text节点具有以下特征：nodeType为3，nodeName为"#text"，nodeValue为节点所包含的文本（data属性），parentNode是一个Element，没有子节点。

1. 属性：节点.length = nodeValue.length = data.length

2. 操作文本节点的方法有：appendData()、deleteData()、insertData()、replaceData()、splitText()、substringData()

3. 创建文本节点：参考element节点

4. 规范文本节点：normalize()合并相邻文本节点，splitText()分割文本节点。

（五）Comment类型

注释在DOM中是通过Comment类型来表示的。Comment节点具有以下特征：nodeType为8，nodeName为"#comment"，nodeValue为注释的内容，parentNode可能是Document或Element，没有子节点。

除没有splitText()方法外和Text类型基本一致。

（六）Attr类型：存在于元素的attributes属性中的节点。

---

还有其他几种类型，但在开发中使用概率不是很高，可以用到时再深入学习。

理解了DOM节点，就已经能够对文档进行基本操作，剩下的就是学习DOM的拓展与升级了，这些我们会在下一篇进行讨论。

JS之DOM（一）的更多相关文章

  1. js的DOM对象

    1.js的Array对象           ** 创建数组(三种)                          - var arr1 = [1,2,3];                    ...

  2. python学习笔记十三 JS，Dom（进阶篇）

    JS介绍 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用:JavaScript 是因特网上最流 ...

  3. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  4. JavaScript基础15——js的DOM对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jQuery对象与JS原生dom对象之间的转换

    jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对 ...

  6. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  7. JS的DOM操作及动画

    JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...

  8. js操作DOM对象

    js操作DOM对象  (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...

  9. DOM是什么？有什么用处？js与DOM啥关系？

    本文转载于:https://blog.csdn.net/u012155729/article/details/78135393 转载仅供自己后期学习 DOM简介大家都想知道dom是什么,翻了各种文档, ...

  10. 继续JS之DOM对象二

    前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele ...

随机推荐

  1. .NET 5.0 RC2 发布，正式版即将在 11 月 .NET Conf 大会上发布

    原文:http://dwz.win/ThX 作者:Richard 翻译:精致码农-王亮 说明:本译文舍弃了少许我实在不知道如何翻译但又不是很重要的语句. 今天(10月13日)我们发布了 .NET 5. ...

  2. C语言/C++编程学习：送给考计算机二级的同学：公共基础知识总结！

    数据结构与算法 1.算法 算法:是指解题方案的准确而完整的描述. 算法不等于程序,也不等计算机方法,程序的编制不可能优于算法的设计. 算法的基本特征:是一组严谨地定义运算顺序的规则,每一个规则都是有效 ...

  3. selenium切换iframe

    from selenium import webdriver br = webdriver.Chrome() br.get("tps://study.163.com/") ifra ...

  4. springboot打成jar包和war包的两种方式，并引入第三方jar包！

    springboot打成jar包和war包的两种方式,并引入第三方jar包! 首先把需要引入的第三方jar包引入到本地项目中,在引用的模块下加一个lib文件夹 一.打成jar包 1.修改pom文件里的 ...

  5. 带你了解 MySQL Binlog 不为人知的秘密

    MySQL 的 Binlog 日志是一种二进制格式的日志,Binlog 记录所有的 DDL 和 DML 语句(除了数据查询语句SELECT.SHOW等),以 Event 的形式记录,同时记录语句执行时 ...

  6. 洛谷 P6419 Kamp 题解

    明天就SX AFO了交篇题解%一下 这题大概是我第一道有独立思考切掉的紫题 之前的都是各种抄借鉴题解 为什么写这题的题解呢?另一个重要的原因是这样的↓ 翻了翻已有题解中的几篇,下面几种情况屡见不鲜 样 ...

  7. for循环结构中的3个表达式缺一不可？

    do-while循环结构结束条件是while后的判断语句不成立for循环结构中的3个表达式都可以为空的.

  8. [分享] 通过修改CSS自定义chrome滚动条样式

    首先得说一句 我不懂CSS的写法之类的 这段CSS也是在网上找的 所以有更先进的需求的话 我肯定不能满足你们了 不好意思效果图在10楼有人上了 我这边不管怎么弄 上传图片都卡在96% 而且不翻wall ...

  9. JUC---03Lock(一)ReentrantLock

    1.什么是锁 在以前实现多线程的同步操作时,都是添加synchronized关键字或者synchronized代码块:而锁实现提供了比使用同步方法和语句可以获得的更广泛的锁操作.它们允许更灵活的结构, ...

  10. Pytest里面的测试用例怎么进行前置准备和后置清理操作？

    Pytest处理前置后置有两种方式可以处理. 第一种是通过setup和teardown这样的方法去处理: 第二种是通过fixture来实现的.首先先定义fixture,然后在调用.定义fixture, ...