JS知识回顾

ECMA Script：JS的基本语法
    变量
    数据类型
    流程控制语句
    函数
    对象：
        Math
        Date
        String
        Number
        Boolean——true, false(小写)
        Array []
        Object
            s = {name: "alex"}
            typeof s --> "object"
            记住是一个对象, 不是字典，而且前一个键不用加引号，JS中就是一个属性

    JS的序列化与反序列化：
        json数据：
            1. 一种轻量级的标准数据的交换格式
            2. 先将数据序列化成字符串格式
            3. 然后不同的语言使用不同的方法，即反序列化该字符串
            4. JS中
                s = "[12, 3, 45]"
                # 反序列化
                l = JSON.parse(s);
                # 序列化
                s = {name: "alex"};  // 这是一个对象
                l = JSON.stringfy(s); --> "{"name": "alex"}"  // 注意：在JS中，里面的数据一定是双引号

BOM：browser object model(JS对象控制浏览器)
    window.alert(); // 警告框，只有一个确定按钮
    window.confirm(); // 提示框，有确定按钮和取消按钮，有返回值，确定按钮返回true，取消按钮返回false
        let state = window.confirm("是否继续？");
        console.log(state);
        if (state) {
            // 继续逻辑
        } else {
            // 取消逻辑
        }
        let result = window.prompt("请输入一个数字："); // 输入框，有返回值
        console.log(result);

DOM：document object model(JS对象控制文档)
    1. 查找标签
        直接查找：
            document.getElementById("idname")  // 返回DOM对象
            document.getElementByTagName("tagname")  // 返回DOM对象数组
            document.getElementByName("name")  // 返回DOM对象数组
            document.getElementByClassName("classname")  // 返回DOM对象数组
            小技巧：ById的是getElement, 而其他的都是getElements!
                   因此只要是获取getElements对应元素的一定要加[0]

        导航查找：
            依赖一个或多个标签找到自己的父子兄弟标签
            .parentElement           // 父节点标签元素
            .chlidren                // 字节点标签元素
            .fristElementChild       // 第一个子标签元素
            .lastElementChild        // 最后一个子标签元素
            .nextElementSibling      // 下一个兄弟标签元素
            .previousElementSibling  // 上一个兄弟标签元素

    2. 操作标签
            获取文本节点的值：innerText    innerHTML
                div.innerHTML="alex"
                "alex"
                div.innerText="yuan" // 这个一般没必要用
                "yuan"
                div.innerHTML="<a href=''>click</a>"
                "<a href=''>click</a>"
                div.innerText="<a href=''>click</a>"
                "<a href=''>click</a>"

            操作属性
                ele=document.getElementById("i1")
                <div class=​"c1" id=​"i1" alex=​"xxx">​alex​</div>​
                ele.getAttribute("class")
                "c1"
                ele.getAttribute("alex")
                "xxx"
                ele.setAttribute("class","c2")
                undefined
                ele.removeAttribute("alex")
                undefined

            class属性操作
                ele.classList
                DOMTokenList(3) ["c1", "c2", "c3", value: "c1 c2 c3"]
                ele.classList.remove("c3")
                undefined
                ele.classList.remove("c1")
                undefined
                ele.classList.remove("c2")
                undefined
                ele.classList.add("c1")
                undefined
                ele.classList.add("c2")
                undefined
                ele.classList.add("c3")
                undefined
                ele.classList.add("c3")
                undefined
                ele.classList.add("c3")
                undefined
                ele.classList.remove("c2")
                undefined
                ele.classList.remove("c2")

            value属性操作(只用在以下三种标签内)
                input
                textarea
                select

            节点的增删改查(比如用在onchange事件中，选择省份及对应的城市，二级联动) *****
                创建节点(dom)
                let p = document.createElement("p");
                    p.innerHTML="abc";
                    p.setAttribute("class", "c1");

                添加节点
                    父节点.appendChild(子节点);

                删除节点
                    父节点.removeChile(子节点);

                替换节点
                    父节点.replaceChile(新节点, 旧节点);