本文介绍了HTML DOM树形结构中的节点基本概念，详细解析了nodeName、nodeValue和nodeType三个核心属性的含义与区别。同时讲解了如何使用appendChild方法移动节点，并通过JavaScript示例演示了节点计数及DOM结构变更的实际效果。
HTML DOM节点基础与属性解析
HTML DOM（文档对象模型）本质上是一种树状结构的数据对象。
每个节点都包含特定的信息，主要涉及以下属性：
1. nodeName
nodeName 属性用于获取节点的名称。
对于元素节点，nodeName 返回对应的标签名称。
对于属性节点，nodeName 返回属性的名称。
对于文本节点，nodeName 始终固定为 #text。
对于文档节点，nodeName 始终固定为 #document。
注意：在 XML 元素中，nodeName 返回的标签名称始终为大写形式。
2. nodeValue
若节点为文本节点，nodeValue 属性包含具体的文本内容。
若节点为属性节点，nodeValue 属性包含该属性的值。
对于文档节点和元素节点，nodeValue 属性不可用（返回 null）。
3. nodeType
nodeType 属性用于返回节点的类型标识。
常见的关键节点类型如下：
常见节点类型对照
| 元素类型 | 节点类型 |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
DOM节点的修改操作
三、修改节点
1. [newfathernode].appendChild([childnode])
此操作将建立 newfathernode 与 childnode 之间的父子关系。执行后，childnode 会自动从其原有的父节点 oldfathernode 中移除，并添加到新的父节点下。
2. [newfathernode].removeChild([childnode])
JavaScript DOM操作示例
四、程序示例
代码如下：
<html>
<body>
<div id="div1">
<div id="div3">
</div>
</div>
<div id="div2">
</div>
<script>
function $id(id){
return document.getElementById(id);
}
function CountNodes(arr){
var len = arr.length;
var i = 0;
while(len--){
(arr[len].nodeType==1) && i++;
}
return i;
}
window.onload = function(){
alert(CountNodes($id("div2").childNodes));
$id("div2").appendChild($id("div3"));
alert(CountNodes($id("div1").childNodes));
alert(CountNodes($id("div2").childNodes));
}
</script>
</body>
</html>