DOM: document object model
JavaScript里的对象可以分为三种类型。
- 用户定义对象。
- 内建对象,如Array、Math和Date等。
- 宿主对象:由浏览器提供的对象。
节点
整个文档是一个文档节点。
元素节点:每个 XML 标签是一个元素节点。
文本节点:包含在 XML 元素中的文本是文本节点。
属性节点:每一个 XML 属性是一个属性节点。
注释属于注释节点。
获取元素
有3种DOM方法可获取元素节点,分别是通过元素ID,标签名和类名字来获取。
1.getElementById
这个方法将返回一个与那个有着特定id属性值的元素节点对应的对象。
2.getElementsByTagName
返回一个对象数组,每个对象分别对应着文档里有给定标签的一个元素。
3.getElementsByClassName
是HTML5中新增的方法,所以要注意兼容性。同getElementsByTagName一样也是返回一个具有相同类名的元素的数组。
获取和设置属性
1.getAttribute
object.getAttribute(attribute)
它只有一个参数——你要查询属性的名字。
它只能通过元素节点对象调用。
2.setAttribute
同getAttribute一样,也只能作用于元素节点。
object.setAttribute(attribute,value)
如果这个属性原先并不存在,setAttribute会先创建这个属性,然后设置它的值。如果setAttribute用在一个本身就有这个属性的元素节点上,这个属性的值就会被覆盖掉。
一个细节:通过setAttribute做出修改后,查看网页源代码时看到的仍是改变前的属性值。这种“表里不一”的现象源自DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。