深入学习DOM模型基础(1)
本文和大家重点讨论一下DOM模型的概念和用法，DOM的全称是DocumentObjetModule即文档对象模型，在Web上把页面的HTML表现看作一个有树型结构的对象模型，可以通过一些操作接口来对Document的每一个子对象节点进行访问和操作，这就为Ajax在不刷新页面的情况下改变页面显示数据成为了可能。
DOM模型基础
DOM的全称是DocumentObjetModule即文档对象模型，在Web上把页面的HTML表现看作一个有树型结构的对象模型，可以通过一些操作接口来对Document的每一个子对象节点进行访问和操作，这就为Ajax在不刷新页面的情况下改变页面显示数据成为了可能。
先来看一个简单的HTML片段：
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head><title>DOM模型</title></head><body>
- <labeltitlelabeltitle="title1">DOM模型节点</label></body></html>
在这个HTML页面中，只有一个Label控件，可以根据节点的层次画出这个页面的层次结构图。
通常来说，在HTML文档中的每一个标签都表示一个对象节点。而像上面<Lable>这样的标签是我们的HTML元素节点，而标签中的title=“title1”是一个属性节点，而“DOM模型节点”这样的文本构成了一个文本节点。
那么，怎么才能对DOM模型中的一个节点进行操作呢，首先要做的是对这个节点进行引用。
1．对文档节点的引用
下面列举一些常用的对文档元素节点的引用方法。
◆document.GetElementById()方法直接引用节点，这个是我们在实际应用中最常用的一种方法，在HTML文档中每一个元素节点都可以定义一个唯一的id属性，然后使用GetElementById方法就可以准确地得到对这个节点的引用。
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head><title>DOM模型</title></head><body><dividdivid="Div1">
- <labeltitlelabeltitle="title1">Dom模型节点</label></div></body>
- </html><scriptlanguagescriptlanguage="javascript"type="text/javascript">
- <!--var_div1=document.getElementById("Div1");
- alert(_div1.innerHTML);//弹出警告框显示了标签div中的HTML内容
- //<labeltitlelabeltitle="title1">Dom模型节点</label>--></script>
HTML文档中每一个元素节点都有innerHTML这个属性，我们通过对这个属性的访问可以获取或者设置这个元素节点标签内的HTML内容，自IE4.0以来越来越多的浏览器支持了这一属性，通过使用这一属性使许多繁杂的动态生成HTML的工作变得简单。需要注意的是，我们如果对单标记标签，如<img>这一类标签的innerHTML属性读取会得到一个空字符串，而写将会得到一个错误。
此外document对象还有一个类似的方法GetElementByName，我们可以通过form标签的name属性对表单元素节点进行引用，但返回的通常是一个数组，因为表单中的节点name属性的值不是唯一的，可以通过索引器得到每一个元素的引用。
◆document.getElementByTagName()
可以得到一个指定标记名称节点引用的数组集合，可以通过索引器对每个节点的引用进行访问。
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"><head>
- <title>DOM模型</title></head><body>
- <dividdivid="Div1">节点1</div><dividdivid="Div2">节点2</div>
- </body></html><scriptlanguagescriptlanguage="javascript"
- type="text/javascript">
- <!--var_divs=document.getElementsByTagName("div");
- for(vari=0;i<_divs.length;i++)alert(_divs[i].innerHTML);
- //依次显示了"节点1"和"节点2"--></script>
这个方法通常在要对整个文档的某一类元素节点进行操作时用到，比如说为全部的图片添加一个鼠标掠过时发生位移的效果，这时就可以通过这个方法对文档所有的节点进行引用。
◆parentNode和childNodes，可以通过访问这两个属性获得当前节点的父节点和子节点集合的引用。
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head><title>DOM模型</title></head>
- <body><dividdivid="Div1"><spanidspanid="sp1">节点1</span>
- <spanidspanid="sp2">节点2</span></div></body></html>
- <scriptlanguagescriptlanguage="javascript"type="text/javascript">
- <!--var_nod=document.getElementById("sp1");
- //得到对sp1的引用var_pNod=_nod.parentNode;
- //得到对Div1的引用alert(_pNod.innerHTML);
- //显示父节点内容for(vari=0;i<_pNod.childNodes.length;i++)
- //循环子节点alert(_pNod.childNodes[i].innerHTML);
- //依次显示了每一个节点的内容--></script>
在这里问题出现了，我们发现在IE和FF下面对属性_pNod.childNodes.length，即子节点的数量解释不同，在IE中为4，而在FF中为5。得到这样的结果是因为两种浏览器对文档中换行产生的文本节点的解释不统一造成的，IE没有把父节点与子节点之间那个换行作为一个文本节点，如果要使用这个属性就不得不在HTML文档编写的时候避免出现换行，可以将上面的结构改为下面的形式：
- <dividdivid="Div1">
- <spanidspanid="sp1">节点1</span>
- <spanidspanid="sp2">节点2</span></div>
虽然这样写以后FF和IE都能很好地统一解释为两个子节点，但是损失了文档的美观性和易读性，所以一般都不推荐使用访问子节点的方法来引用节点。
类似的previousSibling和nextSibling也存在类似的问题。这两个属性是用来引用上一个或者下一个兄弟节点的，使用这两个属性时也存在空白文本节点的问题，我们也应该尽量避免使用这两个属性。
