1. BOMwindowlocation.href = "https://www.sogo.com"location.reload() // 重新加載當(dāng)前頁 location.hrefDOMdocument1. 節(jié)點(diǎn)分為：文檔節(jié)點(diǎn) document文本節(jié)點(diǎn) 標(biāo)簽的文本屬性節(jié)點(diǎn) id, class ...標(biāo)簽節(jié)點(diǎn) div,span, h1 ...2. 尋找節(jié)點(diǎn)1. 基本查找標(biāo)簽名：document.getElementsByTagNameID： document.getElementByIDclass名: document.getElementsByClassName2. 間接查找我的上一個標(biāo)簽： previousElementSibling我的下一個標(biāo)簽： nextElementSibling我的父標(biāo)簽： parentElement我的子標(biāo)簽： children我的第一個子標(biāo)簽：firstElementChild我的最后一個子標(biāo)簽：lastElementChild2. 修改標(biāo)簽屬性或樣式1. 修改文本信息ele.innerText 獲取文本節(jié)點(diǎn)的內(nèi)容（包括子標(biāo)簽的文本）ele.innerText="字符串" 修改標(biāo)簽的文本信息2. 文檔內(nèi)容（HTML內(nèi)容）ele.innerHTML 獲取文檔內(nèi)容ele.innerHTML=“<h1>好</h1>” 賦值HTML內(nèi)容3. 修改樣式1. classListele.className 獲取所有的class類名（字符串類型）ele.classList 獲取所有的class類名ele.classList.contains(cls) 判斷有沒有某個classele.classList.add(cls) 添加一個class類名ele.classList.remove(cls) 刪除class類名ele.classList.toggle(cls) 切換（有就刪除，沒有就添加）2. ele.style.樣式=""注意：有中橫線的CSS樣式要轉(zhuǎn)成駝峰形式ele.style.backgroundColor="red"4. 屬性ele.attributes 獲取所有的屬性信息2. RegExp（正則） 1. 正則表達(dá)式不能加空格2. 當(dāng)你設(shè)置了全局的g標(biāo)志位，需要注意lastIndex --> 每一次匹配上之后會把lastIndex設(shè)置為下一位索引值3. undefined他幫你轉(zhuǎn)成"undefined"來做正則校驗(yàn) View Code

?

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

　　常用的節(jié)點(diǎn)主要為document和element，上一篇內(nèi)容我們講述了節(jié)點(diǎn)的查找和節(jié)點(diǎn)屬性的操作，本節(jié)則主要列述節(jié)點(diǎn)本身的創(chuàng)建、增加、刪除、替換等操作。

1、創(chuàng)建節(jié)點(diǎn)

　　通過如下語法可以創(chuàng)建一個元素標(biāo)簽，可以對創(chuàng)建的元素標(biāo)簽進(jìn)行賦值操作和屬性操作，應(yīng)用實(shí)例如下：

var ele_img=document.createElement("img");
//創(chuàng)建節(jié)點(diǎn)對象ele_img,為img標(biāo)簽元素 ele_img.src="meinv.jpg"; //標(biāo)簽屬性的賦值操作，也可以通過原生JS的方式進(jìn)行 ele_img.height="400"; ele_img.width="250";

2、增加節(jié)點(diǎn)

　　增加節(jié)點(diǎn)操作首先需要找到一個父級節(jié)點(diǎn)，對父級節(jié)點(diǎn)進(jìn)行增加節(jié)點(diǎn)操作，因?yàn)樵黾庸?jié)點(diǎn)時需要有新的節(jié)點(diǎn)對象，即待被增加的節(jié)點(diǎn)標(biāo)簽，故其通常和創(chuàng)建節(jié)點(diǎn)一起使用，應(yīng)用實(shí)例如下：

var ele_outer=document.getElementsByClassName("outer")[0];
//獲得一個父級節(jié)點(diǎn)ele_outer var ele_append=document.getElementsByClassName("append")[0];
//通過綁定事件形式觸發(fā)增加節(jié)點(diǎn) ele_append.οnclick=function () {var ele_img=document.createElement("img");
//創(chuàng)建待插節(jié)點(diǎn)ele_img.src="meinv.jpg";ele_img.height="400";ele_img.width="250";ele_outer.appendChild(ele_img)//追加節(jié)點(diǎn)，會將節(jié)點(diǎn)追加在最后};

上述append節(jié)點(diǎn)的方式會把增加的節(jié)點(diǎn)追加在父級節(jié)點(diǎn)中所有子標(biāo)簽的最后面，如果需要指定增加位置，需要用insertchild的方式，此時需要指定一個已存在的子標(biāo)簽，實(shí)例如下：

var ele_outer=document.getElementsByClassName("outer")[0];
//獲得一個父級節(jié)點(diǎn) var ele_p=document.getElementsByTagName("p")[0];
//獲得父級節(jié)點(diǎn)下的一個子節(jié)點(diǎn)，作為插入節(jié)點(diǎn)參考節(jié)點(diǎn) var ele_append=document.getElementsByClassName("append")[0]; ele_append.onclick=function () {var ele_img=document.createElement("img");//創(chuàng)建待插節(jié)點(diǎn)ele_img.src="meinv.jpg";ele_img.height="400";ele_img.width="250";ele_outer.insertBefore(ele_img,ele_p)
　　　　//插入節(jié)點(diǎn)，語法順序?yàn)?#xff1a;（待插入節(jié)點(diǎn)，參考節(jié)點(diǎn)）};

3、刪除節(jié)點(diǎn)

　　同樣刪除節(jié)點(diǎn)也是需要指定父級節(jié)點(diǎn)，通過移除其某個子級元素的方式將某個子級元素進(jìn)行刪除，具體實(shí)例如下：

var ele_outer=document.getElementsByClassName("outer")[0]; //獲得一個父級節(jié)點(diǎn)對象 var ele_p=document.getElementsByTagName("p")[0];//獲得父級標(biāo)簽下的一個子級節(jié)點(diǎn)對象 var ele_delete=document.getElementsByClassName("delete")[0]; ele_delete.onclick=function () {ele_outer.removeChild(ele_p) //刪除節(jié)點(diǎn)};

4、節(jié)點(diǎn)替換

　　節(jié)點(diǎn)替換也是需要找到一個父級節(jié)點(diǎn)，對節(jié)點(diǎn)下的某本來存在的個子標(biāo)簽進(jìn)行替換，當(dāng)然還需創(chuàng)建一個新替換標(biāo)簽，替換掉需要被替換的元素，具體應(yīng)用實(shí)例如下：

var ele_outer=document.getElementsByClassName("outer")[0];//獲得一個父級節(jié)點(diǎn)對象 var ele_p=document.getElementsByTagName("p")[0];
//獲得父級節(jié)點(diǎn)下一個需要被替換的子節(jié)點(diǎn)對象 var ele_replace=document.getElementsByClassName("replace")[0]; ele_replace.onclick=function (){var ele_h1=document.createElement("h1"); //創(chuàng)建一個新替換對象ele_h1.innerText="美女系列";ele_outer.replaceChild(ele_h1,ele_p)//替換節(jié)點(diǎn)，語法順序?yàn)?#xff08;新替換節(jié)點(diǎn)，舊被替換節(jié)點(diǎn)）}

5、復(fù)制節(jié)點(diǎn)

　　具體實(shí)例如下：

var ele_outer=document.getElementsByClassName("outer")[0]; var ele_copy=ele_outer .cloneNode();console.log(ele_copy) //結(jié)果即為outer父級標(biāo)簽，不包含任何子標(biāo)簽 var ele_copy=ele_outer .cloneNode(true);console.log(ele_copy)//結(jié)果為outer父級標(biāo)簽，包含所有子標(biāo)簽

二、模態(tài)框?qū)嵗?/span>

?1、事件委派

　　通常我們?yōu)榱私o某類標(biāo)簽元素綁定事件時，我們都是逐一或者通過循環(huán)的方式給其進(jìn)行綁定事件操作，但是這種方式會帶來一個問題是：后來插入的同類型標(biāo)簽也xu要有這樣的事件時，之前綁定的事件的結(jié)果對后插入的同類元素?zé)o效，原因是程序在啟動時已經(jīng)加載了之前綁定事件的代碼，那時后來新添加的元素并不在其中。

　　此問題就可以通過事件委派的方式進(jìn)行解決，所謂事件委派就是通過一定形式對其父級標(biāo)簽進(jìn)行委派（綁定事件），其結(jié)果就是父級下的所有后代都可以執(zhí)行事件的內(nèi)容，可以通過條件限制使得只有滿足條件的后代元素才能執(zhí)行事件內(nèi)容。應(yīng)用實(shí)例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <button class="add">添加</button> <ul class="outer"><li>111</li><li class="c2">222</li><li>333</li> </ul> <script>//無條件事件委派：父級節(jié)點(diǎn)ele_outer下的所有后代都會在被點(diǎn)擊時會執(zhí)行alert，即使后來插入的數(shù)據(jù)var ele_outer=document.getElementsByClassName("outer")[0];ele_outer.addEventListener("click",function (event) {alert(event.target.innerText) //event.target等價于this });//條件事件委派：通過條件限制，對父級中的后代選擇性進(jìn)行執(zhí)行，如下只有classname="c2"的才會執(zhí)行事件var ele_outer=document.getElementsByClassName("outer")[0];ele_outer.addEventListener("click",function (event) {if(event.target.className=="c2"){alert(event.target.innerText)}});//插入數(shù)據(jù)事件var ele_add=document.getElementsByClassName("add")[0];ele_add.onclick=function () {var ele_li=document.createElement("li");ele_li.innerText="444";ele_outer.appendChild(ele_li)} </script> </body> </html>

?

轉(zhuǎn)載于:https://www.cnblogs.com/jassin-du/p/8145440.html

總結(jié)

以上是生活随笔為你收集整理的前端之JavaScript 补充的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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