《JavaScript高级程序设计（第3版）》学习笔记40：chapter_11-1 选择符API

本文链接：https://blog.csdn.net/weixin_44582681/article/details/101126575

这是第40篇笔记！
让学习“上瘾”，成为更好的自己！！！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择符API</title>
    <style>
    .important {
        color: red;
    }
    
    </style>
</head>

<body>

    <div id="myDiv">
        <h3>来自炎黄子孙的心声1</h3>
        我爱我的 <em>国家</em>，就像爱我的<em>母亲</em>一样！一刻都不会变！
        <h3>来自炎黄子孙的心声2</h3>
    </div>


    <p>我们是<strong>中国人</strong>，我们来自<strong>中国</strong></p>


    <script>
        /*
            对DOM的2个主要的扩展是选择符API和HTML5
            
            选择符API --> 众多JavaScript库中最常用的一项功能，根据CSS选择符选择与某个模式匹配的DOM元素
            
            选择符API Level1的核心是两个方法：querySelector() and querySelectorAll()
            在兼容浏览器中，可以通过“Document” and “Element”类型的实例调用他们


            */
        
        // 1, querySelector() --> 接收一个CSS选择符，返回与该模式匹配的“第一个”元素
        //                        如果没有找到匹配的元素，返回null

        // 取得body元素
        var body = document.querySelector('body');

        // 取得ID为‘myDiv’的第一个元素
        var selected = document.querySelector('#myDiv');
        // console.log(selected);
        // ---> 通过Document类型调用querySelector()方法时，会在文档元素(html)的范围内查找匹配的元素 

        // 取得类为“button”的第一个图像元素
        var img = document.body.querySelector('img.button');

        var div1 = document.getElementById('myDiv');
        console.log(div1);
        var h3 = div1.querySelector('h3');
        console.log(h3);
        // ---> 通过Element类型调用querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素
        
        // 【注意】 如果传入了不被支持的选择符，querySelector()会报错



        // 2, querySelectorAll() --> 接收一个CSS选择符，返回与该模式匹配的“所有”元素，一个NodeList的实例
        // 【注意】  1，其返回的值实际上是带有所有属性和方法的NodeList，而其底层实现类似于一组元素的“快照”，而非不断对文档进行搜索的动态查询
        //          2，只要传给querySelectorAll()的方法的CSS选择符有效，该方法都会返回一个NodeList对象，不管是否匹配到元素

        // 取得某<div>中的所有<em>元素（类似于getElementByTagName('em')）
        // var ems = document.getElementById('myDiv').querySelectorAll('em');
        
        // 取得类为“selected”的所有元素
        var selecteds = document.querySelectorAll('.selected');


        var i, len, strong;
        var strongs = document.querySelectorAll('p strong');
        console.log(strongs);
        for(i = 0, len = strongs.length; i < len; i ++){
            strong = strongs[i];
            strong.className = 'important';

        }


        // 3, matchesSelector() --> 接收一个CSS选择符，如果调用元素与该选择符匹配，返回true；否则，返回false
        // 选择符API Level 2为Element类型新增的这个方法

        // if(document.body.matchesSelector('body.page1')){
        //     // true
        // }

        // 在取得某个元素引用的情况下，使用这个方法能够方便地检测他是否被querySelector() or querySelectorAll()方法返回


        // 该方法未得到足够的支持，使用时最好编写一个“包装函数”
        function matchesSelector(element, selector){
            if(element.matchesSelector){
                return element.matchesSelector(selector);
            } else if(element.msMatchesSelector){
                return element.msMatchesSelector(selector);
            } else if (element.mozMatchesSelector){
                return element.mozMatchesSelector(selector);
            } else if (element.webkitMatchesSelector){
                return element.webkitMatchesSelector(selector);
            }else {
                throw new error('Not supported!');
            }
        }




    </script>


</body>

</html>