JavaScript<四>_DOM

DOM

DOM：document objectmodel 文档对象模型，使得用户可以与网页做互动；其实就是将标记型的文档以及文档中的内容当成对象。

为什么要将这些文档以及其中的标签封装成对象呢？

因为可以在对象中定义其属性和行为，可以方便操作这些对象。

dom三层模型

dom1：将html文档封装成为对象；

dom2：将xml文档封装成对象；

dom3：将xml文档封装成对象；

标签之间存在着层次关系：

html

    |--head

        |--title

        |--base

        |--meta

        |--link

        |--style

        |--script

    |--body

        |--table

            |--tbody

                |--tr

                    |--td

                    |--th

        |--div

        |--form

        |--a

通过这个标签层次，可以形象的看做是一个树形结构，成为标签型文档，加载进内存的是一颗DOM树。这些标签以及标签的数据都是这棵树上的节点。

当标记型文档加载进内存，那么内存中有一个对应的DOM树。

DOM对已标记型文档的解析有一个弊端就是文档过大，相对耗费资源，对于大型文档可以使用SAX这种方式解析。

DOM树：节点

DHTML：动态html 包含html、css、dom、javascript，多项技术的综合体。

html：将数据进行标签的封装

dom：将标签以及标签中的数据封装成对象

css：负责标签中数据的样式

javascript：将三者进行融合，通过程序设计的方式来完成动态效果的操作。

节点类型：标签型节点：类型1

        属性节点    类型2

        文本型节点：类型3

        注释型节点：类型8

        document 类型9

注意：标签之间存在空行时，会出现一个空白的文本节点，在获取节点时一定要注意。

节点的关系：

父节点，

子节点

兄弟节点

    上一个兄弟节点

    下一个兄弟节点

获取通过节点的层次关系完成。

也可以通过document对象完成：

getElementById：通过id属性值获取对应的节点对象，如果有多一个id值相同，获取到的是第一个id所属对象，尽量保证ID的唯一性，返回的是一个对象。

getElementsByName:通过标签的name属性值获取对象，返回的是一堆对象，其实是一个对象的数组。

getElementsByTagName:即没有id没有name时，可以通过标签名来获取节点对象，返回的是一堆对象，其实是一个对象数组，大多数容器型标签都具备该方法。