你真的知道DOM吗?（上）—-(节点层次，DOM集合，Node类型）

序言

DOM（文件格式第一类数学模型）是特别针对HTML和XML文件格式的两个API。DOM描写了两个层级化的结点树，容许开发者加进，去除和修正网页的某一小部分。能说，DOM是前端开发中最重要的两个图形API，它下定决心了网页的式样内部结构的迈向。

节录

结点层级

DOM能将任何人HTML或XML文件格式塑造成两个由第二层结点形成的内部结构，一共有12种结点类别，那些类别都承继自两个基类别，即使当中很多结点只用作XML，责任编辑只对特别针对HTML的结点做两个具体文本如是说，钟爱的老师能他们去如是说余下结点

原素结点(element): 相关联网页的HTML条码原素优点结点(attribute):相关联HTML条码优点文档结点(text):代表者网页中HTML条码文本注解结点(comment):则表示网页中的HTML注解文件格式结点(document):则表示HTML文件格式，也称作根结点，HTML文件格式的文件格式结点多于两个子结点，即<html>原素，称作文件格式原素文件格式类别结点(documentType):包涵着与文件格式的doctype相关的大部份重要信息DTD新闻稿结点(notation)：代表者DTD中新闻稿的记号

下面是相关HTML的相关DOM结点，下面将对前述结点做两个具体文本如是说

HTMLCollection和NodeList

在如是说结点类别以后，我想我们如果FossatHTMLCollection和NodeList有很大的如是说

var collection = document.getElementByTagName(div), // HtmlCollection list = collection.childNodes; // NodeList

Node类别

DOM1级表述了两个NodeUSB，该USB将由DOM中的大部份结点类别同时实现。js中的大部份结点类别都承继自Node类别，因而大部份的结点类别都共享资源着完全相同的基本上优点和方式。

**每个结点都有两个nodeType优点，用作则表示结点类别。**结点类别由在Node类别中表述的下列12个数值常量来则表示

nodeName和nodeValue优点

每个结点都承继了nodeName和nodeValue优点去区分结点的具体文本重要信息，后面再如是说各个结点的时候会具体文本说明

结点关系

childNodes优点：每个结点都有两个childNodes优点，当中保存两个NodeList第一类。NodeList是一种类数组第一类，用作保存一组有序的结点，能通过位置来访问那些结点。NodeList第一类的特别之处在于它是动态的，即DOM的内部结构变化能够自动反应在NodeList中parentNode优点：指向该结点在文件格式树中的父结点previousSibling优点：指向该结点在文件格式树中的前两个同胞结点nextSibiling优点：指向该结点在文件格式树中的后两个同胞结点firstChild优点：指向该结点在文件格式树中的第两个子结点lastChild优点：指向该结点在文件格式树中的最后两个子结点

childNodes优点与其他优点相比更方便一些，即使只需使用简单的关系指针，就能通过它访问文件格式树中的任何人结点

操作结点

appendChild():用作向childNodes列表的末尾加进两个结点。如果传入appendChild中的结点已经是文件格式的一小部分了，那结果就是将该结点从原来的位置转移到新位置，任何人DOM结点也不能同时出现在文件格式上的多个位置上insertBefore():把结点放到childNodes列表中某个特定的位置上。接受两个参数：要插入的结点和作为参数的结点。插入结点后，被插入的结点会变成参照结点的前两个同胞结点（previousSibling)，返回插入结点replaceChild():替换特定结点，接受两个参数：要插入的结点和要替换的结点removeChild():去除特定结点，cloneNode():创建调用这个方式的结点的两个完全相同的副本，接受两个布尔值参数，则表示是否执行深复制。在参数为true的情况下，执行深复制，也就是复制结点及整个子结点树，在参数为false的情况下，执行浅复制，也就是复制结点本身。cloneNode()方式不会复制加进到DOM结点中的js优点，例如事件处理程序等。会复制优点，子结点，其他一切都不会复制normalize():规范化文件格式树中的文档结点，如果找到了空文档结点，则删除它；如果找到相邻的文档结点，则将它们合并为两个文档结点