第三章 DOM
1.文档:DOM中的D
当创建了一个网页并把它加载到web浏览器中时,DOM就在幕后悄然而生,它把你编写的网页文档转换成一个文档对象.
2.对象:DOM中的O
- JavaScript对象的三种类型
- 用户定义对象
- 宿主对象
- 内建对象
- 宿主对象当中最基础的window对象:window对象对应着浏览器窗口本身,这个对象的属性和方法通常称为BOM.
3.模型:DOM中的M
DOM中的M代表着Model(模型).
DOM把一份文档表示为一棵树:"家谱树模型"
4.节点
- 元素节点:
- 文本节点:
- 属性节点:
5.获取元素
- 通过元素ID:getElementById,它是document对象特有的函数
document.getElementById("") - 通过标签名字:getElementByTagName方法返回一个对象数组
<script >
var items = document.getElementsByTagName("*")
for(var i = 0; i<items.length; i++){
//会弹出所有的元素节点
alert( items[i]);
}
// items的数组里每个值都是一个对象.下面这行代码弹出16
alert(document.getElementsByTagName("*").length);
</script>
- 通过类的名字获取:getElementByClassName
6.盘点知识点
- 一份文档就是一个节点树;
- 节点分为不同的类型:元素节点; 文本节点 ;属性节点;
- getElementById返回一个对象,该对象对应着文档里一个特定的元素节点;
- getElementByClassName和getElementByTagName返回一个对象数组,他们分别对应着文档里一组特定的元素节点;
- 每个节点都是一个对象
7.获取和设置属性
(1)getAttribute
getAttribute是一个函数,它只有一个参数--你打算查询的属性的名字. getAttribute方法不属于document对象,所以不能通过document对象调用,只能通过元素节点对象调用
(2)setAttribute
setAttribute()允许我们对于属性节点的值做出修改,也只能用于元素节点
object.setAttribute(attribute,value)
- DOM的强大之处之一:对页面内容进行刷新却不需要再浏览器里刷新页面.