JSDOM11

11.1 DOM概念

DOM（Document Object Model）：文檔對象模型。

整個文檔是由一系列節點對象組成的一棵樹。
節點（Node）包括元素節點（1）、屬性節點（2）和文本節點（3）。

<body>
<table>
    <caption>H5-17-03花名冊</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th id="th1" name="sex">性別</th>
            <th>電話</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>史亞東</td>
        <td>男</td>
        <td>1341879</td>
    </tr>
    <tr>
        <td>潘俊傑</td>
        <td>男</td>
        <td>12345678</td>
    </tr>
    </tbody>
</table>
</body>
<script>
    var th1 = document.getElementById("th1");
    alert(th1.nodeType);
    alert(th1.nodeName);
    alert(th1.nodeValue);
</script>

th1代表一個元素節點（nodeType =1），nodeName就是標籤名（th，元素節點的nodeValue=null）

<body>
<table>
    <caption>H5-17-03花名冊</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th id="th1" name="sex">性別</th>
            <th>電話</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>史亞東</td>
        <td>男</td>
        <td>112345459</td>
    </tr>
    <tr>
        <td>潘俊傑</td>
        <td>男</td>
        <td>12345678</td>
    </tr>
    </tbody>
</table>
</body>
<script>
    var th1 = document.getElementById("th1");
    var attr1 = th1.getAttributeNode("name");
    alert(attr1.nodeType);
    alert(attr1.nodeName);
    alert(attr1.nodeValue);
</script>

getAttributeNode方法是獲取元素的屬性節點，此時輸出的節點類型爲屬性節點（2），節點名稱就是屬性名（name），節點值就是屬性值（sex）。

<body>
<table>
    <caption>H5-17-03花名冊</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th id="th1" name="sex">性別</th>
            <th>電話</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>史亞東</td>
        <td>男</td>
        <td>124712329</td>
    </tr>
    <tr>
        <td>潘俊傑</td>
        <td>男</td>
        <td>12345678</td>
    </tr>
    </tbody>
</table>
</body>
<script>
    var th1 = document.getElementById("th1");    var txt1 = th1.firstChild;
    alert(txt1.nodeType);
    alert(txt1.nodeName);
    alert(txt1.nodeValue);
</script>

Txt1是一個文本節點（3），節點名稱固定就是#text，節點值就是文本內容。

11.2 獲取元素

（1）getElementById
根據元素的id屬性來獲取元素，獲取到的是一個元素。
（2）getElementsByTagName
根據標籤名獲取元素，結果是一個元素集合。
（3）getElementsByClassName
根據class屬性來獲取元素，結果是一個元素集合。
（4）getElementsByName
根據name屬性來獲取元素，結果是一個元素集合。
總結：
獲取元素可以根據標籤名獲取、也可以根據id、name、class屬性來獲取。根據id實屬性獲取的結果是一個元素，而其他的獲取是一個集合。
Document對象支持以上四種，而element對象僅支持getElementsByTagName和getElementsByClassName。

11.3 修改元素

（1）修改內容

<body>
<p id="p1" onclick="fun()">單擊事件測試</p>
</body>
<script>
    function fun(){
        //獲取到指定元素
        var p1 = document.getElementById("p1");
        p1.innerText = "我被單擊了";
    }
</script>

通過innerText屬性可讀取或設置標籤的內部文本。

<body>
<p id="p1" onclick="fun()">單擊事件測試</p>
</body>
<script>
    function fun(){
        //獲取到指定元素
        var p1 = document.getElementById("p1");
//        p1.innerText = "我被單擊了!<br>換行了";//我被單擊了!<br>換行了
        p1.innerHTML = "我被單擊了！<br>換行了";
    }
</script>

也可以通過innerHTML屬性獲取或設置內部文本。
兩種的區別：innerHTML會按照html規則解析文本，而innerText只是當做普通文本內容。
（2）修改樣式
A．XXX．style.yyy
B．XXX．classname = “……”（相當於修改了class屬性）

<style>
    .style1{
        color: red;
        font-size: 20px;
        text-decoration: underline;
    }
    .style2{
        color: blue;
        font-size: 32px;
        text-decoration: line-through ;
    }
</style>
<body>
    <p id="p1">修改樣式測試</p>
    <input type="button" value="樣式一" onclick="style1()"/>
    <input type="button" value="樣式二" onclick="style2()"/>
</body>
<script>
    var p1 = document.getElementById("p1");
    function style1(){
        p1.className = "style1";
    }
    function style2(){
        p1.className = "style2";
    }
</script>

11.4添加刪除元素

（1）createElement創建一個元素
createElement(“p”)創建一個段落
（2）createTextNode創建一個文本節點
createTextNode(“文本內容”)，創建一個值爲“文本內容”的文本節點。
（3）appendChild 添加子節點
動態的添加

<body>
    <div id="div1">

    </div>
    <input type="button" value="添加段落" onclick="add()">
</body>
<script>
    var index = 1;
    function add(){
        //創建一個段落標籤
        var p = document.createElement("p");
        //創建文本節點
        var content = "第" + index + "段落";
        var txt = document.createTextNode(content);
        //將文本節點添加到段落
        p.appendChild(txt);
        //將段落添加到div中
        var div1 = document.getElementById("div1");
        div1.appendChild(p);
        index++;
    }
</script>

動態的刪除

<body>
<div id="div1">
    <p id="p1">第一段</p>
    <p id="p2">第二段</p>
    <p id="p3">第三段</p>
    <p id="p4">第四段</p>
</div>
<input type="button" value="刪除第二段" onclick="de1()">
</body>
<script>
    function de1(){
        //找到父節點
       var div1 = document.getElementById("div1");
        //再找到要刪除的節點
        var p2 = document.getElementById("p2");
        //將要刪除的節點從父節點中移除
        div1.removeChild(p2);
    }
</script>

這種方法是分別找到父節點和要刪除的節點，然後執行刪除操作。該方法的一個前提是知道父節點是誰。
那麼如果不知道父節點是誰呢，該如何刪除呢？

<body>
<div id="div1">
    <p id="p1">第一段</p>
    <p id="p2">第二段</p>
    <p id="p3">第三段</p>
    <p id="p4">第四段</p>
</div>
<input type="button" value="刪除第二段" onclick="de1()">
</body>
<script>
function de1(){
    //找到要刪除的節點
    var p2 = document.getElementById("p2");
    p2.parentNode.removeChild(p2);
}
</script>

在不知道父節點的情況下刪除節點
動態添加和動態刪除：刪除動態添加的奇數段落。
思路1：獲取div1下的所有段落，遍歷所有段落，將序號爲奇數的段落刪除。
這種在初始時是可以的。

<body>
<div id="div1">

</div>
<input type="button" value="添加段落" onclick="add()">
<input type="button" value="刪除奇數第二段" onclick="de1()">
</body>
<script>
    var index = 1;
    function add(){
        //創建一個段落標籤
        var p = document.createElement("p");
        //創建文本節點
        var content = "第" + index + "段落";
        var txt = document.createTextNode(content);
        //將文本節點添加到段落
        p.appendChild(txt);
        //將段落添加到div中
        var div1 = document.getElementById("div1");
        div1.appendChild(p);
        index++;
    }
    function de1(){
        var div1 = document.getElementById("div1");
        var paras = div1.getElementsByTagName("p");
        for(var i in paras){
            if((i+1)%2 == 1){
                div1.removeChild(paras[i]);
            }
        }
    }
</script>

這種在初始時是可以的，但是隨着動態添加和刪除的進行，後面的結果就不是我們想要的了。因爲動態刪除操作會影響到原來的順序，而程序是按照序號去判斷奇偶性，所以出現誤判。
思路2：添加時通過設置class屬性，然後通過getElementsByName或者getElementsByClassName來獲取奇數行。

<body>
<div id="div1">
</div>
<input type="button" value="添加段落" onclick="add()">
<input type="button" value="刪除奇數第二段" onclick="de1()">
</body>
<script>
    var index = 1;
    function add() {
        //創建一個段落標籤
        var p = document.createElement("p");
        //創建文本節點
        var content = "第" + index + "段落";
        var txt = document.createTextNode(content);
        //將文本節點添加到段落
        p.appendChild(txt);
        if (index % 2 == 1) {
            p.setAttribute("class", "odd");
        }
        //將段落添加到div中
        var div1 = document.getElementById("div1");
        div1.appendChild(p);
        index++;
    }
    function de1() {
        var div1 = document.getElementById("div1");

        var paras = div1.getElementsByClassName("odd");
//        var paras = document.getElementsByName("odd");
        for (var i = paras.length - 1; i >= 0; i--) {
            div1.removeChild(paras[i]);
        }
    }
</script>

11.5導航

Document是根節點
parentNode：獲取父節點（fun1）
childNodes：獲取所有的子節點（fun2）
firstChild：開頭的第一個子節點（fun3）
lastChild：獲取最後一個子節點（fun4）

<body>
    <div name="第一章">
        <p id="p1">第一段<span>第一句</span><span>第二句</span></p>
    </div>
    <input type="button" value="獲取p1父節點的name屬性" onclick="fun1()">
    <input type="button" value="顯示p1子節點的個數" onclick="fun2()">
    <input type="button" value="顯示p1第一個子節點的節點類型" onclick="fun3()">
    <input type="button" value="顯示p1最後一個子節點的節點類型" onclick="fun4()">
</body>
<script>
    var p1 = document.getElementById("p1");
    function fun1(){
       var value = p1.parentNode.getAttribute("name");
        alert(value);
    }
    function fun2(){
        var childs = p1.childNodes;
        alert(childs.length);
    }
    function fun3(){
        alert(p1.firstChild.nodeType);
    }
    function fun4(){
        alert(p1.lastChild.nodeType);
    }
</script>

11.1 DOM概念

11.2 獲取元素

11.3 修改元素

11.4添加刪除元素

11.5導航

JS函數6

JS循環結構5

JS程序設計基礎2

CSS基礎知識1

CSS選擇器3

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結