Javascript的DOM總結
阿新 • • 發佈：2019-03-08
默認 leave copy 之前 簽名 src 獲得 eva 聯動 
Javascript的DOM總結
DOM
DOM 是 W3C（萬維網聯盟）的標準。DOM 定義了訪問 HTML 和 XML 文檔的標準： "W3C 文檔對象模型（DOM）是中立於平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。" W3C DOM 標準被分為 3 個不同的部分： 核心 DOM - 針對任何結構化文檔的標準模型 XML DOM - 針對 XML 文檔的標準模型 HTML DOM - 針對 HTML 文檔的標準模型
DOM節點
根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點(NODE)： 整個文檔是一個文檔節點(document對象) 每個 HTML 元素是元素節點(element 對象) HTML 元素內的文本是文本節點(text對象) 每個 HTML 屬性是屬性節點(attribute對象) 註釋是註釋節點(comment對象)
DOM查詢
獲取元素節點 getElementById() 通過id獲取一個元素節點 getElementsByTagName() 通過標簽名獲取一組元素節點對象 getElementsByClassName() 通過類名獲取一組元素節點對象 getElementsByName() 通過name屬性獲取一組元素節點對象 註意：getElementsByTagName()會返回一個數組對象，所有查詢到的元素都會被封裝到對象中，即使查詢到的元素只有一個，返回的也是數組。 後面的幾個方法也是。
節點樹中的節點彼此擁有層級關系。 父(parent),子(child)和同胞(sibling)等術語用於描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。 在節點樹中，頂端節點被稱為根（root） 每個節點都有父節點、除了根（它沒有父節點） 一個節點可擁有任意數量的子 同胞是擁有相同父節點的節點 下面的圖片展示了節點樹的一部分，以及節點之間的關系：
節點(自身)屬性: attributes - 節點（元素）的屬性節點 nodeType – 節點類型 nodeValue – 節點值 nodeName – 節點名稱 innerHTML - 節點（元素）的內容 innerText -節點（元素）的文本值 導航屬性: parentNode - 節點（元素）的父節點 (推薦) firstChild – 節點下第一個子元素 lastChild – 節點下最後一個子元素 childNodes - 節點（元素）的子節點 推薦導航屬性： parentElement // 父節點標簽元素 children // 所有子標簽 firstElementChild // 第一個子標簽元素 lastElementChild // 最後一個子標簽元素 nextElementtSibling // 下一個兄弟標簽元素 previousElementSibling // 上一個兄弟標簽元素
局部查找：
<div id="div1">
<div class="div2">i am div2</div>
<div name="yuan">i am div2</div>
<div id="div3">i am div2</div>
<p>hello p</p>
</div>
<script>
var div1=document.getElementById("div1");
////支持;
// var ele= div1.getElementsByTagName("p");
// alert(ele.length);
////支持
// var ele2=div1.getElementsByClassName("div2");
// alert(ele2.length);
////不支持
// var ele3=div1.getElementById("div3");
// alert(ele3.length);
////不支持
// var ele4=div1.getElementsByName("yuan");
// alert(ele4.length)
</script>
HTML DOM Event(事件)
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。 onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。 onfocus 元素獲得焦點。 //練習：輸入框 onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證. onchange 域的內容被改變。 應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動） onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下並松開。 onkeyup 某個鍵盤按鍵被松開。 onload 一張頁面或一幅圖像完成加載。 onmousedown 鼠標按鈕被按下。 onmousemove 鼠標被移動。 onmouseout 鼠標從某元素移開。 onmouseover 鼠標移到某元素之上。 onmouseleave 鼠標從元素離開 onselect 文本被選中。 onsubmit 確認按鈕被點擊。
綁定事件的三種方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!--//方式一-->
<div onclick="alert(123)">點我呀</div>
<div id="abc">點我呀</div>
<div onclick="fun1();" id="a">點我呀</div>
<script>
// 方式二
var ele=document.getElementById("abc");
ele.onclick=function(){
alert("hi");
};
// 方式三
function fun1() {
var ele=document.getElementById("a");
ele.onclick=function(){
alert(123)
};
}
</script>
</body>
</html>
onload：
onload 屬性開發中 只給 body元素加.
這個屬性的觸發 標誌著 頁面內容被加載完成.
應用場景: 當有些事情我們希望頁面加載完立刻執行,那麽可以使用該事件屬性.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <script> 8 // window.onload=function(){ 9 // var ele=document.getElementById("ppp"); 10 // ele.onclick=function(){ 11 // alert(123) 12 // }; 13 // }; 14 15 16 17 function fun1() { 18 var ele=document.getElementById("ppp"); 19 ele.onclick=function(){ 20 alert(123) 21 }; 22 } 23 24 </script> 25 </head> 26 <body onload="fun1()"> 27 28 <p id="ppp">hello p</p> 29 30 </body> 31 </html>View Code
onsubmit:
是當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.如果驗證失敗.在該方法中我們應該阻止表單的提交.
<form id="form"> <input type="text"/> <input type="submit" value="點我!" /> </form> <script type="text/javascript"> //阻止表單提交方式1(). //onsubmit 命名的事件函數,可以接受返回值. 其中返回false表示攔截表單提交.其他為放行. var ele=document.getElementById("form"); ele.onsubmit=function(event) { // alert("驗證失敗 表單不會提交!"); // return false; // 阻止表單提交方式2 event.preventDefault(); ==>通知瀏覽器不要執行與事件關聯的默認動作。 alert("驗證失敗 表單不會提交!"); event.preventDefault(); }View Code
DOM增刪改查演示
增:
| 1 2 |
createElement(name)創建元素
appendChild();將元素添加
|
刪:
| 1 2 3 |
獲得要刪除的元素
獲得它的父元素
使用removeChild()方法刪除
|
改:
第一種方式:
使用上面增和刪結合完成修改
第二種方式:
使用setAttribute();方法修改屬性
使用innerHTML屬性修改元素的內容
查: 使用之前介紹的方法.
<script type="text/javascript"> //在第一個div中動態增加一個a標簽. 該a標簽點擊之後跳轉到百度首頁. function addNode(){ //1.獲得 第一個div var div = document.getElementById("div_1"); //2.創建a標簽 createElement==>創建一個a標簽 <a></a> var eleA = document.createElement("a"); //3.為a標簽添加屬性 <a href="http://www.baidu.com"></a> eleA.setAttribute("href", "http://www.baidu.com"); //4.為a標簽添加內容 <a href="http://www.baidu.com">百度</a> eleA.innerHTML = "百度"; //5.將a標簽添加到div中 div.appendChild(eleA); } //點擊後 刪除div區域2 function deleteNode(){ //1 獲得要刪除的div區域 var div = document.getElementById("div_2"); //2.獲得父親 var parent = div.parentNode; //3 由父親操刀 parent.removeChild(div); } //點擊後 替換div區域3 為一個美女 function updateNode(){ //1 獲得要替換的div區域3 var div = document.getElementById("div_3"); //2創建img標簽對象 <img /> var img = document.createElement("img"); //3添加屬性 <img src="001.jpg" /> img.setAttribute("src", "001.JPG"); //4.獲得父節點 var parent = div.parentNode; //5.替換 parent.replaceChild(img, div); } //點擊後 將div區域4 克隆一份 添加到頁面底部 function copyNode(){ //1.獲取要克隆的div var div = document.getElementById("div_4"); //2.克隆 參數為true 那麽克隆時克隆所有子元素. false 只克隆自己 var div_copy = div.cloneNode(true); //3.獲得父親 var parent = div.parentNode; //4.添加 parent.appendChild(div_copy); } </script>View Code
修改HTML DOM
- 改變 HTML 內容
改變元素內容的最簡答的方法是使用 innerHTML ，innerText。
- 改變 CSS 樣式
| 1 2 |
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";<br> .style.fontSize=48px
|
- 改變 HTML 屬性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
- 創建新的 HTML 元素
createElement(name)
- 刪除已有的 HTML 元素
elementNode.removeChild(node)
- 關於class的操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove
Javascript的DOM總結