哈哈，怎么样，不错吧~
好，接下在就是万众期待(其实只有LZ期待吧= =+)的DOM
DOM的全称是document object model，怎么理解这个东西挺关键的，我看了不少定义，有的说它是个平台，有的说它是个接口，anyway，我打开了它的官方guide网站：
它对DOM的定义是：
The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.
我来简单翻译下好了：DOM是个平台/语言的中间接口，它可以允许程序和脚本动态的访问和更新内容、架构以及文件style。文件可以被进一步处理并将结果返回到显示页面。
其实这么说我看了也还是云里雾里，所以可以这么理解，DOM是个大家为了编程方便，传输速度快而统一起来的，基于树规范，它跟浏览器是没有关系的。DOM的基本思想就是树形结构，比如HTML文件，就是一个树形结构。DOM是没有跟任何语言绑定的，我们利用js可以对html dom进行动态的修改。
DOM有三个级别，可以分为:core Dom, XML DOM(*), HTML DOM三部分。中间那个是作为文档传输标准，使用很广泛的，但是这里就着重讲HTML DOM。
DOM把文档分为带有：元素、属性、文本 的树形结构，然后将这些作为结点来构造文档的树形结构，这样，就可以通过一个结点访问到所有的结点。
之前给出的那个网站（https://www.jb51.net/w3school/js/jsref_obj_string.htm）里面有比较全的DOM的玩意儿，可以用来参考，但是用来做教程还是有点生硬。
我打算先介绍节点类型，然后再对应到代码里。
节点类型介绍(复制来自https://www.jb51.net/w3schools/jsref/dom_obj_node.htm)
Node type
Description
Children
Value
Constant
Element
Represents an element
Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
1
ELEMENT_NODE
Attr
Represents an attribute
Text, EntityReference
2
ATTRIBUTE_NODE
Text
Represents textual content in an element or attribute
None
3
TEXT_NODE
CDATASection
Represents a CDATA section in a document (text that will NOT be parsed by a parser)
None
4
CDATA_SECTION_NODE
EntityReference
Represents an entity reference
Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
5
ENTITY_REFERENCE_NODE
Entity
Represents an entity
Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
6
ENTITY_NODE
ProcessingInstruction
Represents a processing instruction
None
7
PROCESSING_INSTRUCTION_NODE
Comment
Represents a comment
None
8
COMMENT_NODE
Document
Represents the entire document (the root-node of the DOM tree)
Element, ProcessingInstruction, Comment, DocumentType
9
DOCUMENT_NODE
DocumentType
Provides an interface to the entities defined for the document
None
10
DOCUMENT_TYPE_NODE
DocumentFragment
Represents a "lightweight" Document object, which can hold a portion of a document
Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
11
DOCUMENT_FRAGMENT_NODE
Notation
Represents a notation declared in the DTD
None
12
NOTATION_NODE
好，大约知道了这些之后，我们用一个小的html文件来查看DOM的树形结构：
HTML文本
复制代码 代码如下: