| 一、前言 |
DOM 是 W3C（World Wide Web Consortium）標准。同時也 定義了訪問諸如 XML 和 HTML 文檔的標准：
DOM是一個使程序和腳本有能力動態地訪問和更新文檔的內容、結構以及樣式的平台和語言中立的接口。
在HTML和JavaScript的學習中，DOM操作可謂時重中之重。今天，小編就領着大家來看看DOM操作是個什么樣子！！
| 二、DOM節點 |
DOM節點分為三大類：元素節點、屬性節點、文本節點；
而我們心心念念想知道的DOM樹就長醬紫！
由DOM樹我們可以看到，文本節點、屬性節點屬於元素節點的子節點。
文本節點和屬性節點就像是這顆DOM樹的果子，而元素節點就是樹枝，所以，在操作時，一定要要記順枝摘果：得先取到元素節點！然后再操作子節點！！
要先取到元素節點！要先取到元素節點！要先取到元素節點！重要的事情說三遍！
到這你就該好奇了，那該怎么順着樹枝摘果子呢，別急，小編給你帶來了方法!
2.1先找樹枝——獲取元素節點
首先，可以用使用getElement系列方法，取到元素節點。
下面列出一些常用的 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找到樹枝摘果子——查看設置屬性節點
接下來，小編就要介紹一下怎么摘果子了！激不激動！
首先，還記得小編提醒了三遍的事情嗎？
查看和設置屬性節點，必須先取到元素節點，才能使用；
1、查看屬性節點：getAttribute("屬性名")；
2、設置屬性節點：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節點的樣式】
1、使用setAttribute()設置class和style屬性，但是存在兼容性問題，不提倡；
div.setAttribute("class","cls1");
2、使用.className直接設置class類，注意是className而不是.class:
div.className = "cls1";
3、使用.style設置單個屬性，注意屬性名要用駝峰命名法：
div.style.backgroundColor = "red";
4、使用.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>";
| 二、 根據層次查看節點 |
上面小編帶大家了解了如何查看元素節點，下面帶大家了解如何根據層次查看節點
3.1根據層次查看節點
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)
}
結果：
2、.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)
}
結果：
3、.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)
}
結果：
4、.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);
}
結果
5、.nextSibling：獲取當前節點的后一個兄弟節點；包括回車等文本節點。
.nextElementSibling：獲取當前節點的后一個兄弟元素節點；不包括回車等文本節點。
6、.getAttribute:獲得當前屬性的元素節點；
5和6小編就不過多的敘述了，用法和上面的一樣，大家可以試一試
3.2修改節點
創建並新增節點
1、document.creatElement("標簽名"):創建節點。需要配合setAttribute設置各種新的屬性；
2、父節點.appendChild(新節點)：末尾追加方式插入節點
3、父節點.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>
結果：
4、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>
結果：
| 四、表格元素 |
最后，小編帶大家看一下表格元素的查看增添與修改
【表格對象】
1、rows屬性：返回表格中的所有行，是一個數組格式；
2、insertRow(index):在指定位置插入一行，index從0開始；
3、deleteRow(index):刪除指定的一行，index從0開始；
【行對象】
1、cells屬性：返回這一行中的所有單元格，是一個數組格式；
2、rowIndex屬性：返回這一行，是表格中的第幾行，從0開始；
3、insertCell(index):在這一行的指定位置，插入一個單元格，index從領開始；
4、deleteCell(index):刪除這一行的指定單元格，index從0開始
【單元格對象】
1、cellIndex屬性：返回這個單元格是這一行的第幾個單元格
2、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>
結果：
編者按
小是個新手，明白前端的學習沒有捷徑，這次小編就先講到這，謝謝大家！！