预解析、作用域、DOM

最新推荐文章于 2023-11-03 09:43:47 发布

命灵

最新推荐文章于 2023-11-03 09:43:47 发布

阅读量101

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_72268472/article/details/126199775

版权

预解析

变量预解析:将声明的变量提升至script标签内的最上面

console.log(a)由于变量的预解析，故此处打印的是undefined var a=10

console.log(a)//由于上面已经进行赋值，故此处打印的是14

函数的预解析

声明式的函数预解析时，整个函数将被提升到script标签内的最上面

赋值式的函数预解析时，将赋值的变量提升到script标签内的最上面，后面的赋值函数忽略

作用域

作用域:全局作用域和局部作用域

全局作用域:整个页面，只有当页面关闭时，全局作用域才会失效

局部作用域:全局作用域中又划分出的小范围的作用域，函数内部可以创建局部作用域，到目前为止，也只有函数内部可以创建局部变量

全局变量可以在函数内部进行访问，但是函数内部定义的变量不能在函数外部进行访问

DOM

获取DOM中的节点,使用的是document对象

获取整个html文档

console.log(document.documentElement)

获取头部head

console.log( document.head)

获取主体body

console.log( document.body)

var body=document.body 获取到了body标签

var div=body.firstElementChild 获取到body中的第一个元素

var lastEle=body. lastElementchildl 获取最后一个元素

通过函数来获取元素

getElementById():通过标签的id属性的值获取到某个标签

console.log( document.getElementById( "uname" ))

getElementsByClassName():根据标签的class属性的值来获取一组标签console.log(document.getElementsByClassName( "item" ) )

getElementsByName():根据标签的name属性的值来获取一组标签console.log(document.getElementsByName( "sex" ))

getElementsByTagName():根据标签名来获取一组标签console.log(document.getElementsByTagName( "div" ))

querySelector():根据标签选择器名称来获取满足条件的并且是遇到的第一个标签

document.querySelector

添加元素

删除元素

删除节点removeChild()

先获取到要删除的标签，然后再调用removeChild()

ul.remove()删除元素本身以及所有子元素

自定义属性：data-***

console.log(div_1.dataset)

console.log(div_1.dataset:index)

属性操作

全选/全不选案例

<!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>
</head>

<body>
    <p><input type="checkbox" id="selectAll">全选/全不选</p>
    <hr>
    <ul class="shop">
        <li><input type="checkbox">草莓</li>
        <li><input type="checkbox">香蕉</li>
        <li><input type="checkbox">葡萄</li>
        <li><input type="checkbox">橘子</li>
        <li><input type="checkbox">哈密瓜</li>
    </ul>
    <script>
        var selectAll = document.querySelector("#selectAll")
            //获取所有的input标签
        var inputAll = document.querySelectorAll(".shop input")
        console.log(inputAll)
        selectAll.onclick = function() {
                //alert(selectAll.checked)
                //循环遍历出ul中的所有的input标签
                for (var i = 0; i < inputAll.length; i++) {
                    //console.log(inputAll[i])
                    inputAll[i].checked = selectAll.checked
                }
            }
            //给每一个水果选项绑定一个单机事件
        for (var i = 0; i < inputAll.length; i++) {
            //绑定一个单机事件
            inputAll[i].onclick = function() {
                var count = 0; //用来统计选中的input标签的个数
                for (var m = 0; m < inputAll.length; m++) {
                    if (inputAll[m].checked == true) {
                        count++
                    }
                }
                //如果count的值等于水果的个数，全选要选中
                if (count == inputAll.length) {
                    selectAll.checked = true
                } else {
                    selectAll.checked = false
                }
            }
        }
    </script>
</body>

</html>

效果

获取class

设置class属性

命灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
预解析、作用域、DOM

getElementsByClassName():根据标签的class属性的值来获取一组标签console.log(document.getElementsByClassName( "item" ) )getElementsByClassName():根据标签的class属性的值来获取一组标签console.log(document.getElementsByClassName( "item" ) )赋值式的函数预解析时，将赋值的变量提升到script标签内的最上面，后面的赋值函数忽略。...
复制链接

扫一扫