JavaScript获取子节点、父节点与兄弟节点的完整指南

本文通过具体实例，系统介绍了在JavaScript中获取子节点、父节点以及兄弟节点的常用方法，旨在为开发者提供实用的参考代码与解析。

一、JavaScript获取子节点的方式

1. 通过DOM元素直接获取子节点

假设父标签的ID为test，目标子标签名为div。使用getElementsByTagName方法可以获取所有匹配的子元素，该方法返回一个HTMLCollection数组对象。访问具体的子节点时，需按照数组索引的方式进行访问。

var a = document.getElementById("test").getElementsByTagName("div");

2. 通过childNodes属性获取子节点

使用childNodes属性获取子节点时，返回的是包含所有子节点的NodeList数组。需要注意的是，该属性会将HTML中的换行符和空白字符也视为文本节点包含在内。

var b =document.getElementById("test").childNodes;

为了避免获取到无意义的空白节点，使用childNodes时必须进行过滤处理。可以通过正则表达式筛选出有效的节点信息。以下是过滤掉多余空白节点的相关逻辑示例：

//去掉换行的空格
for(var i=0; i<b.length;i++){
  if(b[i].nodeName == "#text" && !/\s/.test(b.nodeValue)){
    document.getElementById("test").removeChild(b[i]);
  }
}
//打印测试
for(var i=0;i<b.length;i++){
  console.log(i+"---------")
  console.log(b[i]);
}
//补充 document.getElementById("test").childElementCount; 可以直接获取长度 同length

4. 通过children属性获取子节点

利用children属性获取子元素是最便捷的方式之一，它同样返回一个数组对象。与childNodes不同，children仅包含元素节点，因此直接通过数组索引访问即可获取所需的子元素。

var getFirstChild = document.getElementById("test").children[0];

5. 获取第一个子节点

使用firstChild属性可以获取第一个子元素。但在某些浏览器环境中，直接打印可能会返回undefined或空白节点。这是因为浏览器在解析HTML时，会将换行和空格视为文本节点。因此，firstChild获取的可能是第一个空白节点，处理逻辑需与childNodes类似，进行有效性过滤。

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

6. 使用firstElementChild获取第一个子节点

使用firstElementChild属性获取第一个子元素时，无需担心空白节点的问题。该属性直接返回父元素下的第一个元素节点，忽略文本节点（如换行和空格），从而可以直接获取并显示文本信息。

var getFirstChild = document.getElementById("test").firstElementChild;

7. 获取最后一个子节点

获取最后一个子节点的方式与firstChild类似。同样存在lastChild和lastElementChild两个属性，其中lastElementChild直接指向最后一个元素节点，不再赘述具体用法。

var getLastChildA = document.getElementById("test").lastChild;
var getLastChildB = document.getElementById("test").lastElementChild;

二、JavaScript获取父节点的方式

1. 使用parentNode获取父节点

parentNode属性用于获取当前元素的直接父元素节点。这是W3C的标准属性，兼容性较好。

var p = document.getElementById("test").parentNode;

2. 使用parentElement获取父节点

parentElement属性与parentNode功能相似，但它是Internet Explorer的标准属性。两者在大多数情况下表现一致，但在某些特定DOM结构中可能存在差异。

var p1 = document.getElementById("test").parentElement;

3. 使用offsetParent获取所有父节点

从offsetParent的名称可以看出，它与元素的偏移量及位置布局相关。该属性用于获取与当前元素定位相关的最近父级元素，通常返回body下的节点信息，用于计算相对位置。

var p2 = document.getElementById("test").offsetParent;

三、JavaScript获取兄弟节点的方式

1. 通过父节点间接获取兄弟节点

var brother1 = document.getElementById("test").parentNode.children[1];

2. 获取上一个兄弟节点

在获取前一个兄弟节点时，可以使用previousSibling和previousElementSibling。两者的区别在于：previousSibling会匹配所有节点，包括换行和空格等文本节点；而previousElementSibling则直接匹配元素节点，忽略文本内容。

var brother2 = document.getElementById("test").previousElementSibling;
var brother3 = document.getElementById("test").previousSibling;

3. 获取下一个兄弟节点

与获取前一个兄弟节点类似，nextSibling和nextElementSibling也遵循相同的逻辑。nextSibling包含文本节点，而nextElementSibling仅返回元素节点。

var brother4 = document.getElementById("test").nextElementSibling;
var brother5 = document.getElementById("test").nextSibling;

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。