来自星星的码农 - 个人博客

JavaScript/jQuery获取元素节点

js 获取元素(父节点,子节点,上/下一个兄弟节点)

var el = document.getElementById("domId");
var parent = el.parentNode; // 父节点
var chils = el.childNodes; // 全部子节点
var first = el.firstChild; // 第一个子节点
var last = el.lastChild; // 最后一个子节点　
var previous = el.previousSibling; // 上一个兄弟节点
var next = el.nextSbiling; // 下一个兄弟节点

js 获取兄弟节点

function siblings(elm) {
    var a = [];
    var p = elm.parentNode.children;
    for(var i =0,pl= p.length;i<pl;i++) {
        if(p[i] !== elm) a.push(p[i]);
    }
    return a;
}

jquery 获取元素(父节点,子节点,兄弟节点)

$("#id").parent(); // 父节点,向上遍历一层
$("#id").parents(); // 全部父节点
$("#id").parents(".class");
$("#id").children(); // 全部子节点
$("#id").children(".class"); //找到类名为 "class" 的所有子元素
$("#id").prev();  // 上一个兄弟节点
$("#id").prevAll(); // 之前所有兄弟节点
$("#id").next(); // 下一个兄弟节点
$("#id").nextAll(); // 之后所有兄弟节点
$("#id").siblings(); // 所有兄弟节点
$("#id").siblings(".class"); //找到类名为 "class" 的所有同胞元素
$("#id").find(".class"); // .find() 与 .children() 方法类似，不同的是后者仅沿着 DOM 树向下遍历一层

元素筛选

 $("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素)
 $("ul li").first(); // 选取ul li中匹配的第一个元素
 $("ul li").last(); // 选取ul li中匹配的最后一个元素
 $("ul li").slice(1, 4); // 选取第2 ~ 4个元素
 $("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素