3.1 文档：DOM中的“D”
（1）当创建了一个网页并把它加载到Web浏览器中时，DOM把你编写的网页文件转换成一个文档对象。
3.2 对象：DOM中的“O”
（1）“对象”是一种自足的数据集合。
（2）与某个特定对象相关联的变量被称为这个对象的属性。
（3）只能通过某个特定对象去调用的函数被称为这个对象的方法。
（4）JavaScript语言里的对象可以分为三种类型：
<1>用户定义对象：由程序员自行创建的对象。
<2>内建对象：内建在JavaScript语言里的对象。
<3>宿主对象：由浏览器提供的对象。
（5）window对象对应着浏览器窗口本身，这个对象的属性和方法通常统称为BOM。
（6）document对象的主要功能就是处理网页内容。
3.3 模型：DOM中的“M”
（1）DOM中的“M”代表着“Model”，也可以说代表着“Map”，含义都是某种事物的表现形式。
（2）DOM代表着加载到浏览器窗口的当前网页。浏览器提供网页的Model（或者说Map），而我们可以通过JavaScript去读取这个Model。
（3）DOM把一份文档表示为一棵家谱树。
3.4 节点
3.4.1 元素节点
（1）DOM的原子是元素节点。
3.4.2 文本节点
（1）在XHTML文档里，文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含有文本节点。
3.4.3 属性节点
（1）属性节点用来对元素节点做出更具体的描述。
（2）因为属性节点总是被放在起始标签里，所以属性节点总是被包含在元素节点中。
（3）并非所有的元素节点都包含属性节点，但所有的属性节点都被元素节点包含。
3.4.4 CSS
（1）可以通过CSS告诉浏览器应该如何显示一份文档的内容。
（2）CSS声明元素样式的语法：
selector{
property: value;
}
（3）继承是CSS技术中的一项强大功能，CSS也把文档的内容视为一棵节点树，节点树上的各个元素将继承其父元素的样式属性。
（4）为了把某一个或某一些元素与其他元素区别开来，需要使用id属性或class属性。
3.4.5 获取元素
（1）有3种DOM方法可获取元素节点，分别通过元素id、通过标签名字和通过类名字：
<1>getElementById，这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。
document.getElementById(id)
注：事实上，文档中的每一个元素都是一个对象。
<2>getElementByTagName，这个方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。
element.getElementByTagName(tag)
<3>getElementByClassName，这个方法让我们能够通过class属性中的类名来访问元素。
element.getElementByTagName(tag)
3.4.6 盘点知识点
3.5 获取和设置属性
3.5.1 getAttribute
（1）getAttribute是一个函数，它只有一个参数——你打算查询的属性名字：
object.getAttribute(attribute)
（2）getAttribute方法不属于document对象，所以不能通过document对象调用，它只能通过元素节点对象调用。
3.5.2 setAttribute
（1）setAttrsibute与getAttrsibute一样，只能用于元素节点。setAttrsibute允许我们对于属性节点的值做出修改。
object.setAttribute(attribute, value)
（2）一个值得注意的细节：通过setAttribute对文档做出修改后，在通过浏览器的view source选项去查看文档源码时看到的仍是改变前的属性值，也就是说，setAttribute做出的修改不会反映在文档本身的源代码里。
（3）DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是DOM真正的威力：对页面内容进行刷新却不需要在浏览器里刷新页面。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
