案例数据：
<div id="wrap"> <div id="city"> 城市 <div id="sh" class="east">上海</div> <div id="gz" class="south">广州</div> <div id="xa" class="west">西安</div> <div id="bj" class="north">北京</div> </div> </div>
1. 获取子节点的方式
1.1 通过获取dom方式直接获取子节点
var target = document.getElementById('city').getElementsByTagName('div');
getElementsByTagName 返回的是一个数组,在访问的时候要按数组的形式访问。
1.2 通过 childNodes 获取子节点
var target = document.getElementById('city').childNodes;
使用 childNodes 获取子节点的时候，childNodes 返回的是子节点的集合，是一个数组的格式。
它会把换行和空格也当成是节点信息。
为了不显示不必须的换行的空格，需通过正则表达式过滤掉不必要的信息。
// 去掉换行的空格 for(var i = 0; i < target.length; i++){ if(target[i].nodeName == "#text" && !/\s/.test(target.nodeValue)){ document.getElementById("city").removeChild(target[i]); } } // 打印测试 for(var i = 0; i < target.length; i++){ console.log(target[i]); } // 补充 document.getElementById("city").childElementCount; 可以直接获取长度 同length
1.3 通过 children 来获取子节点
var target = document.getElementById('city').children;
利用 children 来获取子元素是最方便的，它会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。
1.4 firstChild 获取第一个子节点
var getFirstChild = document.getElementById("city").firstChild;
firstChild 来获取第一个子元素，但是在有些情况下我们打印的时候会显示 undefined，这是什么情况呢？
其实 firstChild 和 childNodes 是一样的，在浏览器解析的时候会把换行和空格一起解析，获取的是第一个子节点，只是这个子节点是一个换行或者是一个空格而已，因此不要忘记和 childNodes 一样处理。
1.5 firstElementChild 获取第一个子节点
var target = document.getElementById('city').firstElementChild;
使用 firstElementChild 来获取第一个子元素的时候，这就没有 firstChild 的那种情况（匹配换行和空格信息），会获取到父元素第一个子元素的节点 ，这样就能直接显示出来文本信息了。
1.6 获取最后一个子节点
var target1 = document.getElementById('city').lastChild; var target2 = document.getElementById('city').lastElementChild; console.log(target1,'-----',target2)
lastChild 获取最后一个子节点的方式其实和 firstChild 是类似的，同样的 lastElementChild 和 firstElementChild 也是一样的。
2. 获取父节点的方式
2.1 parentNode 获取父节点
var target = document.getElementById('sh').parentNode; • 1
获取的是当前元素的直接父元素，parentNode 是w3c的标准。
2.2 parentElement 获取父节点
var target = document.getElementById('gz').parentElement;
parentElement 和 parentNode 一样，只是 parentElement 是 ie 的标准。
2.3 offsetParent 获取父节点
var target = document.getElementById('gz').offsetParent
offset 我们知道是偏移量 其实这个是与位置有关的上下级 ，直接能够获取到所有父亲节点， 这个对应的值是 body 下的所有节点信息。
3. 获取兄弟节点的方式
3.1 先获取父节点，再获取子节点，最终获取兄弟节点
var target = document.getElementById('sh').parentNode.children[1];
3.2 获取上一个兄弟节点
var target1 = document.getElementById('gz').previousElementSibling; var target2 = document.getElementById('gz').previousSibling; console.log(target1,'---',target2)
在获取前一个兄弟节点的时候可以使用 previousSibling 和 previousElementSibling。
区别：previousSibling 会匹配字符包括换行和空格，而不是节点，previousElementSibling 则直接匹配节点。
3.3 获取下一个兄弟节点
var target1 = document.getElementById('gz').nextElementSibling; var target2 = document.getElementById('gz').nextSibling;
在获取前一个兄弟节点的时候可以使用 nextSibling 和 nextElementSibling。
区别：nextSibling 会匹配字符包括换行和空格，而不是节点，nextElementSibling 则直接匹配节点
