DOM编程

DOM的理解

1.D：当创建了一个网页并把它加载到Web浏览器中时，DOM就生成了，它将我们编写的网页文档转换成一个文档对象。

2.O：“对象”是一种自足的数据集合，相关联的变量称为这个对象的属性，只能通过这个对象调用的函数称为这个对象的方法。

JS中的对象可以分为三种类型：
A、用户定义对象：程序员自行创建的对象。
B、内建对象：Array、Math、Date
C、宿主对象：由浏览器提供的对象。

JS最初版本中，非常重要的一些宿主对象就可以使用了，最基础的对象是Window对象。Window对象对应着浏览器窗口本身，这个对象的属性和方法通常统称为BOM。

更好理解：（window object model）窗口对象模型。
document对象的主要功能就是处理网页内容。

3.M：model map 某种事物的表现形式

DOM代表着加载到浏览器窗口的当前网页。浏览器提供了网页的地图，我们可以通过JS去读取这张地图。要想从DOM获得信息，必须先把各种表示和描述文档的“图例”弄明白。
DOM把文档表示为一颗家谱树。

家谱树、节点树：使用parent、child、sibling等记号来表明家族成员之间的关系。

根元素是html

4.节点： 文档是由节点构成的集合。

1. 元素节点：DOM的原子是元素节点。这些元素在文档中的布局形成了文档的结构。
2. 文本节点：文本节点总是被包含在元素节点的内部，或者间接包含。
3. 属性节点：用来对元素做出更具体的描述，因为属性节点总是被放在起始标签里，所以属性节点总是被包含在元素节点中，所有的属性节点都被元素包含.
4. CSS：DOM并不是唯一和网页结构打交道，CSS告诉浏览器应该如何显示一份文档的内容。

继承是CSS技术中的一项强大功能，类似于DOM，CSS也把文档的内容视为一颗节点树，节点树上的各个元素将继承其父元素的样式属性。
有时我们需要将某些样式作用于某个特定的元素，需要把元素与其他元素区分开，需要使用class属性或id属性。

calss属性：为相同的class属性值相同的所有元素定义同一种样式。

id属性：给页面里的某个元素加上一个独一无二的标识符。

id属性就像是一个挂钩，一头连接着文档里的某个元素，另一头连着CSS样式表里的某个样式。DOM也可以使用这种挂钩。

5 .获取元素
有三种DOM方法可以获取元素节点：
getElementById
返回一个对象。
document对象特有的函数。
document.getElementById(‘xxx’);

文档中的每一个元素都是一个对象，利用DOM提供的方法能得到任何一个对象。

getElementsByTagName
返回一个对象数组
document.getElementsTagName(‘li’);

即使这个标签只有一个元素，也返回一个数组。

getElementsByClassName
返回一个对象数组
document.getElementsClassName(‘yyy’);

也可以结合使用，比如，只要id为xxx的里面的元素。

这个函数，IE8以下有兼容问题。

6.获取和设置属性（只能用于元素节点）
getAttribute
object.getAttribute(attribute);
getAttribute方法不属于document对象，只能通过元素节点对象调用。


如果它们没有某个属性，将会是返回空白或者null.

这种表里不一的现象源自DOM的工作模式：
先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。
这正是DOM的真正作用：对页面内容进行刷新却不需要在浏览器里刷新页面。
这几种方法，是将要编写的许多DOM脚本的基石。