JS：DOM获取页面元素-CFANZ编程社区

1. 通过id获取页面元素__document.getElementById

<body>
    <div id="box">
        <ul>
            <li class="box_items">李沁</li>
            <li class="box_items">迪丽热巴</li>
            <li class="box_items">李一桐</li>
            <li class="box_items">杨洋</li>
            <li class="box_items">胡歌</li>
            <li class="box_items">沈腾</li>
        </ul>
    </div>

    <script>
        // 1. 通过getElementById获取页面元素
        var element = document.getElementById("box");
        console.log(element); //
    </script>
</body>

2. 通过类名获取元素__document.getElementsByClassName

<body>
    <div id="box">
        <ul>
            <li class="box_item">李沁</li>
            <li class="box_item">迪丽热巴</li>
            <li class="box_item">李一桐</li>
            <li class="box_item">杨洋</li>
            <li class="box_item">胡歌</li>
            <li class="box_item">沈腾</li>
        </ul>
    </div>
    
    <!-- 2. 通过类名获取元素 -->
    <script>
        var lis = document.getElementsByClassName("box_item");
        console.log(lis);
    </script>

</body>

3. 通过标签获取元素__document.getElementsByTagName

<body>
    <div id="box">
        <ul>
            <li class="box_item">李沁</li>
            <li class="box_item">迪丽热巴</li>
            <li class="box_item">李一桐</li>
            <li class="box_item">杨洋</li>
            <li class="box_item">胡歌</li>
            <li class="box_item">沈腾</li>
        </ul>
    </div>

    <!-- 3. 通过标签获取元素 -->
    <script>
        var lis = document.getElementsByTagName("li");
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function(){
                console.log(window.confirm("真的好看！"));
            } 
        }
    </script>

</body>

4. 通过选择器获取元素（默认选中文档中的第一个符合条件的元素）__document.querySelector

<body>
    <div id="box">
        <ul>
            <li class="box_item">李沁</li>
            <li class="box_item">迪丽热巴</li>
            <li class="box_item">李一桐</li>
            <li class="box_item">杨洋</li>
            <li class="box_item">胡歌</li>
            <li class="box_item">沈腾</li>
        </ul>
    </div>

    <!-- 4. 通过选择器获取元素（默认选中文档中的第一个符合条件的元素） -->
    <script>
        var firstElement = document.querySelector("li.box_item");
        firstElement.onclick = function(){
            alert("我喜欢你");
        }
    </script>

</body>

5. 找出符合选择器的全部元素（伪数组）__document.querySelectorAll

<body>
    <div id="box">
        <ul>
            <li class="box_item">李沁</li>
            <li class="box_item">迪丽热巴</li>
            <li class="box_item">李一桐</li>
            <li class="box_item">杨洋</li>
            <li class="box_item">胡歌</li>
            <li class="box_item">沈腾</li>
        </ul>
    </div>

    <!-- 4. 通过选择器获取元素（默认选中文档中的第一个符合条件的元素） -->
    <script>
        var elements = document.querySelectorAll("li.box_item");
        for (let i = 0; i < elements.length; i++) {
            elements[i].onclick = function(){
                alert("你们真好看！");
            }
        }
    </script>

</body>