原生Javascript和jQuery获取元素归纳 ,(““) 子节点 父节点 兄弟节点

时间：2025-03-06 17:32:27

1. 原生JS获取元素

1.1 通过标签、类名、属性获取

        // 1. 获取类名是box的div的集合
        var box = ('box');
        // 1.1 返回的是伪数组，具有length属性，可以用for循环进行遍历；但是没有pop和push方法
        for (var i = 0; i < ; i++) {
            (1);
        }
        (box);
        // 2. 获取的是id名是blue的那一个元素
        var blue = ('blue');
        (blue);
        // 3. 获取span标签的集合 伪数组
        var span = ('span');
        (span);

1.2 H5新增的方法

        // 4. H5获取指定选择器的第一个元素的方式

        // 4.1 获取标签em
        var em = ('em');
        (em);

        // 4.2 获取类名为box的盒子
        var box2 = ('.box');
        (box2);

        // 4.3 获取id名为blue的盒子
        var blue = ('#blue');
        (blue);

        // 5. 获取该指定选择器所有属性的集合 // 伪数组
        var box1 = ('.box');
        (box1);

1.3 获取body和html元素

        var bodyEle = ;
        (bodyEle);

        // 获取html元素
        var htmlEle = ;
        (htmlEle);

1.4 获取父元素

1.5 获取子元素

1.5.1 children

非W3C标准，但是使用最多，被广大浏览器默认接受，没有兼容性问题

    <div >
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    <script>
        var test = ("#test");
        (); // 输出4个span
        ([0]); // 第一个span 
    </script>

children可以进行遍历

for (var i = 0; i < ; i++) {
            (1);
}

1.5.2 childNodes

同时输出换行和元素

    <div >
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    <script>
        var test = ('#test');
        (); // 有9个子元素
        // 节点的组成包括 nodeType nodeName nodeValue
        // nodeType是1，表示该节点是元素; 是2，表示该节点是属性；是3表示该节点是文本
        ([0].nodeType); // 3 测试输出表示该元素是文本 #test
        ([1].nodeType); // 1 测试输出表示该元素是元素

    </script>

备注：

  • 节点的组成包括 nodeType nodeName nodeValue
  •  nodeType是1，表示该节点是元素; 是2，表示该节点是属性；是3表示该节点是文本

1.5.3 firstChild【少用】【没有兼容性问题】

        ();

会输出第一个子节点，不管是文本(换行)还是元素

1.5.4 firstElementChild &lastElementChild【少用】【有兼容性问题】【ie9及以上才支持】

(); // 输出第一个子元素
(); // 输出第二个子元素

1.6 获取兄弟节点

2. jQuery获取元素的方法

2.1 通过标签、类、id获取元素

        // 1. 通过类名获取元素 
        var box = $(".box");
        (box);

        // 2. 通过id名获取元素
        var blue = $("#blue");
        (blue);

        // 3. 通过标签名获取元素
        var div = $("div");
        (div);

        // 以上三种方法获取过来的都是伪数组

2.2 获取body和html元素

($("body"));
($("html"));

2.3 选择器的获取补充

        // 4. 通配符选择器
        $("*").css("color", "red");
        // 5. 后代选择器
        ($("#blue h1"));
        // 6. 交集选择器
        ($(""));
        $("div#blue h1").css("color", "pink");
        // 7. 并集选择器
        $("div,span,header").css("fontSize", 30);

2.4 后代和子代选择器

        // 1. 后代选择器   所有亲儿子和孙子都选择
        $("#blue em").css("color", "pink");
        // 2. 子代选择器   选的是亲儿子
        $("#blue>em").css("fontSize", 30);

2.5 筛选 结构选择器

        // 1. 筛选第一个元素
        $("ul li:first").css("font-weight", "700");
        // 2. 筛选第二个元素
        $("ul li:last").css("font-style", "italic");
        // 3. 筛选指定顺序的元素
        $("ul li:eq(2)").css("color", "red");
        // 4. 筛选偶数小li
        $("ul li:odd").css("backgroundColor", "grey");
        // 5. 筛选奇数小li
        $("ul li:even").css("textDecoration", "underline");

2.6 筛选父子兄弟选择器

        // 1. 筛选父亲元素
        ($("#good").parent());
        // 2. 筛选父亲的父亲
        ($("#good").parent().parent());
        // 3. 筛选儿子
        ($("#blue").children("em"));
        // 4. 筛选儿子--相当于后代选择器
        ($("#blue").find("em"));
        // 5. 筛选兄弟 // 不包括自己本身
        ($("ul").siblings("#blue"));

结尾：

学习id： 201903090124-18

相关文章