JS DOM 操作详解：处理空白节点与常用方法

DOM操作中的空白节点问题

构建一个简单的HTML表格结构。

 
<table>
<tr>
<td id="TEST">
<input type="submit" value="确定">
<input type="button" value="取消">
</td>
</tr>
</table>

经过实际测试验证：

 
var td= document.getElementById("TEST");
alert(td.childNodes.length);结果为4

起初令人困惑，查阅相关资料后得知，在JavaScript DOM模型中，HTML源码中的空格也被解析为文本节点，而两个input元素之间存在空格，因此被计入。

由于存在这些空白文本节点，导致子节点总数为4。

若删除HTML中的多余空格，结果将变为2。

为了有效处理这些空白节点，可以使用以下函数进行清理。

 
function cleanWhitespace(element)
{ 
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);
} 
} 
} 

调用 cleanWhitespace(document.getElementById("TEST")) 处理节点后，问题得以解决。

此外，补充以下知识：

DOM基本方法与节点操作

DOM基本方法汇总

一、直接引用节点

1. document.getElementById(id);

--通过ID在文档中查找指定节点。

2. document.getElementByTagName(tagName);

--返回一个数组，包含对符合条件节点的引用。

--例如：document.getElementByTagName("span");将返回所有类型为span的节点。

二、间接引用节点

3. element.childNodes

--返回element的所有子节点，可以通过element.childNodes[i]的方式调用。

--element.firstChild=element.childNodes[0];

--element.lastChild=element.childNodes[element.childNonts.length-1];

4. element.parentNode

--用于引用父节点。

5. element.nextSibling; //引用下一个兄弟节点

element.previousSibling; //引用上一个兄弟节点

三、获取节点信息

6. nodeName属性用于获取节点名称。

--对于元素节点，返回标记名称，如：<a herf><a>返回的是"a"。

--对于属性节点，返回属性名称，如：class="test" 返回的是test。

--对于文本节点，返回文本的内容。

7. nodeType返回节点的类型。

--元素节点返回1。

--属性节点返回2。

--文本节点返回3。

8. nodeValue返回节点的值。

--元素节点返回null。

--属性节点返回undefined。

--文本节点返回文本内容。

9. hasChildNodes()判断是否有子节点。

10. tagName属性返回元素的标记名称。

--该属性仅元素节点拥有，等同于元素节点的nodeName属性。

四、处理属性节点

11. 每个属性节点都是元素节点的一个属性，可以通过(元素节点.属性名称)访问。

12. 利用setAttribute()方法给元素节点添加属性。

--elementNode.setAttribute(attributeName,attributeValue);

--attributeName为属性的名称，attributeValue为属性的值。

13. 使用getAttribute()方法获取属性值。

--elementNode.getAttribute(attributeName);

五、处理文本节点

14. innerHTML和innerText属性，这两个方法大家比较熟悉，此处不再赘述。值得注意的是，无论是IE还是Firefox，都会将空格、换行、制表符等视为文本节点。因此，一般通过element.childNodes[i]引用文本节点时，通常需要进行处理：

 
<script language"javaScript" type="text/javascript">
function cleanWhitespace(element)
{ 
for(var i=0; i<element.childNotes.length; i++)
{ 
var node = element.childNodes[i];
if(node.nodeType == 3 && !/\S/.test(node.nodeValue))
{ 
node.parentNode.removeChild(node);
} 
} 
} 
</script>

六、改变文档的层次结构

15. document.createElement()方法用于创建元素节点。

--例如：document.createElement("Span");

16. document.createTextNode()方法用于创建文本节点。

--例如：document.createTextNode("&nbsp;"); //注：它不会通过HTML编码，也就是说这里创建的不是空格，而是字符串&nbsp;。

17. 使用appendChild()方法添加节点。

--parentElement.appendChild(childElement);

18. 使用insertBefore()方法插入子节点。

--parentNode.insertBefore(newNode,referenceNode);

--newNode为插入的节点，referenceNode为将插入的节点插入到这之前。

19. 使用replaceChild方法取代子节点。

--parentNode.replaceChild(newNode,oldNode);

--注：oldNode必须是parentNode的子节点。

20. 使用cloneNode方法复制节点。

--node.cloneNode(includeChildren);

--includeChildren为bool，表示是否复制其子节点。

21. 使用removeChild方法删除子节点。

--parentNode.removeChild(childNode);

表格节点的高级操作

七、表格的操作

--注：IE中无法直接将一个完整的表格节点插入到文档中。

22. 添加行和单元格。

var _table=document.createElement("table"); //创建表

table.insertRow(i); //在table的第i行插入行

row.insertCell(i); //在row的第i个位置插入单元格

23. 引用单元格对象。

--table.rows[i].cells[i];

24. 删除行和单元格。

--table.deleteRow(index);

--row.deleteCell(index);

25. 交换两行获得两个单元格的位置。

node1.swapNode(node2);

--这个方法在Firefox中将出错。

通用方法：

 
function swapNode(node1,node2)
{ 
var _parent=node1.parentNode;
var _t1=node1.nextSubling;
var _t2=node2.nextSubling;
if(_t1)parent.insertBefore(node2,_t1);
else _parent.appendChild(node2);
if(_t2)parent.insertBefore(node1,_t2);
else _parent.appendChild(node1);