Node往往被翻译为节点，在一个对象（可以简单的理解为是HTML页面中），一个属性name="aaa"可以是一个节点，一个< div id="aaa">……< /div>也可以是一个节点，在< body>……< /body>中的，也是一个大大的节点。下面是一些有关Node的属性和方法，并没有包含部分不兼容IE和FF内容的讲解。Node的属性介绍：nodeType：显示节点的类型nodeName：显示节点的名称nodeValue：显示节点的值attributes：获取一个属性节点firstChild：表示某一节点的第一个节点lastChild：表示某一节点的最后一个子节点childNodes：表示所在节点的所有子节点parentNode：表示所在节点的父节点nextSibling：紧挨着当前节点的下一个节点previousSibling：紧挨着当前节点的上一个节点ownerDocument：（不知）Node有各种各样的节点，我们先花一些时间认识他们，同时一并了解nodeType，nodeName和nodeValue属性：名称：元素节点nodeType：ELEMENT_NODEnodeType值：1nodeName：元素标记名nodeValue：null<body><div id = "t" ><span></span></div></body><script>var d = document.getElementById("t");document.write(d.nodeType);document.write(d.nodeName);document.write(d.nodeValue);//显示 1 DIV null</script>名称：属性节点nodeType：ATTRIBUTE_NODEnodeType值：2nodeName：属性名nodeValue：属性值<body><div id = "t" name="aaa"><span></span></div></body><script>var d = document.getElementById("t").getAttributeNode("name");document.write(d.nodeType);document.write(d.nodeName);document.write(d.nodeValue);//显示 2 name aaa</script>名称：文本节点nodeType：TEXT_NODEnodeType值：3nodeName：#textnodeValue：文本内容<body><div id = "t">bbb</div></body><script>var d = document.getElementById("t").firstChild;document.write(d.nodeType);document.write(d.nodeName);document.write(d.nodeValue);//显示 3 #text bbb</script>名称：CDATA文本节点（XML中传递文本的格式）nodeType：CDATA_SECTION_NODEnodeType值：4nodeName：#cdata-sectionnodeValue：CDATA文本内容（作者省略8个属性，需技术补充）attributes属性，直接获取一个属性节点，注意这里要使用[]，保持IE和FF的兼容性。<body name="ddd"><div id = "t" name = "aaa"><span>aaa</span><span>bbb</span><span>ccc</span></div></body><script>var d = document.getElementById("t").attributes["name"];document.write(d.name);document.write(d.value);//显示 name aaa</script>firstChild和lastChild属性，表示某一节点的第一个和最后一个子节点：<body><div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div></body><script>var d = document.getElementById("t");document.write(d.firstChild.innerHTML);document.write(d.lastChild.innerHTML);//显示 aaa ccc</script>childNodes和parentNode属性，表示所在节点的所有子节点和所在节点的父节点，这里的childNodes注意是一个数组：<body name="ddd"><div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div></body><script>var d = document.getElementById("t");document.write(d.childNodes[1].innerHTML);document.write(d.parentNode.getAttribute("name"));//显示 bbb ddd</script>nextSibling和previousSibling属性，分别表示在parentNode的childNodes[]数组中，紧挨着当前节点的上一个和下一个节点：<body name="ddd"><div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div></body><script>var d = document.getElementById("t").childNodes[1];document.write(d.nextSibling.innerHTML);document.write(d.previousSibling.innerHTML);//显示 ccc aaa</script>ownerDocument属性（不知如何使用）Node的方法介绍：hasChildNodes()：判定一个节点是否有子节点removeChild()：去除一个节点appendChild()：添加一个节点replaceChild()：替换一个节点insertBefore()：指定节点位置插入一个节点cloneNode()：复制一个节点normalize()：（不知）hasChildNodes()方法：判定一个节点是否有子节点，有返回true，没有返回false<body name="ddd"><div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div><div id = "m"></div></body><script>alert(document.getElementById("t").hasChildNodes());alert(document.getElementById("m").hasChildNodes());// 第一个true，第二个false</script>removeChild()方法：去除一个节点<body name="ddd"><div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div></body><script>var d = document.getElementById("t").firstChild;document.getElementById("t").removeChild(d);// <span>aaa</span>被去除</script>appendChild()方法：添加一个节点，如果文档树中已经存在该节点，则将它删除，然后在新位置插入。<body name="ddd"><div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div></body><script>var d = document.getElementById("t").firstChild;document.getElementById("t").appendChild(d);// <span>aaa</span>成了最后一个节点</script>replaceChild()方法：从文档树中删除（并返回）指定的子节点，用另一个节点来替换它。<body name="ddd"><div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div></body><script>var newd = document.createElement("span");newd.innerHTML = "eee";var oldd = document.getElementById("t").lastChild;document.getElementById("t").replaceChild(newd,oldd);// 最后一项成了 eee</script>insertBefore()方法：在指定节点的前面插入一个节点，如果已经存在，则删除原来的，然后在新位置插入<body name="ddd"><div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div></body><script>var newd = document.createElement("span");newd.innerHTML = "eee";var where = document.getElementById("t").lastChild;document.getElementById("t").insertBefore(newd,where);// 在最后一项的前面多了一项 eee</script>cloneNode()方法：复制一个节点，该方法有一个参数，true表示同时复制所有的子节点，false表示近复制当前节点<body name="ddd"><div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div><div id = "m"></div></body><script>var what = document.getElementById("t").cloneNode(false).innerHTML;document.getElementById("m").innerHTML = what;// 增加了一个aaabbbccc</script>
相关资源：javascript DOM的详解及实例代码
