javascript脚本代码的编写位置和 dom查询（querySelectorAll、getElementsByClassName）、全选反选练习

qq_46302247

已于 2022-06-14 17:13:51 修改

阅读量194

点赞数

分类专栏： vue 文章标签： javascript 前端开发语言

于 2022-06-14 11:44:06 首次发布

本文链接：https://blog.csdn.net/qq_46302247/article/details/125275296

版权

vue 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

1、放在body底部

<body>
    <button id="myButton">点我</button>
    <script>
        let dom = document.getElementById('myButton')
        dom.onclick = function() {
            alert('222')
        }
    </script>
</body>

2、放在head底部
在这里插入图片描述

<head>
    <script>
       window.onload = function() {
            let dom = document.getElementById('myButton')
            dom.onclick = function() {
                alert('222')
            }
       }
    </script>
</head>
<body>
    <button id="myButton">点我</button>
    
</body>

总结：两种都可以，根据公司规范来

3、dom查询

let body = document.body //获取 body 元素

let html = document.documentElement // 获取 html 根标签

let all = document.all //获取页面中所有元素

let all = document.getElementsByTagName("*") 	//获取页面中所有元素,和 document.all 是一样的

querySelector

<head>
    <script>
        window.onload = function() {
            let box = document.getElementsByClassName("box")
            console.log(box[0].innerHTML); //<div>我是box里面的div</div>

            let box1 = document.querySelector('.box div')
            console.log(box1.innerHTML);//我是box里面的div
        }
    </script>
</head>
<body>
    <div class="box">
        <div>我是box里面的div</div>
    </div>
</body>

querySelectorAll
在这里插入图片描述

<head>
    <script>
        window.onload = function() {
            let box = document.querySelectorAll('.box div')
            console.log(box[0].innerHTML);//我是box里面的div

            let boxid = document.querySelectorAll('#boxID div')
            console.log(boxid[0].innerHTML);//我是ID里面的div
        }
    </script>
</head>
<body>
    <div class="box">
        <div>我是box里面的div</div>
    </div>
    <div id="boxID">
        <div>我是ID里面的div</div>
    </div>
</body>

在这里插入图片描述

注意：只要提到节点就包括空白文本（空格、换行等）
在这里插入图片描述
在 childNodes 和 children 之间，推荐使用children ，因为它不包括空白文本（空格、换行等）

在 firstChild 和 firstElementChild 之间，推荐使用firstElementChild ，因为它不包括空白文本（空格、换行等）,但是 firstElementChild 不兼容ie8
在这里插入图片描述

全选反选练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onclick = function() {
            let domList = document.getElementsByName("items")
            let boxDom = document.getElementById('checkedAllBox')

            function bindClick(id, func) {
                let dom = document.getElementById(id)
                dom.onclick = func
            }
            // 全 选
            bindClick("checkedAllBtn", function() {
                
                boxDom.checked = true
                for(let i=0; i<domList.length; i++) {
                    domList[i].checked = true
                }

            })
            // 全不选
            bindClick("checkedNoBtn", function() {
                boxDom.checked = false
                for(let i=0; i<domList.length; i++) {
                    domList[i].checked = false
                }
            })
            // 反 选
            bindClick("checkedRevBtn", function() {
                for(let i=0; i<domList.length; i++) {
                    domList[i].checked = !domList[i].checked
                }
            })
            // 提 交
            bindClick("sendBtn", function() {
                for(let i=0; i<domList.length; i++) {
                    domList[i].checked ? alert(domList[i].value) : ''
                }
            })
            // 全选/全不选
            bindClick("checkedAllBox", function() {
                let flag = event.target.checked
                for(let i=0; i<domList.length; i++) {
                    domList[i].checked  = flag
                }
            })
            //点击每一个input
            for(let i=0; i<domList.length; i++) {
                domList[i].onclick = function() {
                    boxDom.checked = true
                    for(let j=0; j<domList.length; j++) {
                        if(!domList[j].checked) {
                            boxDom.checked = false
                            break;
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <form>
        你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
        <br/>
        <input type="checkbox" name="items" value="足球"/>足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="羽毛球"/>羽毛球
        <input type="checkbox" name="items" value="乒乓球"/>乒乓球
        <br/>
        <button type="button" id="checkedAllBtn">全 选</button>
        <button type="button" id="checkedNoBtn">全不选</button>
        <button type="button" id="checkedRevBtn">反 选</button>
        <button type="button" id="sendBtn">提 交</button>
    </form>
</body>
</html>

在这里插入图片描述