Ajax学习笔记之二----DOM操作
时间：2011-05-07 来源：自由梦想
前言：今天学习了基本的DOM操作，在此将一些知识点整理了一下。DOM的概念我就不做说明了，我不太喜欢过于纠缠于一些枯燥的概念，因为我的水平还远没有达到去研究理论的层次。我更喜欢通过一些具体的例子去学习一些新的技术，因为目前对于我来说，能够在工作中熟练运用这么方法才是最重要的。好了，废话不多说了，开始吧！
一。DOM节点的基本分类
元素节点：如div,span等等。
属性节点：如<div id="div1"></div>，id即为属性节点
文本节点：如<div>这是文本节点</div>，div的文本即为文本几点
二。节点的引用
我们以一段简单的HTML代码为例
<form id="form1">1。直接引用节点
<div id="div1">
这是div1
</div>
<div id="div2">
这是div2
</div>
</form>
document.getElementById：根据ID引用节点
document.getElementById("div1"); //获取id为div1的节点
document.getElementsByTagName():通过标记名称引用节点集合
document.getElementsByTagName("div").length //获取div元素的个数，结果为2
2。间接引用节点
childNodes：获取某节点下的所有直接子节点
document.getElementById("form1").childNodes //获取form1节点下的所有子节点重点说明：不同浏览器中childNodes获取的子节点个数不同。以IE和FireFox为例：
document.getElementById("form1").childNodes[0] //获取form1节点的第一个子节点,即div1
document.getElementById("form1").childNodes.length
IE中的返回值为2，但是FireFox中的返回值为5。
造成这种差异的原因是IE和FireFox处理空白节点的机制不一样。以下段代码为例：
<form id="form1">
<div id="div1">
这是div1
</div>
<div id="div2">
这是div2
</div>
</form>
FireFox浏览器会将各个节点之间的空白也算作一个节点，也就是说form1和div1之间存在一个空白节点，但是IE不会。
那么怎样做到各个浏览器的兼容呢，有两种方法。
第一种：源码这样写
<form id="form1"
><div id="div1">
这是div1
</div
><div id="div2">
这是div2
</div
></form>
经测试，IE和FireFox返回的值都是2。但是这种写法看起来很别扭，并且写起来也很麻烦。
第二种：在调用childNodes属性之前先将空格删除。下面是一个删除空格的函数：
function clearWhiteSpace(element) {这样也能达到IE和FireFox兼容的效果
for (var i = 0; i < element.childNodes.length; i++) {
var node = element.childNodes[i];
//如果是文本节点，并且值为空，则删除该节点
if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) {
node.parentNode.removeChild(node);
}
}
}
parentNode：获取某节点的父节点
document.getElementById("div1").parentNode //获得fom1
nextSibling：下一个兄弟节点，或是同级节点
document.getElementById("div1").nextSibling //获得div2
previousSibling：上一个兄弟节点，或是同级节点
document.getElementById("div2").previousSibling //获得div1
firstChild：第一个子节点
document.getElementById("form1").firstChild //获得div1
lastChild：最后一个子节点
document.getElementById("form1").lastChild //获得div2
三。获取节点信息
nodeName：获取节点名称。对于不同的节点类型，nodeName的返回值有所差异
1。元素节点：返回标记的名称
2。属性节点：返回属性名称
3。文本节点：返回结果为：#text
document.getElementById("div1").nodeName //结果为：div
document.getElementById("div1").getAttributeNode("id").nodeName //结果为id
document.getElementById("div1").childNodes[0].nodeName //结果为：#text
nodeType：获取属性节点类型
1。元素节点：返回1
2。属性节点：返回2
3。文本节点：返回3
document.getElementById("div1").nodeType; //1
document.getElementById("div1").getAttributeNode("id").nodeType; //2
document.getElementById("div1").childNodes[0].nodeType; //3
nodeValue：获取属性节点的值
1。元素节点：返回null
2。属性节点：返回属性值
3。文本节点：返回文本值
document.getElementById("div1").nodeValue; //null
document.getElementById("div1").getAttributeNode("id").nodeValue; //div1
document.getElementById("div1").childNodes[0].nodeValue; //这是div1
四。处理属性节点
getAttributeNode：获取属性节点
document.getElementById("div1").getAttributeNode("id").nodeValue //结果：div1
getAttribute：获取属性节点的值
document.getElementById("div1").getAttribute("id") //结果：div1
setAttribute：给某个节点设置属性
document.getElementById("div1").setAttribute("style","background-color:red;");
结果如下图：
五。处理文本节点
innerHTML：设置或获取元素节点的文本值
document.getElementById("form1").innerHTML
结果为：
div id="div1">
这是div1
</div>
<div id="div2">
这是div2
</div>
很晚了，先写到这里吧。明天继续，呵呵。
相关阅读 更多 +
