通过 HTML 页面的指定标签查找其父节点（元素节点或文档节点），我们可以通过如下属性实现:
var 指定标签的父节点=指定标签.parentNode；值得注意的是:
parentNode: 表示获取指定节点的父节点。一个元素节点的父节点可能是一个元素(Element )节点，也可能是一个文档(Document )节点。parentElement: 表示获取当前节点的父元素节点。如果该元素没有父节点，或者父节点不是一个元素节点，则返回 null。通过 HTML 页面的指定标签查找其子节点，我们可以通过如下属性实现:
firstChild: 获取指定标签的第一个子节点。 var btn3 = document.getElementById('btn3'); btn3.onclick = function(){ var parentDiv = document.getElementById('parentDiv'); var firstChild = parentDiv.firstChild; firstChild.style.backgroundColor = 'lightgreen'; }lastChild: 获取指定标签的最后一个子节点。 var btn4 = document.getElementById('btn4'); btn4.onclick = function(){ var parentDiv = document.getElementById('parentDiv'); var lastChild = parentDiv.lastChild; lastChild.style.backgroundColor = 'lightgreen'; } childNodes: 获取指定标签的所有子节点。 var btn5 = document.getElementById('btn5'); btn5.onclick = function(){ var parentDiv = document.getElementById('parentDiv'); var children = parentDiv.childNodes; for (var i=0;i<children.length;i++) { children[i].style.backgroundColor = 'lightgreen'; } }
在上述测试获取指定节点的子节点时，我们规定必须要在 IE 8 版本或之前的版本中运行，而不能在其他浏览器中运行。原因在于 DOM 遍历节点时，并不是我们所想象的那样。我们所想象的浏览器遍历 DOM 时，解析的结果应该是如下图所示:
有些浏览器在遍历 DOM 时，会在元素节点之间添加一个文本节点，不管这个文本节点的内容是否为空（即空白节点）。
不会自动添加空白节点的浏览器只有 IE 8 版本以及之前的版本。换句话讲，IE 9 及之后的版本、Chrome、Firefox 和 Safari 等浏览器都会自动添加空白节点。这个问题的解决，可以通过 getElementsByTagName() 方法实现。例如如下代码的改写:
var btn3 = document.getElementById('btn3'); btn3.onclick = function(){ var parentDiv = document.getElementById('parentDiv'); //var firstChild = parentDiv.firstChild; var firstChild = parentDiv.getElementsByTagName('div')[0]; firstChild.style.backgroundColor = 'lightgreen'; }还可以自己封装一个geChildNodes()方法获取真正的子节点：
function getChildNodes(parentDiv) { // 获取所有子节点 var childNodes=parentDiv.childNodes; // 定义一个数组，用来存放真正的子节点 var childNodeArr=[]; for(var i=0;i<childNodes.length;i++){ if (childNodes[i].nodeType==1){// 真正的元素节点 childNodeArr.push(childNodes[i]); } } return childNodeArr; }通过 HTML 页面的指定标签查找兄弟节点，我们可以通过如下属性实现:
previousSibling: 获取指定节点的前一个兄弟节点。 // 获取按钮 var btn6=document.getElementById("btn6"); btn6.onclick=function () { var two=document.getElementById("two"); // 中间存在一个空白节点 var bt5=two.previousSibling.previousSibling; bt5.style.backgroundColor="red"; } nextSibling: 获取指定节点的后一个兄弟节点。同样存在空白节点
向 HTML 页面标签插入新的标签或者其他标签，我们可以通过如下方法实现。
appendChild(): 将一个节点添加到指定父节点的子节点列表末尾。
parent.appendChild(child) var first = document.getElementById('first'); var li = document.createElement('li'); first.appendChild(li);insertBefore(): 在当前节点的某个子节点之前再插入一个子节点。
parent.insertBefore(newChild,currentChild)我们可以通过如下示例来学习插入节点的使用:
var first = document.getElementById('first'); var two = document.getElementById('two1'); var li = document.createElement('li'); first.insertBefore(li,two);在上述示例中，我们都是向指定节点插入一个创建的新标签。那如果我们是将一个已存在 HTML 页面的标签插入到指定标签中，又会是什么样子的效果呢？
var btn4=document.getElementById("btn4"); btn4.onclick=function () { var three1=document.getElementById("three1"); var second=document.getElementById("second"); second.appendChild(three1); }前：
后：
从 HTML 页面中删除指定元素节点（标签），我们可以通过以下方法实现:
parentNode.removeChild(childNode) var btn = document.getElementById('btn'); btn.onclick = function(){ var parent = document.getElementById('container'); var two = document.getElementById('two'); parent.removeChild(two); }将 HTML 页面中指定元素节点（标签）被替换，我们可以通过以下方法实现:
parentNode.replaceChild(newChild,oldChild)将 HTML 页面中指定元素节点（标签）进行复制，我们可以通过以下方法实现:
node.cloneNode(boolean)需要说明的是: cloneNode() 方法的参数表示是否采用深度克隆。如果为true，则该节点的所有后代节点也都会被克隆；如果为false，则只克隆该节点本身。
我们可以通过如下示例来学习插入节点的使用:
var btn = document.getElementById('btn'); btn.onclick = function(){ var parent = document.getElementById('container'); var two = document.getElementById('two'); var newLi = two.cloneNode(true); parent.appendChild(newLi); }
