3、DOM
3.1 文档: DOM中的"D"
如果没有document(文档)，DOM也就无从谈起。
3.2 对象: DOM中的"O"
1. JavaScript语言里的对象
- 用户定义对象(user-defined object): 由程序员自行穿件的对象。
- 内建对象(native object): 内建在JavaScript语言里的对象, 如:Array, Math和Date等。
- 宿主对象(host object):由浏览器提供的对象。
2. BOM
window对象对应着浏览器窗口本身, 这个对象的属性和方法通常成为BOM(浏览器对象模型), BOM提供了window.open 和 window.blur等方法。
3.3 模型: DOM中的"M"
DOM中的"M"代表着"Model"(模型), 但说它代表着"Map"(地图)也未尝不可。
3.4 节点
节点这个词是一个网络术语, 它标识网络中的一个连接点。一个网络就是由一些节点构成的集合。
- 元素节点
- 文本节点
- 属性节点
1. 元素节点
DOM的原子是元素节点
标签名字:标签的名字就是元素的名字,文本锻炼元素的名字是"p",无需清单元素的名字是"ul"
元素可以包含其他元素, 实际上, 没有被包含在其他元素里的唯一元素就是<html>元素, 它是我们的节点树的根元素。
<!-- p元素 -->
<p></p>
2. 文本节点
在HTML文档里, 文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含有文本节点。
<!-- p标签中的内容 是 文本节点 -->
<p>文本节点</p>
3. 属性节点
属性节点用来对元素做出更具体的描述。例如: 几乎所有的元素都有一个title属性, 而我们可以利用这个属性对包含在元素里的东西做出准确的描述。
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
在DOM中, title="a gentle reminder"是一个属性节点.
4. CSS
CSS(层叠样式表)告诉浏览器应该怎样显示一份文档内容。
4. 获取元素
有3种DOM方法可以获取元素节点, 分别是通过元素ID、通过标签名和通过类名来获取。
1. getElementById (通过ID)
document.getElementById(id)
document.getElementById("id_name")
2. getElementByTagName (通过标签名)
document.getElementsByTagName("p")
这个调用将返回一个对象数组, 每个对象分贝对应这个document对象中的一个列表项元素。
document.getElementsByTagName("p").length
3. getElementsByClassName (通过类名)
document.getElementsByClassName("class_name")
这个方法返回值与getElementByTagName类似, 都是一个具有相同类名的元素的数组。
5. 盘点
- 一份文档就是一颗节点树。
- 节点分为不同的类型: 元素节点、属性节点和文本节点等。
- getElementById 返回一个对象, 该对象对应着文档里的一个特定的元素节点。
- getElementByTagName 和 getElementsByClassName 将返回一个对象数组, 他们分别对应着文档的一组特定的元素节点。
- 每个节点都是一个对象。
3.5 获取和设置属性
1. getAttribute (获取属性)
getAttribute是一个函数, 它只有哦一个参数--要查询的属性的名字:
object.getAttribute(attribute)
注意:getAttribute方法不属于document对象, 所以不能通过document对象调用。它只能通过元素节点对象调用。
2. setAttribute (设置属性)
setAttribute()允许我们队属性节点的值做出修改, 与getAttribute一样, setAttribute也只能用于元素节点。
object.setAttribute(attribute, value)
3.6 小结
- getElementById
- getElementByTagName
- getElementsByClassName
- getAttribute
- setAttribute
