JavaScript基礎視頻教程總結（101-110章）

101-110章總結 101. dom查詢的剩餘方法我是第一個box1我是box1中的div 我是box1中的div 我是box1中的div 我是box1中的div 102. dom增刪改你喜歡哪個城市? 北... ...
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>101-110章總結</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>
<body>
    
<pre>
101. dom查詢的剩餘方法
</pre>
<div id="box2"></div>
<div class="box1">我是第一個box1<div>我是box1中的div</div></div>
<div class="box1"><div>我是box1中的div</div></div>
<div class="box1"><div>我是box1中的div</div></div>
<div class="box1"><div>我是box1中的div</div></div>
<div></div>
<script type="text/javascript">
    console.log("--第101--")
    
    function fun101(){
        //body
        console.log("--body--")
        var body1 = document.getElementsByTagName("body")[0]
        var body2 = document.body
        console.log(body1)
        console.log(body2)
        // html
        console.log("--html--")
        var html = document.documentElement
        console.log(html)
        // all
        console.log("--all--")
        var all = document.all
        console.log(all.length)
        for ( var i=0 , allL = all.length ; i<allL; i++) {
            console.log(all[i])
        }
        /*
         * 根據元素的class屬性值查詢一組元素節點對象
         * getElementsByClassName()可以根據class屬性值獲取一組元素節點對象，
         * 但是該方法不支持IE8及以下的瀏覽器
         */
        // class
        console.log("--getElementsByClassName--")
        var box1 = document.getElementsByClassName("box1")
        console.log(box1.length)
        //獲取頁面中的所有的div
        console.log("--div--")
        var divs = document.getElementsByTagName("div")
        console.log(divs.length)
        /*
         * document.querySelector()
         *  - 需要一個選擇器的字元串作為參數，可以根據一個CSS選擇器來查詢一個元素節點對象
         *  - 雖然IE8中沒有 getElementsByClassName()但是可以使用querySelector()代替
         *  - 使用該方法總會返回唯一的一個元素，如果滿足條件的元素有多個，那麼它只會返回第一個
         */
        console.log("--querySelector--")
        var qbox1 = document.querySelector(".box1")
        console.log(qbox1)
        /*
         * document.querySelectorAll()
         *  - 該方法和querySelector()用法類似，不同的是它會將符合條件的元素封裝到一個數組中返回
         *  - 即使符合條件的元素只有一個，它也會返回數組
         */
        console.log("--querySelectorAll--")
        var qabox1 = document.querySelectorAll(".box1")
        console.log(qabox1.length)
    }
    fun101()
</script>

<pre>
102. dom增刪改
</pre>
<div class="clearfix">
    <div id="total">
        <div class="inner">
            <p>你喜歡哪個城市?</p>
            <ul id="city">
                <li id="bj">北京</li>
                <li id="sh">上海</li>
                <li>東京</li>
                <li>首爾</li>
            </ul>
        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">創建一個"廣州"節點,添加到#city下</button></div>
        <div><button id="btn02">將"廣州"節點插入到#bj前面</button></div>
        <div><button id="btn03">使用"廣州"節點替換#bj節點</button></div>
        <div><button id="btn04">刪除#bj#sh節點</button></div>
        <div><button id="btn05">讀取#city內的HTML代碼</button></div>
        <div><button id="btn06">設置#bj內的HTML代碼</button></div>
        <div><button id="btn07">創建一個"廣州""合肥"節點,添加到#city下</button></div>
    </div>
</div>

<script type="text/javascript">
    console.log("--第102--");
    
    myClick("btn01",function(){
        var newLi = document.createElement("li")
        var nliText = document.createTextNode("廣州")
        newLi.appendChild(nliText)
        var city = document.getElementById("city")
        city.appendChild(newLi)
    })
    myClick("btn02",function(){
        var newLi = document.createElement("li")
        var nliText = document.createTextNode("廣州")
        newLi.appendChild(nliText)
        var city = document.getElementById("city")
        var bj = document.getElementById("bj")
        /*
         * insertBefore()
         *  - 可以在指定的子節點前插入新的子節點
         *  - 語法：
         *      父節點.insertBefore(新節點,舊節點);
         */
        city.insertBefore(newLi,bj)
    })
    myClick("btn03",function(){
        var newLi = document.createElement("li")
        var nliText = document.createTextNode("廣州")
        newLi.appendChild(nliText)
        var city = document.getElementById("city")
        var bj = document.getElementById("bj")
        /*
         * replaceChild()
         *  - 可以使用指定的子節點替換已有的子節點
         *  - 語法：父節點.replaceChild(新節點,舊節點);
         */
        city.replaceChild(newLi,bj)
    })
    myClick("btn04",function(){
        var city = document.getElementById("city")
        var bj = document.getElementById("bj")
        var sh = document.getElementById("sh")
        /*
         * removeChild()
         *  - 可以刪除一個子節點
         *  - 語法：父節點.removeChild(子節點);
         *      子節點.parentNode.removeChild(子節點);
         */
        city.removeChild(bj)
        sh.parentNode.removeChild(sh)
    })
    myClick("btn05",function(){
        var city = document.getElementById("city")
        alert(city.innerHTML)
    })
    myClick("btn06",function(){
        var bj = document.getElementById("bj")
        bj.innerHTML = "合肥"
    })
    myClick("btn07",function(){
        var city = document.getElementById("city")
        // 使用innerHTML也可以完成DOM的增刪改的相關操作,一般我們會兩種方式結合使用
        //01
        city.innerHTML += "<li>廣州</li>"
        //02
        var li =document.createElement("li")
        li.innerHTML = "合肥"
        city.appendChild(li)
    })
    
    function myClick(btn,fun){
        var btn = document.getElementById(btn)
        btn.onclick = fun
    }
</script>

<pre>
103. 添加刪除記錄-刪除
</pre>
<pre>
104. 添加刪除記錄-添加
</pre>
<pre>
105. 添加刪除記錄-修改
</pre>
<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>[email protected]</td>
        <td>5000</td>
        <td><a href="javascript:;">Delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>[email protected]</td>
        <td>8000</td>
        <td><a href="javascript:;">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>[email protected]</td>
        <td>10000</td>
        <td><a href="javascript:;">Delete</a></td>
    </tr>
</table>
<div id="formDiv">
    <h4>添加新員工</h4>
    <table>
        <tr>
            <td class="word">name: </td>
            <td class="inp">
                <input type="text" name="empName" id="empName" />
            </td>
        </tr>
        <tr>
            <td class="word">email: </td>
            <td class="inp">
                <input type="text" name="email" id="email" />
            </td>
        </tr>
        <tr>
            <td class="word">salary: </td>
            <td class="inp">
                <input type="text" name="salary" id="salary" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton1" value="abc">Submit1</button>
                <button id="addEmpButton2" value="abc">Submit2</button>
            </td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    console.log("--第103,104,105--");
    function deleteA(){
        console.log(this)
        var tr = this.parentNode.parentNode;
        var name = tr.children[0].innerHTML
        var flag = confirm("你確定刪除"+ name +"嗎？")
        if(flag){
            tr.parentNode.removeChild(tr)
        }
    }
    // 刪除
    function deleteFun(){
        var allA = document.querySelectorAll("td a")
        for(var i=0,l=allA.length; i<l; i++) {
            allA[i].onclick = deleteA
        }
    }
    deleteFun()
    // 添加
    function addFun(){
        var employeeTable = document.getElementById("employeeTable")
        var addEmpButton1 = document.getElementById("addEmpButton1")
        var addEmpButton2 = document.getElementById("addEmpButton2")
        addEmpButton1.onclick = function(){
            var empName = document.getElementById("empName").value
            var email = document.getElementById("email").value
            var salary = document.getElementById("salary").value
            var tr = document.createElement("tr")
            var tdName = document.createElement("td")
            var tdEmail = document.createElement("td")
            var tdSalary = document.createElement("td")
            var tdA = document.createElement("td")
            var a = document.createElement("a