黑马程序员技术交流社区
标题: DOM学习笔记 [打印本页]
作者: 清风星明 时间: 2013-12-17 20:33
标题: DOM学习笔记
DOM(document object model)文档对象模型
其实就是将一些标记的文档以及文档中的内容当成对象。
为什么？
因为可以在对象中定义起属性和行为，可以方便操作这些对象。
DOM在封装标记型文档时，有三层模型:
DOM1:针对html文档
DOM2：针对xml文档
DOM3：针对xml文档
Html，xhtml，xml：这些都是标记型文档。
DHTML：是多个技术的综合体，叫做动态的html。
Html：负责将数据进行标签的封装。
Css：负责标签的样式。
Dom：负责将标签以及标签中的数据封装成对象。
Javascript：负责通过程序设计方式来操作这些对象。
标签之间的层次关系：
Html
|--head
|--title
|--base
|--link
|--meta
|--style
|--script
|--body
|--div
|--form
|--input
|--select|--
|--span
|--a
|--table
|--tbody
|--tr
|--td
|--th
|--dl
|--dt
|--dd
通过这个标签层次，可以形象的看作是一个树型结构，那么我也称标记文档，加载进内存的是一颗DOM树。
这些标签以及标签的数据都是这棵树上的节点。
当标记型文档加载进内存，那么内存中有了一个对应的DOM树。
DOM对于已标记型文档的解析有一个弊端，就是文档过大，相对消耗资源。
对于大型文档可以使用SAX这种方式解析。
节点类型：
标签型节点：类型：1
属性型节点：类型：2
文本型节点：类型：3
注释型节点：类型：8
Document节点：类型：9
注意：标签之间存在空行时，会出现一个空白的文本型节点，在获取节点时一定要注意。
节点关系：
父节点。（parentNode）
子节点。（childNodes：直接子节点，返回的是一个节点对象数组）
兄弟节点
上一个兄弟节点（previousSibling）
下一个兄弟节点（nextSibling）
Table节点：（集合）：getElementsByTagName("标签名")；
注意：获取节点可以通过节点的层次关系完成，也可以通过document对象完成。
getElementById:通过id属性值获取对应的节点对象。如果有多一个id值相同，获取到的是 第一个id所属对象。尽量保证id唯一性，返回的是一个对象。
getElementByName:通过标签的name属性值获取对象。返回的一堆对象，其实是一个对象数 组。
getElementByTagName:既没有id也没有name时，可以通过标签名来获取节点对象，返回的是 一堆对象，其实是一个对象数组。大多容器型标签（标签中还能写标签 ）具备此方法
作者: 清风星明 时间: 2013-12-17 22:00
整理不好，别见怪！
作者: 为梦想而活着 时间: 2014-5-7 19:52
有点乱~现在我也学习到dom解析部分···
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |