DOM
DOM:document objectmodel 文档对象模型,使得用户可以与网页做互动;其实就是将标记型的文档以及文档中的内容当成对象。
为什么要将这些文档以及其中的标签封装成对象呢?
因为可以在对象中定义其属性和行为,可以方便操作这些对象。
dom三层模型
dom1:将html文档封装成为对象;
dom2:将xml文档封装成对象;
dom3:将xml文档封装成对象;
标签之间存在着层次关系:
html
|--head
|--title
|--base
|--meta
|--link
|--style
|--script
|--body
|--table
|--tbody
|--tr
|--td
|--th
|--div
|--form
|--a
通过这个标签层次,可以形象的看做是一个树形结构,成为标签型文档,加载进内存的是一颗DOM树。这些标签以及标签的数据都是这棵树上的节点。
当标记型文档加载进内存,那么内存中有一个对应的DOM树。
DOM对已标记型文档的解析有一个弊端就是文档过大,相对耗费资源,对于大型文档可以使用SAX这种方式解析。
DOM树:节点
DHTML:动态html 包含html、css、dom、javascript,多项技术的综合体。
html:将数据进行标签的封装
dom:将标签以及标签中的数据封装成对象
css:负责标签中数据的样式
javascript:将三者进行融合,通过程序设计的方式来完成动态效果的操作。
节点类型:标签型节点:类型1
属性节点 类型2
文本型节点:类型3
注释型节点:类型8
document 类型9
注意:标签之间存在空行时,会出现一个空白的文本节点,在获取节点时一定要注意。
节点的关系:
父节点,
子节点
兄弟节点
上一个兄弟节点
下一个兄弟节点
获取通过节点的层次关系完成。
也可以通过document对象完成:
getElementById:通过id属性值获取对应的节点对象,如果有多一个id值相同,获取到的是第一个id所属对象,尽量保证ID的唯一性,返回的是一个对象。
getElementsByName:通过标签的name属性值获取对象,返回的是一堆对象,其实是一个对象的数组。
getElementsByTagName:即没有id没有name时,可以通过标签名来获取节点对象,返回的是一堆对象,其实是一个对象数组,大多数容器型标签都具备该方法。