js中的DOM操做

時間 2019-11-17

標籤 dom 欄目 JavaScript 简体版

原文原文鏈接

1、前言

DOM 是 W3C（World Wide Web Consortium）標準。同時也定義了訪問諸如 XML 和 HTML 文檔的標準：javascript

DOM是一個使程序和腳本有能力動態地訪問和更新文檔的內容、結構以及樣式的平臺和語言中立的接口。css

在HTML和JavaScript的學習中，DOM操做可謂時重中之重。今天，小編就領着你們來看看DOM操做是個什麼樣子！！html

2、DOM節點

DOM節點分爲三大類：元素節點、屬性節點、文本節點；前端

而咱們心心念念想知道的DOM樹就長醬紫！java

由DOM樹咱們能夠看到，文本節點、屬性節點屬於元素節點的子節點。數組

　文本節點和屬性節點就像是這顆DOM樹的果子，而元素節點就是樹枝，因此，在操做時，必定要要記順枝摘果：得先取到元素節點！而後再操做子節點！！瀏覽器

要先取到元素節點！要先取到元素節點！要先取到元素節點！重要的事情說三遍！app

　到這你就該好奇了，那該怎麼順着樹枝摘果子呢，別急，小編給你帶來了方法!dom

2.1先找樹枝——獲取元素節點

首先，能夠用使用getElement系列方法，取到元素節點。ide

　下面列出一些經常使用的 DOM 對象方法:

在這裏，小編該介紹怎麼找樹枝了！

　小編先示範一遍，注意看了！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div{
                width: 100px;
                height: 100px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var btn1 = document.getElementById("btn1");
                console.log(btn1);
                var is = 0;
                btn1.onclick =function  (){
                    
                    is++;
                    if(is%2!=0){
                        var div = document.getElementsByClassName("div");
                        div[0].style = "background-color:red;color:yellow;"
//                        div[0].innerText = "hehe";
                        div[0].innerHTML = "<h2>hehe</h2>";


                    }else {
                        var div = document.getElementsByClassName("div");
                        div[0].style = "background-color:blue;color:white;"
                        div[0].innerHTML = "<h2>hahaha</h2>";
                    }
                    
                }
                
            }
    
        </script>
    </head>
    <body>    
        <button id = "btn1" class = "btn" onclick="but()">這是一個按鈕1</button>
        <div class="div">hahaha</div>
        
    </body>
</html>

下面，小編開始一步步教學了！

getElementById:經過id取到惟一節點。若是id重名，只能取到第一個。

var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn1");

console.log(btn1);
console.log(btn2);

小編在上面的代碼中新建了一個按鈕，ID一樣爲「btn1」；分別經過getElementById取得了兩個的元素節點，並在控制檯打印；獲得的結果：

getElementsByName() ：經過name屬性
getElementsByTagName() ：經過標籤名；
getElementsByClassName() ：經過class名；
上面的經過name屬性、標籤名和class名小編就很少說了，直接看一下怎麼使用吧：

var btn1 = document.getElementById("btn1");
var className = document.getElementsByClassName("btn");
var tagName = document.getElementsByTagName("button");
var name = document.getElementsByName("btn");
console.log(btn)
console.log(className)
console.log(tagName);
console.log(name);

　　
   小編提示：
   >>>獲取元素節點時，必定要注意：獲取節點的語句，必須在DOM渲染完成後執行。
能夠有兩種方式實現：①將JS代碼寫在body以後；②將代碼寫到window.onload函數之中；
   >>>後面三個getElements，取到的是數組格式。不能直接添加各類屬性，而應該取出數組的每個單獨操做。
例如：

getElementsByName("name1")[0].onclick = function;

2.2找到樹枝摘果子——查看設置屬性節點

接下來，小編就要介紹一下怎麼摘果子了！激不激動！

首先，還記得小編提醒了三遍的事情嗎？

查看和設置屬性節點，必須先取到元素節點，才能使用；

一、查看屬性節點：getAttribute("屬性名")；
二、設置屬性節點：setAttribute("屬性名","新屬性值");

var btn1 = document.getElementById("btn1");            
var classes = btn1.getAttribute("class「）；
 btn1.setAttribute("class","btn1");
console.log(classes);

小編提示：
   >>>setAttribute();函數在IE瀏覽器中可能會存在兼容性問題。好比在IE 中不支持試用這個函數設置style/onclick
   等樣式屬性和事件屬性。

   >>>咱們推薦使用符號法替代上述函數：
eg:dom1.style.color="" dom1.onclick="" dom1.src=""

   【總結-js修改DOM節點的樣式】
   一、使用setAttribute()設置class和style屬性，可是存在兼容性問題，不提倡；

 div.setAttribute("class","cls1");

二、使用.className直接設置class類，注意是className而不是.class:

  div.className = "cls1";

   三、使用.style設置單個屬性，注意屬性名要用駝峯命名法：
   div.style.backgroundColor = "red";
   四、使用.style或.style.cssText設置多個樣式屬性：
div.style = "background-color:red;color:yellow;"
div.style = "background - color:red;color:yellow" √
   3和4小編就不詳細介紹了，你們能夠襲擊去試試！

2.3查看設置文本節點

1、.innerText:取到或設置節點裏面的文字內容;
.innerHTML:取到或設置節點裏面的HTML代碼；
.tagName:取到當前結點的標籤名。標籤名所有大寫

var div = document.getElementsByClassName("div");
div[0].style = "background-color:red;color:yellow;"
//    div[0].innerText = "hehe";
div[0].innerHTML = "<h2>hehe</h2>";

2、根據層次查看節點

上面小編帶你們瞭解瞭如何查看元素節點，下面帶你們瞭解如何根據層次查看節點

3.1根據層次查看節點

一、.childNodes:獲取元素的全部子節點。包括回車和文本節點。
.children: 獲取當前元素的全部元素節點（只獲取標籤）。

舉個例子：

HTML代碼：

<ul id="ul">
            
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
            
</ul>

JS代碼

window.onload = function  () {
        ul = document.getElementById("ul");
        var li = ul.childNodes;
        var lis = ul.children;
        console.log(li);
        console.log(lis)
    }

結果：

二、.firstChild:獲取元素的第一個子節點。包括回車等文本節點。
.firstElementChild：獲取元素的第一個元素子節點。不包括回車等文本節點。

舉個例子：

HTML：請看上面的HTML代碼↑

JS：

window.onload = function  () {
        ul = document.getElementById("ul");
        var li = ul.firstChild;
        var lis = ul.firstElementChild;
        console.log(li);
        console.log(lis)
    }

結果：

.lastchild:獲取元素的最後一個子節點。包括回車等文本節點。
.lastElementChild：獲取元素的最後一個子節點。不包括回車等文本節點。

同上慄：

JS：

window.onload = function  () {
        ul = document.getElementById("ul");
        var li = ul.lastChild;
        var lis = ul.lastElementChild;
        console.log(li);
        console.log(lis)
    }

結果：

三、.parentNode:獲取當前節點的父節點；

再舉個栗子：

HTML：

<div id="div">
    <ul id="ul">
            
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
            
    </ul>
</div>

js:

window.onload = function  () {
        ul = document.getElementById("ul");
        var p = ul.parentNode;
        console.log(p)
    }

結果：

四、.previousSibling：獲取當前節點的前一個兄弟節點；包括回車等文本節點。
.previousElementSibling：獲取當前節點的前一個兄弟元素節點；不包括回車等文本節點。

HTML：

<div id="div">
    <ul id="ul2"></ul>
    <ul id="ul">
            
            <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
            
    </ul>
</div>

js:

window.onload = function  () {
             ul = document.getElementById("ul");
            var p = ul.previousSibling;
            var ps = ul.previousElementSibling;

            console.log(p);
            console.log(ps);
        }

結果

五、.nextSibling：獲取當前節點的後一個兄弟節點；包括回車等文本節點。
.nextElementSibling：獲取當前節點的後一個兄弟元素節點；不包括回車等文本節點。
六、.getAttribute:得到當前屬性的元素節點；
5和6小編就不過多的敘述了，用法和上面的同樣，你們能夠試一試

3.2修改節點

建立並新增節點
一、document.creatElement("標籤名"):建立節點。須要配合setAttribute設置各類新的屬性；

　二、父節點.appendChild(新節點)：末尾追加方式插入節點
三、父節點.insertBefore(新節點，目標節點)：在目標節點前插入新節點。

舉例：

<body>
<button onclick="addImg()">點擊添加圖片</button>
</body>
<script type="text/javascript">
        function addImg () {
                
                
                var img = document.createElement("img");
                img.setAttribute("src","../../img/557833.jpg");
    //            document.body.appendChild(img);
                img.style.height = "100px";
                img.style.width = "100px";
                
                var ul = document.getElementById("ul");
                document.body.insertBefore(img,ul);
            }
</script>

結果：

四、cloneNode(true/false):克隆節點
>>>傳入true：表示克隆當前節點，以及當前節點的子節點；
>>>傳入false：表示只克隆當前節點，不克隆當前節點的子節點；

再舉個例子：

<body>
        <button onclick="cloneUl()">點擊複製圖片</button><br />
</body>
<script type="text/javascript">
       function cloneUl () {
                var ul = document.getElementById("img");
                var ulClone = ul.cloneNode(true);
                document.body.insertBefore(ulClone,ul);
    //            document.body.appendChild(ulClone);
            }</script>

結果：

4、表格元素

最後，小編帶你們看一下表格元素的查看增添與修改

【表格對象】

一、rows屬性：返回表格中的全部行，是一個數組格式；
二、insertRow(index):在指定位置插入一行，index從0開始；
三、deleteRow(index):刪除指定的一行，index從0開始；
【行對象】
一、cells屬性：返回這一行中的全部單元格，是一個數組格式；
二、rowIndex屬性：返回這一行，是表格中的第幾行，從0開始；
三、insertCell(index):在這一行的指定位置，插入一個單元格，index從領開始；
四、deleteCell(index):刪除這一行的指定單元格，index從0開始
【單元格對象】
一、cellIndex屬性：返回這個單元格是這一行的第幾個單元格
二、innerText inner HTML

舉例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            table{
                width: 400px;
                border-collapse: collapse;
            }
            td,th{
                border: solid 1px black;
            }
            tr:last-of-type{
                color: red;
            }
            tr:frst-of-type{
                background-color: #565656;
            }
        </style>
    </head>
    <body>
        
        <table id="table">
            <tr>
                <th>書名</th>
                <th>價格</th>
            </tr>
            <tr>
                <td>幸福從天而降</td>
                <td>18.5</td>
            </tr>
            <tr>
                <td>活在當下</td>
                <td>45.5元</td>
            </tr>
            <tr>
                <td>人性的弱點</td>
                <td>65.5元</td>
            </tr>
            <tr>
                <td>60個瞬間</td>
                <td>88.0元</td>
            </tr>
            <tr>
                <td>合計</td>
                <td>100元</td>
            </tr>
        </table>
        <br />
        <button onclick="addRow()">增長一行</button>
        <button onclick="delRow()">刪除最後一行</button>
        <button onclick="copyRow()">複製最後一行</button>
        <button onclick="changeStyle()">修改標題樣式</button>
        <button onclick="getSum">求和</button>
    
        <script type="text/javascript">

            
            var table = document.getElementById("table");
            
            function addRow () {
                var index = table.rows.length-1;
                var newRow = table.insertRow(index);
                
                var name = prompt("請輸入書名");
                var cell0 = newRow.insertCell(0);
                cell0.innerText = name;
                
                var money = parseFloat(prompt("價格"));
                var cell1 = newRow.insertCell(1);
                cell1.innerText = money.toFixed(1)+"元";
            }
            
            function delRow () {
                if (table.rows.length>2) {
                    table.deleteRow(table.rows.length-2);
                } else{
                    alert("沒有了");
                }
            }
            
            function copyRow () {


                var cloneRow = table.rows[table.rows.length-2];
                
                if (table.rows.length>2) {
                    var newRow = table.insertRow(table.rows.length-1);
                    var cell0 = newRow.insertCell(0);
                    cell0.innerText = cloneRow.cells[0].innerText;
                    
                    var cell1 = newRow.insertCell(1);
                    cell1.innerText = cloneRow.cells[1].innerText;
                    
                } else{
                    alert("沒有可複製的行了！！");
                }
            }
            
            
            function changeStyle () {
                var color = prompt("請輸入十六進制顏色值");
                table.rows[0].style = "background-color:"+color;

                
            }
            
            
            function getSum () {
                var rows = table.rows;
                if (rows.length<=2) {
                    alert("沒有能夠計算的和");
                    rows[rows.length-1].cells[1].innerText = "0元";
                    return;
                } else{
                    var sum = 0;
                    for (var i = 1; i<rows.length-1; i++) {
                        var cells = rows[i].cells;
                        sum += parseFloat(cells[cells.length-1].innerText);
                    }
                    
                    rows[rows.length-1].cells[1].innerText = sum + "元";
                }
            }
            
            window.onload = function  () {
                getSum();
            }
        </script>
    </body>
</html>