节点定位

getElementById(elementId)
//寻找一个有着给定id属性值的元素，返回一个元素节点 ,document.getElementById(IDvalue)
getElementsByTagName(tagName)
//用于寻找有着给定标签名的所有元素，document.getElementsByTagName(tagName)
getElementsByName(elementName)
//在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可

创建节点：

document.createElement(element)
//参数为要新添的节点标签名，egnewnode=document.createElement("div");
document.createTextNode(string)
//创建一个包含着给定文本的新文本节点,eg:document.createTextNode("hello");
eg：
var a =document.createElement("span");
var b =document.createTextNode("cssrain");
a.appendChild(b);

添加节点:

//添加子节点：
node.appendChild(newChild) //newChild为生新增的节点.eg: document.body.appendChildNode(o) document.forms[0].appendChildNode(o)
//插入节点
node.insertBefore(newNode,targetNode)
node.insertAfter(newNode,targetNode);

修改节点：

 //删除节点
node.remove()[2] //当某个节点被remove方法删除时，这个节点所包含的所有子节点将同时被删除。
node.removeChild(node) //eg:document.body.removeChild(node)
node.removeNode()//IE支持，但FF不支持,推荐用removeChild代替实现
//替换节点
node.replaceChild(newChild,oldChild) //oldChild节点必须是node元素的一个子节点。
node.replaceNode() node.swapNode()//只有IE支持replaceNode与swapNode方法，其他浏览器则不支持。

复制节点：

 //返回复制节点引用
node.cloneNode(bool)//bool为布尔值，true / false 是否克隆该节点所有子节点 ,eg:node.cloneNode(true)

获取节点信息:

.nodeName//只读，返回节点名称，相当于tagName.
.nodeValue//可读可写，但对元素节点不能写。返回一个字符串，指示这个节点的值。元素节点返回null，属性节点返回属性值，文本节点返回文本。一般只用于设置文本节点的值。
.nodeType//只读，返回节点类型：1，元素节点；2，属性节点；3，文本节点。
node.contains() //是否包含某节点，返回boolean值,IE支持，FF不支持contains()，但支持W3C标准compareDocumentPosition() .
node.hasChildNodes()//是否有子节点，返回boolean值

属性节点：

 setAttribute(key,value)//element.setAttribute(attributeName,attributeValue)，setAttribute()方法只能用在属性节点上。
getAttribute(key)//返回一个给定元素的一个给定属性节点的值

备注:

[1]childNodes兼容性问题说明：

用IE的调试工具会发现IE中把空格解析成“#text”，即IE会把2个标签之间只要有回车或空格的地方解析成空白文本节点，就多了个节点nodeName="#text"。而FF中却不会。

测试代码：

//节点之间留有空格和回车
<div id="test1">
<div>first</div>
<div>second</div>
<div>third</div>
</div>
//除注释外，节点间无空格回车
<div id="test2"><div>first</div><div>second</div><div>third</div></div>
var val1=document.getElementById("test1").childNodes.length;
var val2=document.getElementById("test2").childNodes.length;
alert("val1="+val1+":"+"val2="+val2)

测试结果：

IE中是val1=7:val2=3
FF中是val1=3:val2=3

兼容性解决办法：

在for循环里不妨加上：
if(childNode.nodeName=="#text") continue;
或者nodeType == 1。

[2]add(),remove()兼容性问题：

注意的是add,remove方法仅用于area,controlRange,options等集合对象.

<select>
<option value="1">option1</option>
<option value="2">option2</option>
</select>
<script type="text/javascript">
function fnAdd(){//兼容IE,FF,Opera,Chrome
var oOption=document.createElement("option");
document.getElementById("#oList").options.add(oOption);
oOption.text="option3";
oOption.value="3";
}
function fnRemoveChild(){//兼容IE,FF,Opera,Chrome
document.getElementById("#oList")).removeChild(document.getElementById("#oList").lastChild);
}
function fnRemove(){
//兼容IE,FF,Opera,Chrome
document.getElementById("#oList").remove(0);
}
</script>

扩展知识：

innerHTML、outerHTML、innerText、outerText

定义：

不同之处：

innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。

在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。

注意:

W3C 只支持innerHTML. 其他都是微软的规定.(outerHTML,outerText,innerText只有微软的IE 好使, 其他浏览器不好用(firefox, mozilla等),必须用其他方法实现)