JS函数预解析、作用域、dom对象

函数的预解析

声明函数预解析时候整个页面都被提升到scrpit的标签上面

赋值式的预解析函数整个页面都被提

升到scrpit的标签上面,后面的赋值函数忽略

    // scyHello()
    // 声明
    function sayHello(){
        console.log("hello")
    }

    // 预解析
    // 变量预解析，将声明的变量提升至scrpit标签的最上边
    console.log(a)  //由于变量的预解析，故此处打印的是undefind  
    var a = 10  
    console.log(a)  //由于上面已经进行赋值，故此处打印的是10

    var b=10
    console.log(b)
    // b()
    function b(){
        console.log("aa")
    }
    console.log(b)
    // b()

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

 作用域

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

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

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

    function test_1(){
        var c = "李四"
        // console.log(a)
        function test_2(){
            c="王五"
        }
        // console.log(a)
    }
    test_1()
    console.log(c)

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

DOM

1.什么是dom

1）DOM 英文全称“Document Object Model”，译为“文档对象模型”。

2）DOM 是一个与平台和编程语言无关的接口，通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。

2. DOM 的组成

1）核心DOM - 针对任何结构化文档的标准模型。

2）XML DOM - 针对 XML 文档的标准模型。

3）HTML DOM - 针对 HTML 文档的标准模型。

3.节点 Node
文档中的每一个部分都是节点,包括document 元素 属性 文本...

4.节点分类
document 文档节点
elementNode 元素节点
attributeNode 属性节点
textNode 文本节点
commentNode 注释节点
5.节点属性
nodeName 节点名 元素节点通过nodeName可以获取标签名
nodeValue 节点值
nodeType 节点类型 值是数字： document（9） element(1) attribute(2) text(3) comment(8)

    <div class="item">
        这是一个div
        <span>这是一个span标签</span>
    </div>
    <input type="text" name="" id="uname">
    <a class="item" href="#">超链接</a>
    <input type="radio" name="sex" id="">男
    <input type="radio" name="sex" id="">女

        // 整个html文档
            console.log(document.documentElement)
        // 获取头部head
        console.log(document.head)
        // 获取主体body 
        console.log(document.body)

        // 获取
        // 获取到了body的标签
        var body = document.body
        //获取到body中的第一个元素 
        var div = body.firstElementChild
        console.log(div)
        var div_0=body.firstChild
        console.log(div_0)

        var lastEle =body.lastElementChild
        console.log(lastEle)
        //获取的是相邻兄弟（下一个）
        console.log(div.nextElementSibling)
        var input = div.nextElementSibling
        //获取的是相邻兄弟（下一个）
        console.log(input.previousElementSibling)


        //通过函数来获取元素
        // getElementById():通过标签的id的值获取到某个标签
        console.log(document.getElementById("uname"))
        // getElementByClassName()根据标签的class属性的值来获取一组标签
        console.log(document.getElementsByClassName("item"))
        // getElementsByName() 根据标签的name属性的值来获取一组标签
        console.log(document.getElementsByName("sex"))
        // getElementByTagName() 根据标签名来获取一组标签
        console.log(document.getElementsByTagName(div))


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

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

节点案例

    <input type="button" value="添加" id="add" onclick="add()">
    <input type="button" value="删除" id="del" onclick="del()">
    <input type="button" value="修改" id="update" onclick="update()">
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <script>
        function add(){
            var ul = document.querySelector("ul")   //获取ul
            var li = document.createElement("li")   //创建节点
            li.innerHTML="新的li"
            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="<a href=#>dd</a>"
        }
    </script>

效果：

 标签属性

<body>
    <input type="text" value="文本框" id="user">
    <div id="div_1" class="div_1" stuname="张三">第一个div</div>
    <div id="div_2" data-index="1" data-xiaoming="男"></div>

    <script>
        // 获取标签的属性（自带的）
        // 第一种方式：元素名.属性名
        // 第一步，先找到标签，第二步，获取标签的属性
        var input=document.getElementById("user")
        console.log(input.value)
        // 更改数值
        input.value="admin"


        // 自定义属性
        var div_1 = document.getElementById("div_1")
        // getAttribute()获取标签的属性的值(包括一些自定义的值)
        console.log(div_1.getAttribute)
        console.log(div_1.getAttribute("stuname"))
        console.log(div_1.getAttribute("class"))
        div_1.setAttribute("stuid","1001")

        //attributes：获取的是标签的自带的属性以及自定属性
        console.log(div_1.attributes)
        console.log(div_1.attributes["id"])

        // 自定义属性：data-***
        console.log(div_2.dataset)
        console.log(div_2.dataset.index)
    </script>
</body>

案例密码框的显示隐藏

<body>
    <input type="password" name="" id="pwd">
    <input type="button" name="" id="btn" value="眼睛" onclick="test()">
    <script>
        //方法1
         var pwd = document.getElementById("pwd")
         var btn = document.getElementById("btn")
        btn.onclick = function(){
            if (pwd.type=="password") {
                pwd.type="text"
            } else {
                pwd.type="password"
            }
        }
        //方法2
        // function test(){
        //     if (pwd.type=="password") {
        //         pwd.type="text"
        //     } else {
        //         pwd.type="password"
        //     }
        // }
    </script>
</body>

 input框全选

<body>
    <p>
        <input type="checkbox" id="selectAll">全选/全不选   
    </p>
    <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")
        var inputAll  = document.querySelectorAll(".shop input")
        selectAll.onclick=function(){
            for(var i = 0; i<inputAll.length;i++){
                inputAll[i].checked=selectAll.checked
            }
        }
        for(var i=0;i<inputAll.length;i++){
            inputAll[i].onclick=function(){
                var count=0
                for(var m=0;m<inputAll.length;m++){
                    if (inputAll[m].checked==true) {
                        count++
                    }
                }
                if (count==inputAll.length) {
                    selectAll.checked=true
                } else {
                    selectAll.checked=false
                }
            }
        }
    </script>
  
</body>