WEB 前端--Day6( DOM)
阿新 • • 發佈：2018-12-07
一、DOM【掌握】
1.簡介
DOM-----<文件物件模型> 可以使用js中提供的物件，使用這些物件的方法和屬性，對標記性文件【html標籤】進行操作
問題： 想要對標記性文件進行操作，需要考慮什麼問題？
解決： 首先需要將標記性文件中的所有內容【標籤，屬性，文字】封裝成物件，封裝成物件的目的是為了更方便的去操
作這些文件以及文件中所有的內容，物件包含屬性和方法
注意：在載入html頁面時，web瀏覽器會生成一個樹型結構，主要用來表示頁面結構，這種樹型結構被稱為由節點組成的 節點樹
2.常用的方法和屬性
2.1元素節點物件的獲取方式
getElementById(): 通過指定的id獲取對應的標籤物件【返回 一個物件】
getElementByTagName(): 通過標籤名稱獲取對應的標籤物件【返回一個容器：集合/節點陣列】
getElemmentByName(): 通過指定的name獲取對應的標籤物件【返回一個容器：集合/節點陣列】
getElementByClassName(): 通過指定的class獲取對應的標籤物件【返回一個容器：集合/節點陣列】
2.2DOM節點操作:方法
關於節點的增刪改查
【增】 --------- appendChild(): 新增子節點【追加】 insertBefore()：在指定節點之前插入一個兄弟節點
【刪】 --------- removeChild():刪除子節點
【改】 -------- replaceChild()；替換子節點 setAttribute()；對指定的屬性設定或者修改為指定的值
【查】 -------- 元素節點物件的獲取方式：getElementByXxxx() getAttribute():返回指定的屬性值
【建立節點】 ***** createElement():標籤節點 createAttribute()：屬性節點 createTextNode()：文字節點
【複製】 ------- cloneNode()
2.3DOM節點操作:屬性
innerHTML:節點的文字值
attributes:指定節點的屬性節點
value：輸入框的值
nodeName：節點的名稱 ------- (nodeName是隻讀的)
文件節點：#document
元素節點：與標籤名相同的，只不過是全大寫
屬性節點：與屬性名相同
文字節點：#text
nodeValue：節點的值
元素節點：undefined或者null
屬性節點：屬性值
文字節點：文字本身
nodeType：節點的型別 --- -(nodeType是隻讀的)
文件節點：9 元素節點：1 屬性節點：2 文字節點：3
parentNode:指定節點的父節點
childNodes:指定節點的子節點
firstChild:第一個子節點
lastChild:最後一個子節點
nextSibling:獲取一個指定節點的下一個兄弟節點
previousSibling:獲取 一個指定節點的上一個兄弟節點
3.使用
3.1獲取元素節點物件
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" id="text1" value="aaaa"/> <input type="text" id="text2" value="bbbb" name="bb"/> <input type="text" id="text3" value="cccc" name="bb"/> <input type="text" class="text4" value="aaaa" /> <script> //document：文件物件，代表是整個html文件 //當使用document物件呼叫某個方法的時候，則表示該方法的作用範圍在整個文件內【查詢的範圍是當前整個html頁面】 //1.getElementById() id //注意：返回值為一個標籤物件，所以一個id最好作用於一個標籤 //a.獲取指定的標籤物件 /*var input1 = document.getElementById("text1"); //b.修改input的value值 input1.value = "AAAA"; alert(input1); //object HTMLInputElement*/ //2.getElmentByName() name //注意：每個標籤都可以有一個name屬性， //注意：不管name屬性對應的標籤有幾個，都會返回一個NodeList的容器 //如果想要獲取其中的某個標籤物件，則需要遍歷節點列表 /*var input2 = document.getElementsByName("bb"); alert(input2);//[object NodeList] for(i in input2){ alert(input2[i]); }*/ //3.getElementByClassName() class //注意：一個class可以同時作用於多個標籤 /*var input3 = document.getElementsByClassName("text4"); alert(input3); //[object HTMLCollection] for(var i = 0;i < input3.length;i++){ var subInput = input3[i]; alert(subInput.value); }*/ //4.getElementByTagName() tag //注意：在同一個html頁面中，一個標籤可以同時出現多次 /*var input4 = document.getElementsByTagName("input"); alert(input4); //[object HTMLCollection] for(var i = 0;i < input4.length;i++){ var subInput = input4[i]; alert(subInput.value); }*/ //5.特殊情況：如果需要獲取的標籤物件在當前頁面中只有一個，則採用下面的方式獲取 var input2 = document.getElementsByName("bb")[0]; var input3 = document.getElementsByClassName("text4")[0]; var input4 = document.getElementsByTagName("input")[0]; </script> </body> </html>
3.2增加子節點
追加子節點
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>宋江</li> <li>李逵</li> <li>武松</li> <li>武大郎</li> <!--<li>西門慶</li>--> </ul> <!--需求：在ul的末尾追加一個子節點，文字內容為西門慶 appendChild（）--> <button onclick="func()">追加子節點</button> <script> function func(){ //1.建立文字節點 var textObj = document.createTextNode("西門慶"); //2.建立元素節點 var liObj = document.createElement("li"); //3.將文字節點新增給元素節點 liObj.appendChild(textObj); //4.獲取ul的標籤物件 var ulObj = document.getElementsByTagName("ul")[0]; //5.將li標籤物件新增給ul ulObj.appendChild(liObj); } </script> </body> </html>
插入子節點
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>宋江</li> <li>李逵</li> <!--<li>西門慶</li>--> <li id="ws">武松</li> <li>武大郎</li> </ul> <!--需求：在武松的前面插入一個西門慶 insertBefore()--> <button onclick="func()">插入子節點</button> <script> function func(){ //1.建立文字節點 var textObj = document.createTextNode("西門慶"); //2.建立元素節點 var liObj = document.createElement("li"); //3.將文字節點新增給元素節點 liObj.appendChild(textObj); //4.獲取ul的標籤物件 var ulObj = document.getElementsByTagName("ul")[0]; //5.獲取指定的標籤 var wsObj = document.getElementById("ws"); //6.將liObj插入到wsObj的前面 //注意：使用insertBefore本質上還是一個父節點增加一個子節點，所以使用父節點物件呼叫 //注意：引數：新的節點物件，指定的節點物件 ulObj.insertBefore(liObj,wsObj); } </script> </body> </html>
3.3刪除子節點
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>宋江</li> <li id="li2">李逵</li> <li>西門慶</li> <li>武松</li> <li>武大郎</li> </ul> <!--需求：將李逵對應的li刪除掉 removeChild()--> <button onclick="func()">刪除子節點</button> <script> function func(){ //1.獲取父節點 var ulObj = document.getElementsByTagName("ul")[0]; //2.獲取需要被刪除的子節點 var liObj = document.getElementById("li2"); //3.刪除 //注意：通過父節點刪除子節點 ulObj.removeChild(liObj); } </script> </body> </html>
3.4替換子節點
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>宋江</li> <li id="li2">李逵</li> <li>西門慶</li> <li>武松</li> <li>武大郎</li> </ul> <!--需求：將李逵替換成林沖 replaceChild()--> <button onclick="func()">替換子節點</button> <script> function func(){ //1.建立文字節點 var textObj = document.createTextNode("林沖"); //2.建立元素節點 var liObj = document.createElement("li"); //3.將文字節點新增給元素節點 liObj.appendChild(textObj); //4.獲取需要被替換的標籤 var lkObj = document.getElementById("li2"); //5.獲取ul的標籤物件 var ulObj = document.getElementsByTagName("ul")[0]; //6.替換 //注意：通過父節點替換子節點 //引數：新的，舊的 ulObj.replaceChild(liObj,lkObj); } </script> </body> </html>
3.5複製節點
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width: 400px; height: 400px; background-color: orange; } </style> </head> <body> <ul> <li>宋江</li> <li id="li2">李逵</li> <li>西門慶</li> <li>武松</li> <li>武大郎</li> </ul> <div id="box"> </div> <!--需求：將無序列表在div中複製一份 cloneNode（）--> <button onclick="func()">複製節點</button> <script type="text/javascript"> function func(){ //1.獲取ul標籤 var ulObj = document.getElementsByTagName("ul")[0]; //2.獲取需要目標標籤物件 var divObj = document.getElementById("box"); //3.執行復制方法，將內容儲存到類似剪下板的地方 var copyObj = ulObj.cloneNode(true); //4.將副本新增到目標標籤的下面【成為子節點】 divObj.appendChild(copyObj); } </script> </body> </html>
3.6屬性相關操作【瞭解】
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" name="aaa" id="inputid" value="請輸入：" /> <script> //1.獲取標籤物件 var input = document.getElementById("inputid"); //2.獲取屬性的值 //獲取value的值 //方式一：物件.屬性 document.write(input.value); //方式二：物件.getAttribute("屬性的欄位") document.write(input.getAttribute("value")); //3.設定某個屬性的值 //方式一：物件.屬性 input.value = "hello"; //方式二：物件.setAttribute(“屬性的欄位”，“文字值”) input.setAttribute("value","hello~~~"); //4.新增屬性 //a.建立屬性節點 //引數：屬性的欄位 //var attrObj = document.createAttribute("class"); //b.將屬性節點新增給標籤節點 //input.appendChild(attrObj); document.write("<br />"); //5.刪除屬性 //removeChilid(需要被刪除的位元組物件) removeAttribute("屬性的欄位") document.write(input.getAttribute("name")); //aaa input.removeAttribute("name"); document.write(input.getAttribute("name")); //null //總結：屬性的操作：xxxAttribute() //create get set remove </script> </body> </html>
3.7Node物件的屬性
作用：根據不同的取值，區分節點的型別
nodeName :只讀的
nodeType
nodeValue
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <span id="spanid">hellohello</span><br /> <script> //1.標籤節點 var eleObj = document.getElementById("spanid"); document.write(eleObj.nodeName); document.write(eleObj.nodeType); document.write(eleObj.nodeValue); //SPAN 1 null document.write("<br />"); //2.屬性節點 var attriObj = eleObj.getAttributeNode("id"); document.write(attriObj.nodeName); document.write(attriObj.nodeType); document.write(attriObj.nodeValue); //id 2 spanid document.write("<br />"); //3.文字節點 //注意:文字節點排列在屬性節點的前面 var textObj = eleObj.firstChild; //文字節點 document.write(textObj.nodeName); document.write(textObj.nodeType); document.write(textObj.nodeValue); //#text 3 hellohello document.write("<br />"); </script> </body> </html>
3.8父節點子節點以及兄弟節點
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul><li id="li1">1111</li><li id="li2">2222</li><li id="li3">3333</li><li id="li4">4444</li></ul> <script> //1.父節點 //需求：通過一個已知的子節點獲取對應的父節點 var liEle = document.getElementById("li1"); var ulEle1 = liEle.parentNode; //2.子節點 //需求：通過父節點獲取子節點 var ulEle2 = document.getElementsByTagName("ul")[0]; document.write(ulEle2.firstChild);//Text document.write(ulEle2.lastChild);//Text //獲取全部的子節點 var childs = ulEle2.childNodes; document.write(childs);//NodeList document.write(childs.length);//9 //說明問題：在節點樹中，換行符也會被識別為一個文字節點，在書寫標籤的時候，ul下面有9個子節點 document.write("<br />"); //3.兄弟節點/同輩節點 //通過一個已知的子節點獲取對應的兄弟節點 var li3 = document.getElementById("li3"); var subEle1 = li3.nextSibling; document.write(subEle1.getAttribute("id")); //li4 var subEle2 = li3.previousSibling; document.write(subEle2.getAttribute("id")); //li2 </script> </body> </html>
3.9innerHTML屬性
設定或者獲取節點的文字值
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width: 200px; height: 200px; background-color: cyan; } </style> </head> <body> <span id="spanid">hahhahahah</span> <div id="box"> </div> <script> //1.獲取文字內容 //a.獲取span的標籤物件 var spanObj = document.getElementById("spanid"); //b.獲取標籤物件的文字內容 document.write(spanObj.innerHTML); //2.給指定的標籤設定文字內容 //2.1設定純文字 var divObj = document.getElementById("box"); //divObj.innerHTML = "hello"; //2.2設定html標籤 //innerHTML屬性可以識別字符串中的html標籤 divObj.innerHTML = "<table border='1' cellspacing='1' bordercolor='red' width='100px' height='100px'><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>"; </script> </body> </html>
4.事件
通過js建立動態網頁，事件是可以被js檢測到的行為
注意：網頁中的每個元素都可以產生某些觸發js函式或者程式的事件
4.1模式
內聯模式：將事件作為標籤的屬性使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--內聯模式--> <!--事件：可以識別js中的函式和js程式碼 缺點：沒有做到html和js的分離原則 --> <input type="button" onclick="func()" value="按鈕"/> <input type="button" onclick="alert('abc')" value="按鈕1" /> <script> function func(){ document.write("hello"); } //func(); </script> </body> </html>指令碼模式：將事件作為某個物件的屬性使用，一般結合匿名函式使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--指令碼模式--> <input type="button" value="按鈕1" /> <input type="button" value="按鈕2" /> <script> //1.獲取input標籤物件 var input1 = document.getElementsByTagName("input")[0]; //2.給input標籤物件新增一個單擊事件 //給標籤物件綁定了單擊事件，當點選按鈕的時候會觸發匿名函式的函式體 input1.onclick = function(){ document.write("aaaaa"); } //好處：達到了html和js的分離，有利於後期的維護 </script> </body> </html>
4.2事件物件
事件物件一般被稱為event物件，這個物件預設是被隱藏起來的
如果要使用這個事件物件，則需要通過引數傳遞，引數出現事件對應的函式中
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="按鈕" /> <script> function show(){ //arguments是一個全域性物件，用來表示引數 document.write(arguments.length); //0 } show(); var inputObj = document.getElementsByTagName("input")[0]; /*inputObj.onclick = function(){ //注意：在js中，給標籤物件繫結事件，事件的觸發函式中都有一個隱藏的引數：event物件 document.write(arguments.length);//1 }*/ //注意：event只是一個形參，可以是任意的識別符號，為了區分該引數代表是事件物件，一般使用event //不一定所有的事件中都需要將event事件物件顯式的寫出來，根據需求來定 inputObj.onclick = function(event){ document.write(event); //[object MouseEvent] document.write(arguments.length); //1 document.write(arguments[0]); //[object MouseEvent] } </script> </body> </html>
4.3滑鼠事件
事件的組成：on + 事件名稱
常用的事件：
onclick 滑鼠單擊事件
ondbclick: 滑鼠雙擊事件
onmousedown: 當用戶按下滑鼠但是還沒有擡起來的時候觸發
onmouseup: 當用戶擡起滑鼠的時候觸發
onmouseover:【hover】， 當滑鼠懸浮在某個標籤的上方的時候
onmouseout: 移出標籤
onmousemove: 當滑鼠在某個標籤的上方移動的時候
onscroll：當滑鼠滾動的時候觸發
onsubmit：表單提交的時候觸發【常用於阻止表單提交】
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="box"></div> <script> //獲取div標籤物件 var divObj = document.getElementById("box"); //給div新增滑鼠事件 //單擊事件 /*divObj.onclick = function(){ alert("hello"); }*/ //雙擊事件 /*divObj.ondblclick = function(){ alert("hello"); }*/ //懸浮事件【移進】 /*divObj.onmouseover = function(){ alert("hello"); }*/ //移出 divObj.onmouseout = function(){ alert("hello"); } </script> </body> </html>