JS / jQuery 获取父节点和子节点大全

概述

前端开发中操作 DOM 节点的常用方法汇总，涵盖原生 JavaScript 和 jQuery 两种方式，方便日常开发速查。

一、原生 JavaScript

父子节点（含文本节点）

var parent = test.parentNode;           // 父节点
var chils = test.childNodes;            // 全部子节点（含文本）
var first = test.firstChild;            // 第一个子节点
var last = test.lastChild;              // 最后一个子节点

兄弟节点（含文本节点）

var previous = test.previousSibling;    // 上一个兄弟节点
var next = test.nextSibling;            // 下一个兄弟节点

父子元素（仅元素节点，推荐）

var parent = test.parentElement;               // 父元素
var first = test.firstElementChild;            // 第一个子元素
var last = test.lastElementChild;              // 最后一个子元素
var previous = test.previousElementSibling;    // 上一个兄弟元素
var next = test.nextElementSibling;            // 下一个兄弟元素

现代方法

test.closest(".parent-class");     // 向上查找最近的匹配祖先
test.querySelector(".child");      // 向下查找第一个匹配子元素
test.querySelectorAll(".child");   // 向下查找所有匹配子元素

二、jQuery

父子关系

$("#test1").parent();                    // 直接父节点
$("#test1").parents();                   // 所有祖先节点
$("#test1").parents(".mui-content");     // 指定类名的祖先
$("#test").children();                   // 全部子节点
$("#test").children("#test1");           // 指定选择器的子节点
$("#test").contents();                   // 所有内容（含文本节点）
$("#test").find(".item");                // 查找所有后代元素

兄弟关系

$("#test1").prev();                      // 上一个兄弟
$("#test1").prevAll();                   // 之前所有兄弟
$("#test1").next();                      // 下一个兄弟
$("#test1").nextAll();                   // 之后所有兄弟
$("#test1").siblings();                  // 所有兄弟

三、区别总结

���荐做法

• 日常开发优先使用 parentElement、children 等 Element 系列（忽略文本节点）
• 向上查找用 closest() 代替多层 parentNode
• 现代项目用原生 JS 即可，无需引入 jQuery

标签：