開篇寄語：
要緊盯住自己的人生目标，不要被周圍毫無意義的人或者事所牽絆，尤其不要生閑氣。
看淡一點，不要太在乎别人的那張臉；簡單一點，不要用他人的尺子，量自己的長短。心态好，一切安好。
昨天給大家提到過，那現在就一起來看看DOM。
二、JavaScript操作DOM對象
1、什麼是DOM
DOM：Document Object Model 文檔對象模型
要實作頁面的動态互動效果，BOM操作遠遠不夠，需要操作 html 才是核心。如何操作 html，就是 DOM。
簡單的說，DOM提供了用程式動态控制 html 接口。DOM即文檔對象模型描繪了一個階層化的節點樹，運作開發人員添加、移除和修改頁面的某一部分。DOM處于javascript 的核心地位上。
每個載入浏覽器的 HTML 文檔都會成為 Document 對象。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行通路。Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行通路。
2、節點
加載 HTML 頁面時，Web 浏覽器生成一個樹型結構，用來表示頁面内部結構。DOM 将這種樹型結構了解為由節點組成，組成一個節點樹。對于頁面中的元素，可以解析成以下幾種類型的節點：
| 節點類型 | HTML内容 | 例如 |
|---|---|---|
| 文檔節點 | 文檔本身 | 整個文檔 |
| 元素節點 | 所有的HTML元素 | 、 |
| 屬性節點 | HTML元素内的屬性 | |
| 文本節點 | 元素内的文本 | |
| 注釋節點 | HTML中的注釋 |
<html><head><meta charset="utf-8" /><title>樹！樹！到處都是樹！title>head><body><h1>百度h1><a href="http://www.baidu.com" target="_blank" rel="external nofollow" >百度a>body>html>
3、元素節點的操作
當HTML文檔在被解析為一顆DOM樹以後，裡面的每一個節點都可以看做是一個一個的對象，我們成為DOM對象，對于這些對象，我們可以進行各式各樣的操作，查找到某一個或者一類節點對象，可以建立某種節點對象，可以在某個位置添加節點對象，甚至可以動态地删除節點對象，這些操作可以使我們的頁面看起來有動态的效果，後期結合事件使用，就能讓我們的頁面在特定時機、特定的事件下執行特定的變換。
擷取節點
在進行增、删、改的操作時，都需要指定到一個位置，或者找到一個目标，此時我們就可以通過Document對象提供的方法，查找、定位某個對象(也就是我們說的節點)。
注意：操作 dom 必須等節點初始化完畢後，才能執行。處理方式兩種:
a. 把 script 調用标簽移到html末尾即可；
b. 使用onload事件來處理JS，等待html 加載完畢再加載 onload 事件裡的 JS。
window.onload = function() { // 當頁面加載完後調用函數};<html><head><meta charset="UTF-8"><title>title><script type="text/javascript">window.onload = function() {var dv = document.getElementById("dv");dv.innerHTML = "我是一個div";}script>head><body><div id="dv">div>body>html>
擷取方式如下：
<html><head><meta charset="UTF-8"><title>操作DOM對象-擷取節點title>head><body><p id="p1" class="ptext">這是一個段落<span>文本span>p><p id="p2" class="ptext">這又是一個段落p><input type="checkbox" name="hobby" value="遊泳" />遊泳<input type="checkbox" name="hobby" value="籃球" />籃球<input type="checkbox" name="hobby" value="足球" />足球<input type="text" value="我是一個輸入框" /><a href="javascript:void(0);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick="testById();">根據id擷取元素a><a href="javascript:void(0);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick="testByName();">根據name擷取元素a><a href="javascript:void(0);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick="testByTagName();">根标簽名稱擷取元素a><a href="javascript:void(0);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick="testByClass();">根據class擷取元素a><script type="text/javascript">// 根據id擷取元素function testById() {// 傳回單個對象var p = document.getElementById("p1");console.log(p);console.log(p.innerHTML);// 表示擷取元素開始标簽和結束标簽之間的html結構console.log(p.innerText);// 表示擷取标簽之間的普通文本}// 根據name擷取元素function testByName() {// 傳回對象數組var hobby = document.getElementsByName("hobby");console.log(hobby);// 循環周遊每一個元素for (var i = 0; i < hobby.length; i++) {console.log(hobby[i].value);}}// 根據标簽名稱擷取元素function testByTagName() {// 傳回對象數組var inputArr = document.getElementsByTagName("input");console.log(inputArr);// 循環周遊每一個元素for (var i = 0; i < inputArr.length; i++) {// 判斷是否是text類型if ("text" == inputArr[i].type) {console.log(inputArr[i].value);// 判斷是否是checkbox類型} else if ("checkbox" == inputArr[i].type) {// 判斷是否選中if (inputArr[i].checked) {console.log(inputArr[i].value);}}}}// 根據class擷取元素function testByClass() {// 傳回對象數組var ptext = document.getElementsByClassName("ptext");console.log(ptext);console.log(ptext[0].innerHTML);console.log(ptext[0].innerText);ptext[0].innerHTML += "，這是一段新的文本";}script>body>html>
說明：
href="javascript:void(0)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ;
僞協定，表示不執行跳轉，而執行指定的點選事件。
建立節點和插入節點
很多時候我們想要在某個位置插入一個新的節點，此時我們首先需要有一個節點存在，可以通過以下幾種方式建立新節點。
建立節點
插入節點
添加段落
<html><head><meta charset="utf-8" /><title>添加段落title>head><body><button onclick="addP();">添加段落button><div id="container">div><script type="text/javascript">function addP() {// 第一種方式// 根據id擷取元素divvar container = document.getElementById('container');// 建立p元素var p = document.createElement('p');// 建立文本節點var txt = document.createTextNode('以後的你會感謝現在努力的你');// p元素添加文本節點p.appendChild(txt);// div元素添加p元素container.appendChild(p);// 第二種方式// 向p節點中添加内容p.innerHTML = "以後的你會感謝現在努力的你2";// 将p節點追加到container節點中container.appendChild(p);// 第三種方式// 将字元串類型的p标簽内容添加到container中var str = "
以後的你會感謝現在努力的你3
";container.innerHTML = str;}script>body>html>
添加圖檔
<html><head><meta charset="utf-8" /><title>添加圖檔title>head><body><button onclick="addImg();">添加圖檔button><div id="container">div><script type="text/javascript">// 添加圖檔function addImg() {// 建立img元素var img = document.createElement("img");// 設定屬性第一種方式// 設定img元素的src屬性img.src = "http://www.baidu.com/img/bd_logo1.png";img.style.width = '500px';img.style.height = '260px';// 設定屬性第二種方式// setAttribute() 方法添加指定的屬性，并為其賦指定的值。// 設定img元素的src屬性img.setAttribute('src', 'http://www.baidu.com/img/bd_logo1.png');img.setAttribute("style", "width: 500px;height: 260px;");// 擷取div元素var container = document.getElementById("container");// 将img元素節點追加到div元素中container.appendChild(img); // 第三種方式// 将字元串類型的p标簽内容添加到container中container.innerHTML = "";}script>body>html>
添加文本框
<html><head><meta charset="utf-8" /><title>添加文本框title>head><body><button onclick="addTxt();">添加文本框button><div id="container">div><script type="text/javascript">// 添加文本框function addTxt() {// 建立input元素var txt = document.createElement("input");// 設定類型第一種方式txt.type = "text";txt.value = "添加成功";//txt.type = 'password'//txt.value = '123'// 設定類型第二種方式txt.setAttribute('type', 'text');txt.setAttribute('value', '添加成功');// 擷取div元素var container = document.getElementById("container");// 将input節點追加到div元素中container.appendChild(txt); // 第三種方式// 将字元串類型的p标簽内容添加到container中container.innerHTML = "";}script>body>html>
添加選項框
<html><head><meta charset="utf-8" /><title>添加選項框title>head><body><button onclick="addOptions()">添加選項button><select name="music"><option value="0">---請選擇---option><option value="1">南山南option><option value="2">喜歡你option>select><script type="text/javascript">// 添加下拉框的選項function addOptions() {// 第一種方式// 建立下拉項var option = document.createElement("option");option.value = "3";option.text = "需要人陪";// 擷取下拉框var sel = document.getElementsByTagName("select")[0];// 添加下拉項 sel.appendChild(option);// 第二種方式var option = document.createElement("option");option.value = "4";option.text = "光年之外";// 擷取下拉框var sel = document.getElementsByTagName("select")[0];// 添加下拉項sel.options.add(option);// 第三種方式// 擷取下拉框var sel = document.getElementsByTagName("select")[0];// 添加下拉選項sel.innerHTML += "風的季節";}script>body>html>
間接查找節點
<html><head><meta charset="utf-8" /><title>間接查找節點title>head><body><button type="button" id="btn">測試按鈕button><div id="dv">開始<form><table><input /><input /><input id="inp" /><span>span>table>form>結束div><script type="text/javascript">var dv = document.getElementById('dv');// childNodes傳回元素的一個子節點的數組function get_childNodes() {console.log(dv.childNodes[1]); // 擷取到form}// firstChild傳回元素的第一個子節點function get_firstChild() {console.log(dv.firstChild);}// lastChild傳回元素的最後一個子節點function get_lastChild() {console.log(dv.lastChild);}// previousSibling傳回元素的上一個兄弟節點function get_previousSibling() {var inp = document.getElementById('inp');console.log(inp.previousSibling);} // nextSibling傳回元素的下一個兄弟節點function get_nextSibling() {var inp = document.getElementById('inp');console.log(inp.nextSibling);} // parentNode傳回元素的父節點function get_parentNode() {var inp = document.getElementById('inp');console.log(inp.parentNode);}var btn = document.getElementById('btn');btn.onclick = get_childNodes; // DOM方式處理 解耦script>body>html>
删除節點
| 方法|屬性 | 描述 |
|---|---|
| removeChild() | 從元素中移除子節點 |
第一種：擷取父節點，然後删除子節點
父節點.removeChild(childNode);
第二種：通過舊節點定位到父節點，然後删除子節點
childNode.parentNode.removeChild(childNode);
<html><head><meta charset="utf-8" /><title>删除節點title>head><body><div id="dv"><span id="cxy">程式猿span><a href="javascript:void(0)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick="delNode();">删除a>div><script type="text/javascript">function delNode() {// 第一種方式：擷取父節點，然後删除子節點var dv = document.getElementById('dv');var cxy = document.getElementById("cxy");dv.removeChild(cxy);// 第二種方式：通過舊節點定位到父節點，然後删除子節點//var cxy = document.getElementById("cxy");//cxy.parentNode.removeChild(cxy);}script>body>html>
4、屬性操作
在操作DOM對象時，除了可以操作對象整體之外，還可以更加靈活地操作對象中的各個屬性。
<html><head><meta charset="utf-8" /><title>屬性操作title>head><body><button type="button" id="btn">測試按鈕button><br /><input type="text" value="加油，勝利就在眼前" id="txt" class="test" /><br />性别：<input type="radio" checked="true" name="sex" value="1">男<input type="radio" name="sex" value="0">女<br /><img src="img/timg.jpg" id="sxtimg" title="sxt" /><script type="text/javascript">var txt = document.getElementById("txt");var sex = document.getElementsByName("sex")[0];var sxtimg = document.getElementById("sxtimg");// 擷取文本function getValue() {// 擷取文本console.log(txt.value);}// 擷取屬性function getAttr() {var id = txt.getAttribute("id"); console.log(id); console.log(txt.id);var value = txt.getAttribute("value"); console.log(value);var clazz = txt.getAttribute("class"); console.log(clazz); console.log(txt.className);}// 擷取狀态是否選中function getChecked() {console.log(sex.checked);// 指定選項是否被選中}// 設定屬性function setAttr() {sxtimg.style.display = 'none';// 隐藏圖檔txt.setAttribute("value", "success");// 修改文本内容txt.setAttribute("aaa", "000000"); // 自定義屬性console.log(txt.getAttribute("aaa")); // 擷取自定義屬性值}// 删除屬性function delAttr() {console.log(txt.getAttribute("id"));txt.removeAttribute("id");console.log(txt.getAttribute("id"));}var btn = document.getElementById('btn');btn.onclick = delAttr;script>body>html>
Javascript進行的是原始的操作，常常和事件一起結合使用，後期學習JQuery可以更友善地操作DOM。