JavaScript 获取子节点、父节点、兄弟节点方法总结__通过子节点获取父节点

相关文章推荐

曾经爱过的领结 · unity 与oc交互 - 简书· 1 周前 ·

玩滑板的黄花菜 · ZipFile 类 ...· 4 月前 ·

淡定的牛肉面 · c# - How to reference ...· 1 年前 ·

痴情的凉面 · 【Google Play】管理目标受众群体 ...· 1 年前 ·

发财的熊猫 · Java日期格式化（DateFormat类和 ...· 1 年前 ·

另类的砖头 · 进阶 | ...· 1 年前 ·

< 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;
获取的是当前元素的直接父元素，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 则直接匹配节点。