當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

web前端----JavaScript的DOM（二）

發(fā)布時(shí)間：2025/3/21 javascript 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端----JavaScript的DOM（二）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前面在DOM一中我們知道了屬性操作，下面我們來(lái)了解一下節(jié)點(diǎn)操作。很重要！！

一、節(jié)點(diǎn)操作

創(chuàng)建節(jié)點(diǎn)：var ele_a = document.createElement('a');
添加節(jié)點(diǎn)：ele_parent.appendChild(ele_img);
刪除節(jié)點(diǎn)：ele_parent.removeChild(ele_p);
替換節(jié)點(diǎn)：ele_parent.replaceChild(新標(biāo)簽,舊標(biāo)簽); <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>節(jié)點(diǎn)操作</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>創(chuàng)建節(jié)點(diǎn)：var ele_a = document.createElement('a');</li><li>添加節(jié)點(diǎn)：ele_parent.appendChild(ele_img);</li><li>刪除節(jié)點(diǎn)：ele_parent.removeChild(ele_p);</li><li>替換節(jié)點(diǎn)：ele_parent.replaceChild(新標(biāo)簽,舊標(biāo)簽);</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);//綁定的添加節(jié)點(diǎn)的事件ele_add.onclick = function () {//先創(chuàng)建一個(gè)標(biāo)簽var ele_a = document.createElement('a');console.log(ele_a); //<a></a>ele_a.innerHTML = '點(diǎn)擊'; //<a>點(diǎn)擊</a>ele_a.href = 'http://www.baidu.com'; //<a href='http://www.baidu.com'>點(diǎn)擊</a>//先創(chuàng)建一個(gè)標(biāo)簽var ele_img = document.createElement('img');ele_img.src = '1.png';ele_img.width = 50;ele_img.height = 50;//找到父標(biāo)簽var ele_parent = document.getElementsByClassName('c1')[0];//然后添加ele_parent.appendChild(ele_a);ele_parent.appendChild(ele_img);};//綁定的刪除節(jié)點(diǎn)的事件ele_del.onclick = function () {//先獲取要?jiǎng)h除的元素var ele_p = document.getElementById('p1');//獲取它的父元素var ele_parent = document.getElementsByClassName('c1')[0];//然后刪除（注意是父元素刪除子元素）ele_parent.removeChild(ele_p)};//綁定的替換節(jié)點(diǎn)的事件ele_repleace.onclick = function () {//找被替換的標(biāo)簽（舊標(biāo)簽）var ele_p = document.getElementById('p2');//創(chuàng)建一個(gè)替換后的標(biāo)簽（新標(biāo)簽）var ele_img = document.createElement('img');ele_img.src = '2.png';ele_img.width = 100;ele_img.height = 50;//找到父節(jié)點(diǎn)var ele_parent = document.getElementsByClassName('c1')[0];//做替換（父節(jié)點(diǎn)替換子節(jié)點(diǎn)中的某一個(gè)節(jié)點(diǎn)）：相當(dāng)于一次刪除加一次添加ele_parent.replaceChild(ele_img, ele_p);} </script> <script>//綁定刪除節(jié)點(diǎn)的事件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)//找到父節(jié)點(diǎn)var ele_tbody_parent =document.getElementById('t1');//然后刪除ele_tbody_parent.removeChild(ele_tr)}} </script> </body> </html> 具體的節(jié)點(diǎn)操作實(shí)例

事件類(lèi)型

onclick 當(dāng)用戶(hù)點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。 ondblclick 當(dāng)用戶(hù)雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。onfocus 元素獲得焦點(diǎn)。練習(xí)：輸入框 onblur 元素失去焦點(diǎn)。應(yīng)用場(chǎng)景：用于表單驗(yàn)證,用戶(hù)離開(kāi)某個(gè)輸入框時(shí),代表已經(jīng)輸入完了,我們可以對(duì)它進(jìn)行驗(yàn)證. onchange 域的內(nèi)容被改變。應(yīng)用場(chǎng)景：通常用于表單元素,當(dāng)元素內(nèi)容被改變時(shí)觸發(fā).（三級(jí)聯(lián)動(dòng)）onkeydown 某個(gè)鍵盤(pán)按鍵被按下。應(yīng)用場(chǎng)景: 當(dāng)用戶(hù)在最后一個(gè)輸入框按下回車(chē)按鍵時(shí),表單提交. onkeypress 某個(gè)鍵盤(pán)按鍵被按下并松開(kāi)。 onkeyup 某個(gè)鍵盤(pán)按鍵被松開(kāi)。onload 一張頁(yè)面或一幅圖像完成加載。onmousedown 鼠標(biāo)按鈕被按下。 onmousemove 鼠標(biāo)被移動(dòng)。 onmouseout 鼠標(biāo)從某元素移開(kāi)。 onmouseover 鼠標(biāo)移到某元素之上。 onmouseleave 鼠標(biāo)從元素離開(kāi)onselect 文本被選中。 onsubmit 確認(rèn)按鈕被點(diǎn)擊。

二、onload事件

onload 屬性開(kāi)發(fā)中只給 body元素加.這個(gè)屬性的觸發(fā) 標(biāo)志著頁(yè)面內(nèi)容被加載完成.應(yīng)用場(chǎng)景: 當(dāng)有些事情我們希望頁(yè)面加載完立刻執(zhí)行,那么可以使用該事件屬性.

什么時(shí)候加載完什么時(shí)候觸發(fā)（如果你想把script放在body上面去，就用到onload事件了）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>節(jié)點(diǎn)操作</title><style>.c1 {width: 300px;height: 200px;border: 1px solid red;}</style><script>//如果要把script寫(xiě)在body的上面就可以用onload事件//onload什么時(shí)候加載完什么時(shí)候觸發(fā)這個(gè)事件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);//綁定的添加節(jié)點(diǎn)的事件ele_add.onclick = function () {//先創(chuàng)建一個(gè)標(biāo)簽var ele_a = document.createElement('a');console.log(ele_a); //<a></a>ele_a.innerHTML = '點(diǎn)擊'; //<a>點(diǎn)擊</a>ele_a.href = 'http://www.baidu.com'; //<a href='http://www.baidu.com'>點(diǎn)擊</a>//先創(chuàng)建一個(gè)標(biāo)簽var ele_img = document.createElement('img');ele_img.src = '1.png';ele_img.width = 50;ele_img.height = 50;//找到父標(biāo)簽var ele_parent = document.getElementsByClassName('c1')[0];//然后添加ele_parent.appendChild(ele_a);ele_parent.appendChild(ele_img);};//綁定的刪除節(jié)點(diǎn)的事件ele_del.onclick = function () {//先獲取要?jiǎng)h除的元素var ele_p = document.getElementById('p1');//獲取它的父元素var ele_parent = document.getElementsByClassName('c1')[0];//然后刪除（注意是父元素刪除子元素）ele_parent.removeChild(ele_p)};//綁定的替換節(jié)點(diǎn)的事件ele_repleace.onclick = function () {//找被替換的標(biāo)簽（舊標(biāo)簽）var ele_p = document.getElementById('p2');//創(chuàng)建一個(gè)替換后的標(biāo)簽（新標(biāo)簽）var ele_img = document.createElement('img');ele_img.src = '2.png';ele_img.width = 100;ele_img.height = 50;//找到父節(jié)點(diǎn)var ele_parent = document.getElementsByClassName('c1')[0];//做替換（父節(jié)點(diǎn)替換子節(jié)點(diǎn)中的某一個(gè)節(jié)點(diǎn)）：相當(dāng)于一次刪除加一次添加ele_parent.replaceChild(ele_img, ele_p);};//表格綁定刪除節(jié)點(diǎn)的事件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)//找到父節(jié)點(diǎn)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>創(chuàng)建節(jié)點(diǎn)：var ele_a = document.createElement('a');</li><li>添加節(jié)點(diǎn)：ele_parent.appendChild(ele_img);</li><li>刪除節(jié)點(diǎn)：ele_parent.removeChild(ele_p);</li><li>替換節(jié)點(diǎn)：ele_parent.replaceChild(新標(biāo)簽,舊標(biāo)簽);</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事件(基于節(jié)點(diǎn)操作的修改) <!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 對(duì)象：Event 對(duì)象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素、鍵盤(pán)按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)。
事件通常與函數(shù)結(jié)合使用，函數(shù)不會(huì)在事件發(fā)生前被執(zhí)行！event對(duì)象在事件發(fā)生時(shí)系統(tǒng)已經(jīng)創(chuàng)建好了,并且會(huì)在事件函數(shù)被調(diào)用時(shí)傳給事件函數(shù).我們獲得僅僅需要接收一下即可.比如onkeydown,我們想知道哪個(gè)鍵被按下了，需要問(wèn)下event對(duì)象的屬性，這里就時(shí)KeyCode.

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <input type="text" class="test"> <input type="text" id="t1"/> <script>//測(cè)試event對(duì)象var ele = document.getElementsByClassName('test')[0]; // event :每次觸發(fā)事件時(shí)所有的狀態(tài)信息 // event.keyCode ：保存著所有的狀態(tài)信息ele.onkeydown =function (event) { // onkeydown按下鍵盤(pán)觸發(fā)的事件console.log(event);console.log(event.keyCode);if (event.keyCode==13){//按回車(chē)就會(huì)彈出alert(666)}} </script> <script type="text/javascript">var ele=document.getElementById("t1");ele.onkeydown=function(e){e=e||window.event;var keynum=e.keyCode;var keychar=String.fromCharCode(keynum); // console.log(keynum); //每次鍵盤(pán)敲下的狀態(tài)信息 // console.log(keychar); //輸入的字符 // alert(keynum); // alert(keychar) //你鍵盤(pán)輸入的字符}; </script> </body> </html> onkeydown事件

四、onsubmit事件

當(dāng)表單在提交時(shí)觸發(fā). 該屬性也只能給form元素使用.應(yīng)用場(chǎng)景: 在表單提交前驗(yàn)證用戶(hù)輸入是否正確.如果驗(yàn)證失敗.在該方法中我們應(yīng)該阻止表單的提交.

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>onsubmit事件</title></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'){//阻止默認(rèn)事件的兩種方式 // 方式一： // return false; // 方式二 // 給函數(shù)給一個(gè)形參，這個(gè)形參寫(xiě)什么都行，一般我們寫(xiě)成eventevent.preventDefault() //阻止默認(rèn)事件（表單的提交）}} </script> <script>//測(cè)試event對(duì)象var ele = document.getElementsByClassName('test')[0]; // event :每次觸發(fā)事件時(shí)所有的狀態(tài)信息 // event.keyCode ：保存著所有的狀態(tài)信息ele.onkeydown =function (event) { // onkeydown按下鍵盤(pán)觸發(fā)的事件console.log(event);console.log(event.keyCode);if (event.keyCode==13){//按回車(chē)就會(huì)彈出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>//因?yàn)楹凶?是盒子2的父親，所以當(dāng)給父親綁定一個(gè)事件，給兒子也綁定一個(gè)事件，就像 // 繼承一樣，兒子會(huì)繼承父親的事件，所以現(xiàn)在運(yùn)行的時(shí)候如果點(diǎn)擊盒子2，會(huì)把自己的是事件和 // 父親的事件都執(zhí)行了。所以如果只想讓兒子執(zhí)行自己的事件，那么就得阻止發(fā)生事件傳播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實(shí)例

模擬placeholder屬性的功能 <input type="text" placeholder="username" id="submit"> placeholder和value的區(qū)別：
　　placeholder：只是一個(gè)提示功能，不傳值。
　　value：是一個(gè)默認(rèn)的值，如果你的輸入框中不寫(xiě)數(shù)據(jù)的時(shí)候，它會(huì)把默認(rèn)的數(shù)據(jù)發(fā)過(guò)去 <!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 () {//先獲取焦點(diǎn)，點(diǎn)擊輸入框就獲取到焦點(diǎn)，光標(biāo)一上去就把值設(shè)成空this.value=""};ele.onblur = function () { // 當(dāng)光標(biāo)不點(diǎn)擊那個(gè)輸入框的時(shí)候就失去焦點(diǎn)了//當(dāng)失去焦點(diǎn)的時(shí)候，判斷當(dāng)前的那個(gè)值是不是為空，是否含有空格 // 如果為空或者有空格，用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');//下拉菜單，和你當(dāng)前事件不同的時(shí)候出發(fā)事件ele.onchange= function () {alert(123)} </script> </body> </html> onchange

用onchange事件實(shí)現(xiàn)的二級(jí)聯(lián)動(dòng)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>二級(jí)聯(lián)動(dòng)</title> </head> <body> <select name="" id="s1"><option value="">請(qǐng)選擇省份</option><option value="gansu">甘肅省</option><option value="hebei">河北省</option><option value="henan">河南省</option> </select> <select name="" id="c1"><option value="city">請(qǐng)選擇城市</option> </select> <script>var data = {'gansu':['蘭州市','天水市','武威市'],'hebei':['保定','石家莊'],'henan':['鄭州','開(kāi)封']}var ele_select = document.getElementById('s1');var ele_critys = document.getElementById('c1');//父親標(biāo)簽ele_select.onchange =function () { // alert(123) // console.log(this.value)var ele_provice = this.value;var citys = data[ele_provice];console.log(citys);//要在沒(méi)有添加之間清空，不然你點(diǎn)一次添加一次，點(diǎn)一次添加一次//方式一 // ele_critys.children.length=1; //不可行。。但是原理和方式二的一樣//方式二 // ele_critys.options.length = 1; //留一個(gè)，一般多的是設(shè)成0了for (var i =0;i<citys.length;i++) {//創(chuàng)建一個(gè)option標(biāo)簽var ele_option = document.createElement('option'); //<option></option>ele_option.innerHTML = citys[i]; //得到有文本的option標(biāo)簽ele_option.value = i + 1; //設(shè)置屬性值console.log(ele_option);ele_critys.appendChild(ele_option);}} </script></body> </html> 二級(jí)聯(lián)動(dòng)

八、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];//鼠標(biāo)指上去的事件ele_title.onmouseover = function () {this.nextElementSibling.classList.remove('hide');};//鼠標(biāo)移走的事件的兩種方式 // 方式一（推薦）ele_box.onmouseleave= function () {ele_title.nextElementSibling.classList.add('hide');}; // 方式二 // ele_title.onmouseout = function () { // this.nextElementSibling.classList.add('hide'); // } // 方式一和方式二的區(qū)別： // 不同點(diǎn) // onmouseout：不論鼠標(biāo)指針離開(kāi)被選元素還是任何子元素，都會(huì)觸發(fā)onmouseout事件 // onmouseleave：只有在鼠標(biāo)指針離開(kāi)被選元素時(shí)，才會(huì)觸發(fā)onmouseleave事件 // 相同點(diǎn)：都是鼠標(biāo)移走觸發(fā)事件 </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">點(diǎn)我添加</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 () {//創(chuàng)建一個(gè)li標(biāo)簽var ele_li = document.createElement('li'); // ele_li.innerHTML= 444;ele_li.innerText = Math.round(Math.random()*1000);ele_ul.appendChild(ele_li);//吧創(chuàng)建的li標(biāo)簽添加到ul標(biāo)簽ele_ul.addEventListener('click',function (e) {console.log(e.target); //當(dāng)前點(diǎn)擊的標(biāo)簽console.log(e.target.tagName);//拿到標(biāo)簽的名字 LIif (e.target.tagName=='LI'){console.log('ok'); // alert(ele_li.innerHTML)}})} </script> </html>

轉(zhuǎn)載于:https://www.cnblogs.com/TheLand/p/8556993.html

總結(jié)

以上是生活随笔為你收集整理的web前端----JavaScript的DOM（二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： 12.6 Nginx安装 12.7 默认
下一篇： Java中数组以及集合