• 一、 辨析获取元素关系的相关属性

• 参考资料
  • 《JavaScript高级程序设计（第3版）》 11.2 元素遍历
• 相关文章
  • javascript - 节点层次及 Node类型

一、 辨析获取元素关系的相关属性

• 请看下图

• 元素的 childNodes 属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。
  • firstChild的值：可能是元素、文本节点、注释或处理指令。
  • lastChild的值：可能是元素、文本节点、注释或处理指令。
  • nextSibling的值：可能是元素、文本节点、注释或处理指令。
  • lastSibling的值：可能是元素、文本节点、注释或处理指令。

• 如果使用 childNodes，必须先判断一些节点的类型（nodeType）才执行其他操作。

for (var i=0, len=element.childNodes.length; i < len; i++){
 if (element.childNodes[i].nodeType == 1){
 //执行某些操作
 }
} 

• 元素的 children 属性的子节点只会是元素节点。
  • firstElementChild的值：只会是元素节点。
  • lastElementChild的值：只会是元素节点。
  • nextElementSibling的值：只会是元素节点。
  • lastElementSibling的值：只会是元素节点。