標籤：har css 元素 載入完成 length 對象 技術 gif box
一、節點操作建立節點：var ele_a = document.createElement(‘a‘);
添加節點：ele_parent.appendChild(ele_img);
刪除節點：ele_parent.removeChild(ele_p);
替換節點：ele_parent.replaceChild(新標籤,舊標籤);
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>節點操作</title> <style> .c1 { width: 300px; height: 200px; border: 1px solid red; } </style></head><body><div class="c1"> <p id="p1">年後</p> <p id="p2">hello</p></div><button class="addBtn">ADD</button><button class="delBtn">DEL</button><button class="replaceBtn">Replace</button><ul> <li>建立節點：var ele_a = document.createElement(‘a‘);</li> <li>添加節點：ele_parent.appendChild(ele_img);</li> <li>刪除節點：ele_parent.removeChild(ele_p);</li> <li>替換節點：ele_parent.replaceChild(新標籤,舊標籤);</li></ul><table border="1"> <tbody id="t1"> <tr> <td><input type="checkbox"></td> <td><input type="text"></td> <td><button class="delbtn">del1</button></td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="text"></td> <td><button class="delbtn">del2</button></td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="text"></td> <td><button class="delbtn">del3</button></td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="text"></td> <td><button class="delbtn">del4</button></td> </tr> </tbody></table><script> var ele_add = document.getElementsByClassName(‘addBtn‘)[0]; var ele_del = document.getElementsByClassName(‘delBtn‘)[0]; var ele_repleace = document.getElementsByClassName(‘replaceBtn‘)[0]; console.log(ele_add); //綁定的添加節點的事件 ele_add.onclick = function () { //先建立一個標籤 var ele_a = document.createElement(‘a‘); console.log(ele_a); //<a></a> ele_a.innerHTML = ‘點擊‘; //<a>點擊</a> ele_a.href = ‘http://www.baidu.com‘; //<a href=‘http://www.baidu.com‘>點擊</a> //先建立一個標籤 var ele_img = document.createElement(‘img‘); ele_img.src = ‘1.png‘; ele_img.width = 50; ele_img.height = 50; //找到父標籤 var ele_parent = document.getElementsByClassName(‘c1‘)[0]; //然後添加 ele_parent.appendChild(ele_a); ele_parent.appendChild(ele_img); }; //綁定的刪除節點的事件 ele_del.onclick = function () { //先擷取要刪除的元素 var ele_p = document.getElementById(‘p1‘); //擷取它的父元素 var ele_parent = document.getElementsByClassName(‘c1‘)[0]; //然後刪除（注意是父元素刪除子項目） ele_parent.removeChild(ele_p) }; //綁定的替換節點的事件 ele_repleace.onclick = function () { //找被替換的標籤（舊標籤） var ele_p = document.getElementById(‘p2‘); //建立一個替換後的標籤（新標籤） var ele_img = document.createElement(‘img‘); ele_img.src = ‘2.png‘; ele_img.width = 100; ele_img.height = 50; //找到父節點 var ele_parent = document.getElementsByClassName(‘c1‘)[0]; //做替換（父節點替換子節點中的某一個節點）：相當於一次刪除加一次添加 ele_parent.replaceChild(ele_img, ele_p); }</script><script> //綁定刪除節點的事件 var ele_dels = document.getElementsByClassName(‘delbtn‘); for(var i=0;i<ele_dels.length;i++){ ele_dels[i].onclick = function () { //擷取刪除的元素 var ele_tr = this.parentElement.parentElement;// console.log(ele_tr) //找到父節點 var ele_tbody_parent =document.getElementById(‘t1‘); //然後刪除 ele_tbody_parent.removeChild(ele_tr) } }</script></body></html>具體的節點操作執行個體節點例子二、onload事件
onload 屬性開發中 只給 body元素加.這個屬性的觸發 標誌著 頁面內容被載入完成.應用情境: 當有些事情我們希望頁面載入完立刻執行,那麼可以使用該事件屬性.
什麼時候載入完什麼時候觸發（如果你想把script放在body上面去，就用到onload事件了）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 300px; height: 300px; background-color: green; margin: 0 auto; } </style> <script type="text/javascript"> window.onload = function(){ var box1 = document.getElementById("box"); box1.style.width = 200 + "px"; box1.style.height = 200 + "px"; box1.style.marginTop = 50 + "px"; } </script> </head> <body> <div onclick="click1(this)" id="box" > <p id="bode">我有一頭小毛驢,我從來也不騎,有一天我心血來潮騎著去趕集.....</p> </div> </body></html>onload事件三、onkeydown事件
Event 對象：Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鍵的狀態。
事件通常與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經建立好了,並且會在事件函數被調用時傳給事件函數.我們獲得僅僅需要接收一下即可.比如onkeydown,我們想知道哪個鍵被按下了，需要問下event對象的屬性，這裡就時KeyCode.
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>event事件</title> </head> <body> <input type="text" name="" id="t1" value="" /> </body> <script type="text/javascript"> var keyStat = document.getElementById("t1"); keyStat.onkeydown = function(event){ var num = event.keyCode; console.log(event); console.log(event.keyCode); console.log(String.fromCharCode(num)) if (event.keyCode == 13) { alert("你按下了斷行符號鍵!") } else{ } } </script></html>event事件
js05-DOM對象二
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
