DOM对象

  1 createElement(element)
创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针。
eg) var para = document.createElement("p");
document.body.appendChild(para);

2 createTextNode()
创建一个包含着给定文本的新文本节点，返回一个指向新建文本节点的引用指针：
reference = document.createTextNode()
参数为新建文本节点所包含的文本字符串
eg)
var message = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(message);
document.body.appendChild(container);

3 cloneNode()
reference = node.cloneNode(deep)
为给定节点创建一个副本，参数为true或者false，true表示同时复制该节点的子节点，false则不复制任何子节点。
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
document.body.appendChild(para);
var newpara = para.cloneNode(true);

document.body.appendChild(newpara);

4 appendChild()
reference = node.appendChild(newChild);
插入节点，例子参考前面。

5 insertBefore()
reference = element.insertBefore(newNode,targetNode)
将一个给定节点插入到一个给定元素节点的给定子节点的前面，返回一个指向新增子节点的引用指针。
eg)
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.insertBefore(para,message);

6 removeChild()
reference = element.removeChild(node)
将从一个给定元素利删除一个子节点，返回一个指向已被删除的子节点的引用指针。
当某个节点被removeChild()删除后，此节点所有子节点都被删除。

[IE中将删除该节点的所有子节点，但在FF中，不删除该节点子节点]

7 replaceChild()
reference = element.replaceChild(newChild,oldChild)
把一个给定父元素里的一个子节点替换为另外一个节点，oldChild节点必须是element元素的一个子节点，返回值是一个指向已被替换的那个
子节点的引用指针。
eg)
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.replaceChild(para,message);

8 setAttribute()
element.setAttribute(attributeName,attributeValue);
为给定元素节点添加一个新的属性值或是改变它的现有属性

9 getAttribute
attributeValue = element.getAttribute(attributeName)
返回一个给定元素的一个给定属性节点的值。

10 getElementById()
element = document.getElementById(ID)
寻找一个有着给定id属性值的元素，返回一个元素节点

11 getElementByTagName()
用于寻找有着给定标签名的所有元素：
elements = document.getElementsByTagName(tagName)
返回一个节点集合。

12 hasChildNodes
用来检查一个给定元素是否有子节点
booleanValue = element.hasChildNodes
返回true或false。

13 DOM属性
节点的属性
nodeName属性将返回一个字符串，其内容是给定节点的名字。
Webjx.Com

如果节点是元素节点，返回这个元素的名称；
如果是属性节点，返回这个属性的名称；
如果是文本节点，返回一个内容为#text的字符串；

nodeType属性将返回一个整数，这个数值代表给定节点的类型
nodeValue属性将返回给定节点的当前值
如果节点是元素节点，返回null；
如果是属性节点，返回这个属性的名称；
如果是文本节点，返回文本节点的内容；

遍历节点树
childNodes 该属性返回一个数组，这个数组由给定元素节点的子节点构成
firstChild 返回第一个子节点
lastChild 返回最后一个子节点
nextSibling 返回给定节点的下一个子节点
parentNode 返回一个给定节点的父节点
previousSibling 返回给定节点的下一个子节点??

14 setTimeout
javaScript函数，能够让某个函数在经过一段预定的时间之后才开始执行，函数有两个参数，第一个参数是将要执行的那个函数的名字；
第二个参数是一个数值，以毫秒为单位设定了需要经过多长时间才开始执行由第一个参数所给出的函数：
setTimeout("function",interval);

/
这几天需要用到对HTML节点元素的删/插操作，由于用到insertBefore方法的时候遇到了一些麻烦，现在作为知识的整理，分别对appendChild、insertBefore和insertAfter做个总结

appendChild定义

appendChild(newChild: Node) : Node
Appends a node to the childNodes array for the node.
Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+
添加一个节点到指定的节点的子节点数组中，读起来好象有点拗口，简单地说就是将元素添加到指定的节点中
appendChild用法
target.appendChild(newChild)

newChild作为target的子节点插入最后的一子节点之后

appendChild例子

var newElement = document.Document.createElement('label');
newElement.Element.setAttribute('value', 'Username:');
var usernameText = document.Document.getElementById('username');
usernameText.appendChild(newElement);
 
insertBefore定义
The insertBefore() method inserts a new child node before an existing child node.

 insertBefore() 方法的作用是：在现有的子节点前插入一个新的子节点
 
insertBefore用法
target.insertBefore(newChild,existingChild)

newChild作为target的子节点插入到existingChild节点之前

existingChild为可选项参数，当为null时其效果与appendChild一样

 
insertBefore例子
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";

oTest.insertBefore(newNode,oTest.childNodes[0]); 
 
 
好了那么有insertBefore的应该也有insertAfter吧？
好那我们来用Aptana编写一个例子吧，但Aptana的智能提示告诉我其实没有insertAfter这个方法
那么就自己定义一个罗:)
 
insertAfter定义
function insertAfter(newEl, targetEl)
        {
            var parentEl = targetEl.parentNode;
           
            if(parentEl.lastChild == targetEl)
            {
                parentEl.appendChild(newEl);
            }else
            {
                parentEl.insertBefore(newEl,targetEl.nextSibling);
            }           
        }
 
 
insertAfter用法与例子
var txtName = document.getElementById("txtName");
var htmlSpan = document.createElement("span");
htmlSpan.innerHTML = "This is a test";
insertAfter(htmlSpan,txtName);

将htmlSpan 作为txtName 的兄弟节点插入到txtName 节点之后

 
 总结：
1、appendChild和insertBefore是做对节点的方法来使用的，而insertAfter只是自定义的一个函数
2、insertBefore相对于appendChild来说，比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置。
3、使用appendChild和insertBefore来插入新的节点前提是，其兄弟节点必须有共同的父节点

/

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.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可以有如下四个值："beforeBegin"|"afterBegin"|"beforeEnd"|"afterEnd"
　 注：若newNode是文档中一已有节点时，则会移动该节点到指定位置

   node.replaceAdjacentText(swhere,replaceText)
   表示替换当前节点指定位置的文本，当不存在文本节点时，则插入replaceText表示的文本
   swhere可以有如下四个值："beforeBegin"|"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()
表示节点是否存在子节点

 

/

appendChild与insertBefore区别:
1.appendChild(newChildNode):添加一个节点到指定的节点的子节点数组中
  当参数newChildNode为文档中现存的节点时(比如:document.getElementbyId("#id"))时,
  appendChild的行为是,将newChildNode"移到"指定的节点,而不是"拷贝"
2.insertBefore(newChild,existingChild):newChild作为target的子节点插入到existingChild节点之前
  当existingChild为NULL或者忽略时,效果等同于appendChild,就是做指定节点的最后一个子节点插入到
  指定节点中
3.insertBefore 在不同浏览器下的差异:
  在IE中,第二个参数可以省略,但在FIREFOX中不行,只能指定为NULL
  在IE中,第二个参数指定的节点点必须为指定节点的一级子节点,否则会出现"无效参数"的错误,但在FIREFOX下不需要

注:这里说的指定节点是指要将节点插入到其中的节点