當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
web前端----JavaScript的DOM（二）
生活随笔
收集整理的這篇文章主要介紹了
web前端----JavaScript的DOM（二）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前面在DOM一中我們知道了屬性操作，下面我們來了解一下節點操作。很重要！！
一、節點操作
創建節點：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> 具體的節點操作實例
事件類型
onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。onfocus 元素獲得焦點。 練習：輸入框 onblur 元素失去焦點。 應用場景：用于表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證. onchange 域的內容被改變。 應用場景：通常用于表單元素,當元素內容被改變時觸發.（三級聯動）onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最后一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下并松開。 onkeyup 某個鍵盤按鍵被松開。onload 一張頁面或一幅圖像完成加載。onmousedown 鼠標按鈕被按下。 onmousemove 鼠標被移動。 onmouseout 鼠標從某元素移開。 onmouseover 鼠標移到某元素之上。 onmouseleave 鼠標從元素離開onselect 文本被選中。 onsubmit 確認按鈕被點擊。二、onload事件
onload 屬性開發中 只給 body元素加.這個屬性的觸發 標志著 頁面內容被加載完成.應用場景: 當有些事情我們希望頁面加載完立刻執行,那么可以使用該事件屬性.
什么時候加載完什么時候觸發（如果你想把script放在body上面去，就用到onload事件了）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>節點操作</title><style>.c1 {width: 300px;height: 200px;border: 1px solid red;}</style><script>//如果要把script寫在body的上面就可以用onload事件//onload什么時候加載完什么時候觸發這個事件window.onload = function () {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);};//表格綁定刪除節點的事件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> </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> </body> </html> onload事件(基于節點操作的修改) <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>/*window.onload=function(){var ele=document.getElementById("ppp");ele.onclick=function(){alert(123)};};*/function fun() {var ele=document.getElementById("ppp");ele.onclick=function(){alert(123)};}</script> </head> <body οnlοad="fun()"><p id="ppp">hello p</p></body> </html> onload示例二三、onkeydown事件
Event 對象：Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件通常與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經創建好了,并且會在事件函數被調用時傳給事件函數.我們獲得僅僅需要接收一下即可.比如onkeydown,我們想知道哪個鍵被按下了，需要問下event對象的屬性，這里就時KeyCode.
四、onsubmit事件
當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.如果驗證失敗.在該方法中我們應該阻止表單的提交.
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>onsubmit事件</title><!--onsubmit事件:確定按鈕被點擊--><!--在表單提交前驗證用戶輸入是否正確.如果驗證失敗.在該方法中我們應該阻止表單的提交.--><!--提交按鈕本身就有一個默認事件（你點擊提交的時候就會把數據發過去）--></head> <body> <form action="" id="submit"><p>姓名：<input type="text" class="name"></p><p>年齡：<input type="text" class="age"></p><input type="submit"> </form> <input type="text" class="test"> <script>var ele_form = document.getElementById('submit');var ele_name = document.getElementsByClassName('name')[0];var ele_age = document.getElementsByClassName('age')[0];ele_form.onsubmit = function (event) {var username = ele_name.value;var age = ele_age.value;alert(username);alert(age);if (username=='haiyan'){//阻止默認事件的兩種方式 // 方式一： // return false; // 方式二 // 給函數給一個形參，這個形參寫什么都行，一般我們寫成eventevent.preventDefault() //阻止默認事件（表單的提交）}} </script> <script>//測試event對象var ele = document.getElementsByClassName('test')[0]; // event :每次觸發事件時所有的狀態信息 // event.keyCode ：保存著所有的狀態信息ele.onkeydown =function (event) { // onkeydown按下鍵盤觸發的事件console.log(event);console.log(event.keyCode);if (event.keyCode==13){//按回車就會彈出alert(666)}} </script> </body> </html> onsubmit五、事件傳播
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>事件傳播</title><style>.box1 {width: 300px;height: 300px;background-color: rebeccapurple;}.box2{width: 150px;height: 150px;background-color: yellow;}</style> </head> <body> <div class="box1"><div class="box2"></div> </div> <script>//因為盒子1是盒子2的父親，所以當給父親綁定一個事件，給兒子也綁定一個事件，就像 // 繼承一樣，兒子會繼承父親的事件，所以現在運行的時候如果點擊盒子2，會把自己的是事件和 // 父親的事件都執行了。所以如果只想讓兒子執行自己的事件，那么就得阻止發生事件傳播var ele1 = document.getElementsByClassName('box1')[0];var ele2 = document.getElementsByClassName('box2')[0];ele1.onclick = function () {alert(123)};ele2.onclick = function (event) {alert(456);console.log(event);console.log(event.keyCode);// 阻止事件傳播的方式event.stopPropagation();};</script> </body> </html> 事件傳播六、seach實例
模擬placeholder屬性的功能 <input type="text" placeholder="username" id="submit"> placeholder和value的區別：placeholder：只是一個提示功能，不傳值。
value：是一個默認的值，如果你的輸入框中不寫數據的時候，它會把默認的數據發過去 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>模擬placeholder屬性的功能</title> </head> <body> <input type="text" placeholder="username" id="submit"> <input type="text" value="username" id="submit1"> <script> // var ele = document.getElementById('submit1');var ele = document.getElementById('submit1');ele.onfocus = function () {//先獲取焦點，點擊輸入框就獲取到焦點，光標一上去就把值設成空this.value=""};ele.onblur = function () { // 當光標不點擊那個輸入框的時候就失去焦點了//當失去焦點的時候，判斷當前的那個值是不是為空，是否含有空格 // 如果為空或者有空格，用trim()去掉空格。然后賦值為usernameif (this.value.trim()==""){this.value='username'}} </script> </body> </html> seach示例
?七、onchange事件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>onchange事件</title> </head> <body> <select name="" id="s1"><option value="">甘肅省</option><option value="">安徽省</option><option value="">湖北省</option> </select> <script>var ele = document.getElementById('s1');//下拉菜單，和你當前事件不同的時候出發事件ele.onchange= function () {alert(123)} </script> </body> </html> onchange用onchange事件實現的二級聯動
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>二級聯動</title> </head> <body> <select name="" id="s1"><option value="">請選擇省份</option><option value="gansu">甘肅省</option><option value="hebei">河北省</option><option value="henan">河南省</option> </select> <select name="" id="c1"><option value="city">請選擇城市</option> </select> <script>var data = {'gansu':['蘭州市','天水市','武威市'],'hebei':['保定','石家莊'],'henan':['鄭州','開封']}var ele_select = document.getElementById('s1');var ele_critys = document.getElementById('c1');//父親標簽ele_select.onchange =function () { // alert(123) // console.log(this.value)var ele_provice = this.value;var citys = data[ele_provice];console.log(citys);//要在沒有添加之間清空，不然你點一次添加一次，點一次添加一次//方式一 // ele_critys.children.length=1; //不可行。。但是原理和方式二的一樣//方式二 // ele_critys.options.length = 1; //留一個，一般多的是設成0了for (var i =0;i<citys.length;i++) {//創建一個option標簽var ele_option = document.createElement('option'); //<option></option>ele_option.innerHTML = citys[i]; //得到有文本的option標簽ele_option.value = i + 1; //設置屬性值console.log(ele_option);ele_critys.appendChild(ele_option);}} </script></body> </html> 二級聯動八、onmouse事件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>onmouse事件</title><style>.box{width: 300%;height: 200px;}.title{background: steelblue;line-height: 40px;}.con{background: slategray;line-height: 30px;}.hide{display: none;}</style> </head> <body> <div class="box"><div class="title">onmouse</div><div class="con hide"><div><a href="" class="item">你好嗎？</a></div><div><a href="" class="item">我好啊</a></div><div><a href="" class="item">好就好唄</a></div></div> </div> <script>var ele_title = document.getElementsByClassName('title')[0];var ele_box = document.getElementsByClassName('box')[0];//鼠標指上去的事件ele_title.onmouseover = function () {this.nextElementSibling.classList.remove('hide');};//鼠標移走的事件的兩種方式 // 方式一（推薦）ele_box.onmouseleave= function () {ele_title.nextElementSibling.classList.add('hide');}; // 方式二 // ele_title.onmouseout = function () { // this.nextElementSibling.classList.add('hide'); // } // 方式一和方式二的區別： // 不同點 // onmouseout：不論鼠標指針離開被選元素還是任何子元素，都會觸發onmouseout事件 // onmouseleave：只有在鼠標指針離開被選元素時，才會觸發onmouseleave事件 // 相同點：都是鼠標移走觸發事件 </script> </body> </html> onmouse九、事件委派
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>事件委派（委派給所有的子元素）</title> </head> <body> <ul><li>111</li><li>222</li><li>333</li> </ul> <button class="addbtn">點我添加</button> </body> <script>var ele_btn = document.getElementsByClassName('addbtn')[0];var ele_ul = document.getElementsByTagName('ul')[0];var ele_li =document.getElementsByTagName('li');//綁定事件for (var i=0;i<ele_li.length;i++){ele_li[i].onclick = function () {alert(this.innerHTML)}}//事件委派ele_btn.onclick = function () {//創建一個li標簽var ele_li = document.createElement('li'); // ele_li.innerHTML= 444;ele_li.innerText = Math.round(Math.random()*1000);ele_ul.appendChild(ele_li);//吧創建的li標簽添加到ul標簽ele_ul.addEventListener('click',function (e) {console.log(e.target); //當前點擊的標簽console.log(e.target.tagName);//拿到標簽的名字 LIif (e.target.tagName=='LI'){console.log('ok'); // alert(ele_li.innerHTML)}})} </script> </html>?
轉載于:https://www.cnblogs.com/TheLand/p/8556993.html
總結
以上是生活随笔為你收集整理的web前端----JavaScript的DOM（二）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 12.6 Nginx安装 12.7 默认
- 下一篇： Spring - 父容器与子容器