相关文章推荐
曾经爱过的领结  ·  unity 与oc交互 - 简书·  1 周前    · 
玩滑板的黄花菜  ·  ZipFile 类 ...·  4 月前    · 
淡定的牛肉面  ·  c# - How to reference ...·  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 返回的是一个数组,在访问的时候要按数组的形式访问。
JavaScript 获取子节点、父节点、兄弟节点方法总结_前端
1.2 通过 childNodes 获取子节点

var target = document.getElementById('city').childNodes;

使用 childNodes 获取子节点的时候,childNodes 返回的是子节点的集合,是一个数组的格式。
它会把换行和空格也当成是节点信息。
JavaScript 获取子节点、父节点、兄弟节点方法总结_JavaScript_02为了不显示不必须的换行的空格,需通过正则表达式过滤掉不必要的信息。

  // 去掉换行的空格
  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

JavaScript 获取子节点、父节点、兄弟节点方法总结_javascript_03
1.3 通过 children 来获取子节点

var target = document.getElementById('city').children;

利用 children 来获取子元素是最方便的,它会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。
JavaScript 获取子节点、父节点、兄弟节点方法总结_javascript_04
1.4 firstChild 获取第一个子节点

var getFirstChild = document.getElementById("city").firstChild;

firstChild 来获取第一个子元素,但是在有些情况下我们打印的时候会显示 undefined,这是什么情况呢?
其实 firstChild 和 childNodes 是一样的,在浏览器解析的时候会把换行和空格一起解析,获取的是第一个子节点,只是这个子节点是一个换行或者是一个空格而已,因此不要忘记和 childNodes 一样处理。
JavaScript 获取子节点、父节点、兄弟节点方法总结_javascript_05

1.5 firstElementChild 获取第一个子节点

var target = document.getElementById('city').firstElementChild;

使用 firstElementChild 来获取第一个子元素的时候,这就没有 firstChild 的那种情况(匹配换行和空格信息),会获取到父元素第一个子元素的节点 ,这样就能直接显示出来文本信息了。
JavaScript 获取子节点、父节点、兄弟节点方法总结_前端_06
1.6 获取最后一个子节点

var target1 = document.getElementById('city').lastChild;
var target2 = document.getElementById('city').lastElementChild;
console.log(target1,'-----',target2)

lastChild 获取最后一个子节点的方式其实和 firstChild 是类似的,同样的 lastElementChild 和 firstElementChild 也是一样的。
JavaScript 获取子节点、父节点、兄弟节点方法总结_JavaScript_07

2. 获取父节点的方式

2.1 parentNode 获取父节点

var target = document.getElementById('sh').parentNode;

获取的是当前元素的直接父元素,parentNode 是w3c的标准。
JavaScript 获取子节点、父节点、兄弟节点方法总结_前端_08
2.2 parentElement 获取父节点

var target = document.getElementById('gz').parentElement;

parentElement 和 parentNode 一样,只是 parentElement 是 ie 的标准。
JavaScript 获取子节点、父节点、兄弟节点方法总结_JavaScript_09
2.3 offsetParent 获取父节点

var target = document.getElementById('gz').offsetParent;

offset 我们知道是偏移量 其实这个是与位置有关的上下级 ,直接能够获取到所有父亲节点, 这个对应的值是 body 下的所有节点信息。
JavaScript 获取子节点、父节点、兄弟节点方法总结_javascript_10

3. 获取兄弟节点的方式

3.1 先获取父节点,再获取子节点,最终获取兄弟节点

var target = document.getElementById('sh').parentNode.children[1];

JavaScript 获取子节点、父节点、兄弟节点方法总结_前端_11
3.2 获取上一个兄弟节点

var target1 = document.getElementById('gz').previousElementSibling;
var target2 = document.getElementById('gz').previousSibling;
console.log(target1,'---',target2)

在获取前一个兄弟节点的时候可以使用 previousSibling 和 previousElementSibling。
区别:previousSibling 会匹配字符包括换行和空格,而不是节点,previousElementSibling 则直接匹配节点。
JavaScript 获取子节点、父节点、兄弟节点方法总结_前端_12
3.3 获取下一个兄弟节点

var target1 = document.getElementById('gz').nextElementSibling;
var target2 = document.getElementById('gz').nextSibling;

在获取前一个兄弟节点的时候可以使用 nextSibling 和 nextElementSibling。
区别:nextSibling 会匹配字符包括换行和空格,而不是节点,nextElementSibling 则直接匹配节点。
JavaScript 获取子节点、父节点、兄弟节点方法总结_JavaScript_13