DOM对象笔记(js)
DOM对象笔记(js)
摘要:
DOM(文档对象模型)概念的推出,使得我们可以以更灵活的方式来访问Html,xml文档.
正文:
Html DOM就是将html,xml文档相关元素,属性组织为一棵树结构
1. 根节点：DOM把层次中的每一个对象都称之为节点（NODE），以HTML为例：整个文档的一个根就是<html>,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点.
2.子节点：一般意义上的节点.
根节点以下最大子节点就是主文档区<body>了.要访问到body标签，可通过访问根节点的children集合或者直接使用document.body来访问
body区以内所有的文本及HTML标签都是文档的节点，分别称为文本节点、元素节点（或者叫标签节点).
3. 节点之间的关系：节点之间的关系也是DOM中最重要的一个关节.
在DHTML里，Javascript脚本就用了各个节点对象的一整套方法和属性去描述另外的节点对象。具体如下:
(1).节点的绝对引用：
返回文档的根节点 : document.documentElement
返回当前文档中被击活的标签节点: document.activeElement
返回鼠标移出的源节点 :event.fromElement
返回鼠标移入的源节点: event.toElement
返回激活事件的源节点: event.srcElement
(2).节点的相对引用：(设当前对节点为node)
返回父节点:node.parentNode 或者 node.parentElement
返回子节点集合（包含文本节点及标签节点）: node.childNodes
返回子标签节点集合:node.children
返回子文本节点集合:node.textNodes
返回第一个子节点:node.firstChild
返回最后一个子节点:node.lastChild
返回同属下一个节点:node.nextSibling
返回同属上一个节点:node.previousSibling
(3). 节点的各种操作：(设当前的节点为node)
新增标签节点句柄：
document.createElement(sNode) //参数为要新添的节点标签名
例如：var newnode=document.createElement("div");
追加子节点：
node.appendChild(newNode) //newnode为新增的节点句柄,
应用标签节点:
node.applyElment(newNode[,swhere])
其中,newNode为新增的节点句柄,sWhere有两个值："outside"或者" inside"，它表示新增节点newNode是加在当前节点node的外面作为其父节点还是里面作为其子节点．默认为"outside"，当设置为"inside"时，它将作为其所有子节点的父节点
插入节点：
node.insertBefore(newNode[,refChild])
其中newNode表示新增节点句柄， refChild为可选项．表示新增节点作为子节点插入时的相对位置节点，它必须为node位于一级子节点，否则会提示参数无效；当省略该参数时，则newNode将作为node节点最后一个子节点插入．
node.insertAdjacentElement(swhere,newNode)
表示新增节点newNode将被作为node节点的邻近节点而插入
swhere可以有如下四个值："beginBegin"|"afterBegin"|"beforeEnd"|"afterEnd"
注：若newNode是文档中一已有节点时，则会移动该节点到指定位置
node.replaceAdjacentText(swhere,replaceText)
表示替换当前节点指定位置的文本，当不存在文本节点时，则插入replaceText表示的文本
swhere可以有如下四个值："beginBegin"|"afterBegin"|"beforeEnd"|"afterEnd"
删除节点
node.removeChild(childNode) ///其中childNode表示待删除的子节点
node.removeNode(bRemoveChild)
其中bRemoveChild表示在删除node节点的同时是否也删除其子节点集合
true :表示级联删除 false表示只删除节点本身
替换节点
node.replaceChild(newNode, oldChildNode)
其中oldChildNode表示待被替换的直系子节点，newNode表示用来替换的节点，它可以是新创建的节点也可以是已存在的节点，若为已存在的节点，则将被移动
node.replaceNode(newNode)
用newNode替换文档树中node节点
node.swapNode(swapNode)
交换节点在文档树中的位置
复制节点：
返回复制复制节点引用
node.cloneNode(bAll）
其中bAll表示是否同时复制node节点的子节点数据 可选值为true或false
node.contains(snode)
表示其子节点集合中是否包含snode节点
node.hasChildNodes()
表示节点是否存在子节点
