最近江湖上流传一种叫
AJAX的绝技。此绝技是将多家门派的武功进行对比结合之后，从而孕育而生。修炼此功需要很多基本功，其中一种就是DOM的内功。在此就DOM的一些皮毛传授一二，声明，此秘籍是我偶然得手，不敢私吞，故与各位英雄分享。
- HTML中DOM概要
-
- DOM把层次中的每一个对象都称之为节点（NODE），以HTML超文本标记语言为例：整个文档的一个根就是<HTML>,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点（ROOT）
-
- 子节点：
-
- 一般意义上的节点，根节点以下最大子节点就是主文档区了，要访问到body标签，在脚本中应该写：
- document.body
- body区以内所有的文本及HTML标签都是文档的节点，分别称为文本节点、元素节点（或者叫标签节点），大家知道HTML说到底只是文本而矣，不论怎么样的网页必然由这两个节点组成，也只能由这两个节点组成
-
- 节点之间的关系：
-
- 节点之间的关系也是DOM中最重要的一个关节，如何正确地引用到节点对象，一定要清楚节点树各个节点的相互描述方式，在DHTML里，Javascript脚本就用了各个节点对象的一整套方法和属性去描述另外的节点对象。
-
-
- 节点的绝对引用：
- 返回文档的根节点
- document.documentElement
- 返回当前文档中被击活的标签节点
- document.activeElement
- 返回鼠标移出的源节点
- event.fromElement
- 返回鼠标移入的源节点
- event.toElement
- 返回激活事件的源节点
- event.srcElement
-
- 节点的相对引用：(设当前对节点为node)
- 返回父节点
- node.parentNode
- node.parentElement
- 返回子节点集合（包含文本节点及标签节点）
- node.childNodes
- 返回子标签节点集合
- node.children
- 返回子文本节点集合
- node.textNodes
- 返回第一个子节点
- node.firstChild
- 返回最后一个子节点
- node.lastChild
- 返回同属下一个节点
- node.nextSibling
- 返回同属上一个节点
- node.previousSibling
-
- 节点的各种操作：(设当前的节点为node)
-
- 新增标签节点句柄：
- document.createElement(sNode) //参数为要新添的节点标签名，例：newnode=document.createElement("div");
-
- 1、添加节点：
- 追加子节点：
- node.appendChild(oNode) //oNode为生新增的节点句柄,例：node.appendChild(newnode)
- 应用标签节点
- node.applyElment(oNode,sWhere)//oNode为生新增的节点句柄,sWhere有两个值：outside / inside，加在当前节点外面还是里面
- 插入节点
- inode.insertBefore()
- node.insertAdjacentElement()
- node.replaceAdjacentText()
-
- 2、修改节点：
-
- 删除节点
- node.remove()
- node.removeChild()
- node.removeNode()
-
- 替换节点
- node.replaceChild()
- node.replaceNode()
- node.swapNode()
-
-
- 2、复制节点：
- 返回复制复制节点引用
- node.cloneNode(bAll)//bAll为布尔值，true / false 是否克隆该节点所有子节点
-
- 3、节点信息
- 是否包含某节点
- node.contains()
- 是否有子节点
- node.hasChildNodes()
posted on 2007-07-03 13:19
TRE-China R&D 阅读(278)
评论(0) 编辑 收藏 引用 所属分类:
Javascript 、
HTML