函数预解析和作用域、节点

函数的预解析

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

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

// 声明式
function qz() {
     console.log("请坐")
     }
     qz()


// 赋值式
var rz = function() {
    console.log("入座")
    }
    rz()

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

console.log(a)  //由于变量的预解析，故此处打印的是undefined
var a = 10
console.log(a)  //由于上面已经进行赋值，故此处打印的是10

案例

        function test() {
            // 用来计算两个数的和
            var result = 10 + 20
                // console.log(result)
            console.log(a)
            return result
        }
        test()
        console.log(test())
        console.log(result)

作用域

作用域：全局作用域和局部作用域

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

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

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

        function test1() {
            var a = "李四"
                // console.log(a)
            function test2() {
                a = "王五"
            }
            // console.log(a)
        }

        // test1()
        // console.log(a)
        function test3() {
            num = 100
        }
        test3()
        console.log(num) // 自动转换成全局变量

节点

获取整个html

console.log(document.documentElement)

获取head

console.log(document.head)

获取body

console.log(document.body)

        // 获取到body标签
        var body = document.body
            // firstElementChild:获取某个元素中第一个子元素
        var div = body.firstElementChild
        console.log(div)
        var div2 = body.firstChild
        console.log(div2)
            // lastElementChild：获取某个元素中最后一个子元素
        var lastEle = body.lastElementChild
        console.log(lastEle)
            // nextElementSibling：获取相邻兄弟(下一个)
        console.log(div.nextElementSibling)
        var input = div.nextElementSibling
            // previousElementSibling：获取相邻兄弟(上一个)
        console.log(input.previousElementSibling)

通过函数来获取元素

        //通过函数来获取元素
        // getElementById()：通过标签的id属性值来获取某个标签
        console.log(document.getElementById("ad"))
        // getElementsByClassName()通过标签的class属性值来获取一组标签
        console.log(document.getElementsByClassName("aa"))
        // getElementsByName() 通过标签的name属性的值来获取一组标签
        console.log(document.getElementsByName("n"))
        // getElementsByTagName() 通过标签名来获取一组标签
        console.log(document.getElementsByTagName("div"))

// querySelector():根据选择器名称来获取满足条件的并且是遇到的第一个标签
        console.log(document.querySelector("div"))
            // querySelectorAll():根据选择器名称来获取满足条件的多个标签
        console.log(document.querySelectorAll("div"))
        var divs = document.querySelectorAll("div")
            // 通过循环可将一组元素打印输出
        for (var i = 0; i < divs.length; i++) {
            console.log(divs[i])
        }
        console.log(document.querySelector("#ad"))
        console.log(document.querySelector(".aa"))
        console.log(document.querySelectorAll(".aa"))

        // 通过标签的id值来获取标签
        console.log(ad)

添加、删除、修改节点

    <input type="button" value="添加节点" id="btnAdd" onclick="Add()">
    <input type="button" value="删除节点" id="btnDel" onclick="Del()">
    <input type="button" value="修改节点" id="btnUpdate" onclick="Update()">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    

<script>
        // 添加节点
        function Add() {
            var ul = document.querySelector("ul") // 获取ul
            var li = document.createElement("li") // 创建节点
            li.innerHTML = "这是一个新节点"
            ul.appendChild(li) //添加
        }
        // 删除节点
        function Del() {
            var ul = document.querySelector("ul") // 获取ul
            var li = ul.lastElementChild
            ul.removeChild(li)
                // ul.remove //删除元素本身以及所有子元素
        }
        //修改节点
        function Update() {
            var ul = document.querySelector("ul") // 获取ul
            var li = ul.lastElementChild
            li.innerHTML = "修改"
        }
    </script>