DOM操作

 预解析:在代码开始执行之前，会对代码进行通读解释，然后在进行执行

全局作用域和局部作用域的区别:

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

    //局部作用域 全局作用域中又划分出的小范围的作用域,函数内部可以创建出局部作用域

   

// 获取整个页面

    // console.log(document.documentElement);

    // // 获取头部 head

    // console.log(document.head);

    // // 获取主体部分 body

    // console.log(document.body);

    // var body = document.body.firstElementChild;

    // var body1 = document.body.firstChild;

    // // 获取body里的第一个元素

    // console.log(body);

    // console.log(body1);

    // var last = document.body.lastElementChild

    // var last1 = document.body.lastChild

    // console.log(last);

    // console.log(last1);

    // // 通过函数来获取元素

    // // getElementById() :通过标签的id属性值获取

    // console.log(document.getElementById("box8"));

    // // getElementsByClassName:通过标签的class属性值获取

    // console.log(document.getElementsByClassName("box1"));

    // // getElementsByName() 通过标签的name属性来获取一组标签

    // console.log(document.getElementsByName(""));

    // // getElementsByTagName:根据标签名获取一组标签

    // console.log(document.getElementsByTagName("div"));

    // //querySelector("div")

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

    // console.log(document.querySelector("div"));

    // console.log(document.querySelectorAll("div"));

    // var divr = document.querySelectorAll("div");

    // for (var i = 0; i < divr.length; i++) {

    //     console.log(divr[i]);

    // }

    console.log(document.querySelector(".box"));

    console.log(document.querySelectorAll(".box"));

    // 先找到元素,然后找到该元素的属性

    var mata = document.getElementById("nima");

    console.log(mata.value, mata.type);

    // 更改属性

    mata.value = "clearlove"

    // 自定义属性

    var pig = document.getElementById("deft");

    // console.log(pig.getAttribute("ttyu"));

    pig.setAttribute("s", "121");

    console.log(pig.attributes);

    console.log(pig.attributes["id"]);
 

    // 自定义属性: data-***

    console.log(pig.dataset);

    console.log(pig.dataset.index);

    console.log(pig.dataset["wang"]);

   function add() {

        // 获取元素

        var add1 = document.querySelector("ul");

        // 创建节点

        var add2 = document.createElement("li");

        // 添加元素

        add2.innerHTML = "添加一个新的元素";

        // 在标签内追加一个新的元素

        add1.appendChild(add2);

    }

    function del() {

        var del1 = document.querySelector("ul");

        // 获取ul标签

        var del2 = del1.firstElementChild;

        del1.removeChild(del2);

        // 删除节点removeChild()

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

    }

   var clear = document.getElementById("clear");

    function click1() {

        if (clear.type == "password") {

            clear.type = "text";

        } else {

            clear.type = "password";

        }

    }