- 整个文档是一个文档节点
- 每个HTML标签是一个元素节点
- 包含在HTML元素中的文本是文本节点
- 每个HTML属性是一个属性节点
- 注释属于注释节点
备注：通过DOM，可以访问HTML文档中的每个节点。
二、节点引用
节点的绝对引用：
- document.documentElement返回文档的根节点
- document.activeElement返回当前文档中被击活的标签节点
- event.fromElement返回鼠标移出的源节点
- event.toElement返回鼠标移入的源节点
- event.srcElement返回激活事件的源节点
节点的相对引用：(设当前对节点为node)
- node.parentNode node.parentElement 返回父节点,document.parentNode()返回null
- node.childNodes[1] 符合标准，返回子节点集合（包含文本节点及标签节点），文本和属性节点的childNodes永远是null.先获取长度node.childNodes.length,然后可以通过循环或者索引找到需要的节点.
//对与文本节点的处理：
eg:
var myTextNodes = document.getElementById("test").childNodes;
var count = myTextNodes.length;
for(var i = 0; i < count; i++) {
if(myTextNodes[i].nodeType=="3" && myTextNodes[i].nodeName!="#text"){//排除IE空白文本的节点
alert(myTextNodes[i]）;
}
} - node.children 不符合标准，不推荐使用，它只返回html节点，甚至不返回文本节点
- node.firstChild返回第一个子节点，firstChild=childNodes[0]
- node.lastChild返回最后一个子节点，lastChide=childNodes[childNodes.length-1]
- node.nextSibling()返回同属下一个节点
- node.previousSibling()返回同属上一个节点
三、节点操作
节点定位
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);
修改IC交易网节点：
//删除节点
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方法，其他浏览器则不支持。
复制IC交易网节点：
//返回复制节点引用
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兼容性问题说明IC交易网：
用IE的调试工具会发现IE中把空格解析成“#text”，即IE会把2个标签之间只要有回车或空格的地方解析成空白文本节点，就多了个节点nodeName="#text"。而FF中却不会。
测试代码：
测试结果：
IE中是val1=7:val2=3
FF中是val1=3:val2=3
兼容性解决办法：
在for循环里不妨加上：
if(childNode.nodeName=="#text") continue;
或者nodeType == 1。
//节点之间留有空格和回车
<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)
"
