日期:2014-05-17  浏览次数:20724 次

DOM核心和DOM HTML

什么是DOM ??

?

?? ? ?首先需要说明DOM不是javascript,他是文档,规范。DOM是一个定义了脚本如何与类似于xml、html等结构化页 ? 面进行交互的规范,定义了一组接口和对象。因此只要符合这个规范,实现了这些接口就可以访问。可以用javascript也可以用vbscript访问

?

DOM 的发展?

?

?? ? ?dom一级:

?? ? ? ? ? ? ?dom core : 定义了创建和操作xml文档节点的一些属性 方法

?? ? ? ? ? ? ?dom html : 定义了一系列与html特定标签相关联的对象

?

?? ? ?dom二级:在dom一级基础上新添加了

?? ? ? ? ? ? ?dom events : ?规定了一些鼠标事件的控制机制?

?? ? ? ? ? ? ?dom styles : ?提供了操作访问样式表的方法

?

?? ? ?dom三级:

?

如何验证属于哪一级规范?

?

document.implementation.hasFeature("Events","2.0");
?

对象的继承?

?

?? ?这里以<a>标签为例

?

?? ? ? ?罗列了a标签的继承关系:Node -> ?Element-> ?HtmlElement -> HtmlAnchorElement?

?

?? ? ? 每一个标签都对应一个dom html中的一个对象, 理解为什么一些属性同可以用 一些只能在特定标签使用

?

DOM2级核心

?

?? a) 核心node对象 ?

?? ? ? ? ? 1. 自身一些属性

?? ? ? ? ? ? ? ? nodeName

?? ? ? ? ? ? ? ? nodeValue

?? ? ? ? ? ? ? ? nodeType

?

?? ? ? ? ? ? ? ? 标签节点 : ?nodeName ?标签名

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? nodeValue ? null?

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? nodeType ? ?1

?? ? ? ? ? ? ? ? 属性节点 : ?nodeName ?属性名

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? nodeValue ?属性值

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? nodeType ? ?2

?? ? ? ? ? ?2. 一些关系属性

?

?? ? ? ? ? ? ? ? ? ? ?parentNode ?

?? ? ? ? ? ? ? ? ? ? ?firstChild

?? ? ? ? ? ? ? ? ? ? ? ? ? ? childNodes ?返回一个NodeList对象 ?类数组对象

?? ? ? ? ? ? ? ? ? ? ?lastChild

?? ? ? ? ? ? ? ? ? ? ?previousSibling

?? ? ? ? ? ? ? ? ? ? ?nextSibling

?

?? ? ? 3. ?节点的属性

?

?? ? ? ? ? ? ? ? ?它也是扩展自node对象,但是却不在dom关系树种。而是作为attributes属性存在节点的属性中。

?

?? ? ? ? ? ? ? ? ?这个对象还扩展了NamedNodeMap接口。也是一个类数组对象。

?

?? ? ? ? ? ? ? ? ?可以通过item方法访问某一个具体的节点, 还提供了getNamedItem访问特定名称的属性节点。

?

div.attributes.getNamedItem("class").nodeValue
div.attributes.item(1).nodeValue

?

?? ? ? ? ? ? ? ? ? ?可以从上面的代码清楚地看到NamedNodeMap是一个属性节点的集合。

?

?? ? ? 4. ownerDocument属性

?

?? ? ? ? ? ? ? ? ? ? ? 指向什么

?

?? ? ? ? ? ? ? ? ? ? ?什么时候会用到

?

?? ? ? 5. 操作DOM节点树

?

?? ? ? ? ? ? ? ? ? ? ?插入 删除 替换 ? 克隆

?

?? ? ?6. 关于Node对象 ie中不存在 ?safari中不允许修改

?

?

?? ? ? 7. getElementById方法返回的只是一个引用?

?

核心Element对象

?? ? ? 1. ?与node对象的关系

?? ? ? 2. ?对属性的操作 与node中相关操作的关系

?? ? ? 3. ? 查找其他element

?

?核心Document对象

?? ? ?1. ?以ie4举例如何平稳退化

?? ? ?2. ?创建节点方法

?? ? ?3. ? 查找的方法 分析与Element对象的关系 ?

?? ? ? ? ? 为什么没有getElementByClass方法

?

DOM2级 HTML

?

?? ?DOM2 HTML对象和DOM2 核心对象关系

?? ?HTMLDocument对象 ?-> 核心document对象