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

1. 原生JS获取元素

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

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

1.2 H5新增的方法

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

        // 4.1 获取标签em
        var em = document.querySelector('em');
        console.log(em);

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

        // 4.3 获取id名为blue的盒子
        var blue = document.querySelector('#blue');
        console.log(blue);

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

1.3 获取body和html元素

        var bodyEle = document.body;
        console.log(bodyEle);

        // 获取html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);

1.4 获取父元素

1.5 获取子元素

1.5.1 children

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

    <div id="test">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    <script>
        var test = document.querySelector("#test");
        console.log(test.children); // 输出4个span
        console.log(test.children[0]); // 第一个span 
    </script>

children可以进行遍历

for (var i = 0; i < test.children.length; i++) {
            console.log(1);
}

1.5.2 childNodes

同时输出换行和元素

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

    </script>

备注：

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

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

        console.log(test.firstChild);

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

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

console.log(test.firstElementChild); // 输出第一个子元素
console.log(test.lastElementChild); // 输出第二个子元素

1.6 获取兄弟节点

2. jQuery获取元素的方法

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

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

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

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

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

2.2 获取body和html元素

console.log($("body"));
console.log($("html"));

2.3 选择器的获取补充

        // 4. 通配符选择器
        $("*").css("color", "red");
        // 5. 后代选择器
        console.log($("#blue h1"));
        // 6. 交集选择器
        console.log($("div.red"));
        $("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. 筛选父亲元素
        console.log($("#good").parent());
        // 2. 筛选父亲的父亲
        console.log($("#good").parent().parent());
        // 3. 筛选儿子
        console.log($("#blue").children("em"));
        // 4. 筛选儿子--相当于后代选择器
        console.log($("#blue").find("em"));
        // 5. 筛选兄弟 // 不包括自己本身
        console.log($("ul").siblings("#blue"));

结尾：

学习id： 201903090124-18

现在是大三学生，学习到了前后端交互的git阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。