當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
前端之JavaScript 补充
生活随笔
收集整理的這篇文章主要介紹了
前端之JavaScript 补充
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. BOMwindowlocation.href = "https://www.sogo.com"location.reload() // 重新加載當前頁
location.hrefDOMdocument1. 節點分為：文檔節點 document文本節點 標簽的文本屬性節點 id, class ...標簽節點 div,span, h1 ...2. 尋找節點1. 基本查找標簽名：document.getElementsByTagNameID： document.getElementByIDclass名: document.getElementsByClassName2. 間接查找我的上一個標簽： previousElementSibling我的下一個標簽： nextElementSibling我的父標簽： parentElement我的子標簽： children我的第一個子標簽：firstElementChild我的最后一個子標簽：lastElementChild2. 修改標簽屬性或樣式1. 修改文本信息ele.innerText 獲取文本節點的內容（包括子標簽的文本）ele.innerText="字符串" 修改標簽的文本信息2. 文檔內容（HTML內容）ele.innerHTML 獲取文檔內容ele.innerHTML=“<h1>好</h1>” 賦值HTML內容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樣式要轉成駝峰形式ele.style.backgroundColor="red"4. 屬性ele.attributes 獲取所有的屬性信息2. RegExp（正則） 1. 正則表達式不能加空格2. 當你設置了全局的g標志位，需要注意lastIndex --> 每一次匹配上之后會把lastIndex設置為下一位索引值3. undefined他幫你轉成"undefined"來做正則校驗 View Code
//創建節點對象ele_img,為img標簽元素 ele_img.src="meinv.jpg"; //標簽屬性的賦值操作，也可以通過原生JS的方式進行 ele_img.height="400"; ele_img.width="250";
//獲得一個父級節點ele_outer var ele_append=document.getElementsByClassName("append")[0];
//通過綁定事件形式觸發增加節點 ele_append.οnclick=function () {var ele_img=document.createElement("img");
//創建待插節點ele_img.src="meinv.jpg";ele_img.height="400";ele_img.width="250";ele_outer.appendChild(ele_img)//追加節點，會將節點追加在最后};
//獲得一個父級節點 var ele_p=document.getElementsByTagName("p")[0];
//獲得父級節點下的一個子節點，作為插入節點參考節點 var ele_append=document.getElementsByClassName("append")[0]; ele_append.onclick=function () {var ele_img=document.createElement("img");//創建待插節點ele_img.src="meinv.jpg";ele_img.height="400";ele_img.width="250";ele_outer.insertBefore(ele_img,ele_p)
//插入節點，語法順序為：（待插入節點，參考節點）};
//獲得父級節點下一個需要被替換的子節點對象 var ele_replace=document.getElementsByClassName("replace")[0]; ele_replace.onclick=function (){var ele_h1=document.createElement("h1"); //創建一個新替換對象ele_h1.innerText="美女系列";ele_outer.replaceChild(ele_h1,ele_p)//替換節點，語法順序為（新替換節點，舊被替換節點）}
?
一、節點操作
常用的節點主要為document和element，上一篇內容我們講述了節點的查找和節點屬性的操作，本節則主要列述節點本身的創建、增加、刪除、替換等操作。
1、創建節點
通過如下語法可以創建一個元素標簽，可以對創建的元素標簽進行賦值操作和屬性操作，應用實例如下：
var ele_img=document.createElement("img");//創建節點對象ele_img,為img標簽元素 ele_img.src="meinv.jpg"; //標簽屬性的賦值操作，也可以通過原生JS的方式進行 ele_img.height="400"; ele_img.width="250";
2、增加節點
增加節點操作首先需要找到一個父級節點，對父級節點進行增加節點操作，因為增加節點時需要有新的節點對象，即待被增加的節點標簽，故其通常和創建節點一起使用，應用實例如下：
var ele_outer=document.getElementsByClassName("outer")[0];//獲得一個父級節點ele_outer var ele_append=document.getElementsByClassName("append")[0];
//通過綁定事件形式觸發增加節點 ele_append.οnclick=function () {var ele_img=document.createElement("img");
//創建待插節點ele_img.src="meinv.jpg";ele_img.height="400";ele_img.width="250";ele_outer.appendChild(ele_img)//追加節點，會將節點追加在最后};
上述append節點的方式會把增加的節點追加在父級節點中所有子標簽的最后面，如果需要指定增加位置，需要用insertchild的方式，此時需要指定一個已存在的子標簽，實例如下：
var ele_outer=document.getElementsByClassName("outer")[0];//獲得一個父級節點 var ele_p=document.getElementsByTagName("p")[0];
//獲得父級節點下的一個子節點，作為插入節點參考節點 var ele_append=document.getElementsByClassName("append")[0]; ele_append.onclick=function () {var ele_img=document.createElement("img");//創建待插節點ele_img.src="meinv.jpg";ele_img.height="400";ele_img.width="250";ele_outer.insertBefore(ele_img,ele_p)
//插入節點，語法順序為：（待插入節點，參考節點）};
3、刪除節點
同樣刪除節點也是需要指定父級節點，通過移除其某個子級元素的方式將某個子級元素進行刪除，具體實例如下：
var ele_outer=document.getElementsByClassName("outer")[0]; //獲得一個父級節點對象 var ele_p=document.getElementsByTagName("p")[0];//獲得父級標簽下的一個子級節點對象 var ele_delete=document.getElementsByClassName("delete")[0]; ele_delete.onclick=function () {ele_outer.removeChild(ele_p) //刪除節點};4、節點替換
節點替換也是需要找到一個父級節點，對節點下的某本來存在的個子標簽進行替換，當然還需創建一個新替換標簽，替換掉需要被替換的元素，具體應用實例如下：
var ele_outer=document.getElementsByClassName("outer")[0];//獲得一個父級節點對象 var ele_p=document.getElementsByTagName("p")[0];//獲得父級節點下一個需要被替換的子節點對象 var ele_replace=document.getElementsByClassName("replace")[0]; ele_replace.onclick=function (){var ele_h1=document.createElement("h1"); //創建一個新替換對象ele_h1.innerText="美女系列";ele_outer.replaceChild(ele_h1,ele_p)//替換節點，語法順序為（新替換節點，舊被替換節點）}
5、復制節點
具體實例如下：
var ele_outer=document.getElementsByClassName("outer")[0]; var ele_copy=ele_outer .cloneNode();console.log(ele_copy) //結果即為outer父級標簽，不包含任何子標簽 var ele_copy=ele_outer .cloneNode(true);console.log(ele_copy)//結果為outer父級標簽，包含所有子標簽二、模態框實例
?1、事件委派
通常我們為了給某類標簽元素綁定事件時，我們都是逐一或者通過循環的方式給其進行綁定事件操作，但是這種方式會帶來一個問題是：后來插入的同類型標簽也xu要有這樣的事件時，之前綁定的事件的結果對后插入的同類元素無效，原因是程序在啟動時已經加載了之前綁定事件的代碼，那時后來新添加的元素并不在其中。
此問題就可以通過事件委派的方式進行解決，所謂事件委派就是通過一定形式對其父級標簽進行委派（綁定事件），其結果就是父級下的所有后代都可以執行事件的內容，可以通過條件限制使得只有滿足條件的后代元素才能執行事件內容。應用實例：
<!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>//無條件事件委派：父級節點ele_outer下的所有后代都會在被點擊時會執行alert，即使后來插入的數據var ele_outer=document.getElementsByClassName("outer")[0];ele_outer.addEventListener("click",function (event) {alert(event.target.innerText) //event.target等價于this });//條件事件委派：通過條件限制，對父級中的后代選擇性進行執行，如下只有classname="c2"的才會執行事件var ele_outer=document.getElementsByClassName("outer")[0];ele_outer.addEventListener("click",function (event) {if(event.target.className=="c2"){alert(event.target.innerText)}});//插入數據事件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>?
轉載于:https://www.cnblogs.com/jassin-du/p/8145440.html
總結
以上是生活随笔為你收集整理的前端之JavaScript 补充的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java多线程中的ThreadLocal
- 下一篇： Spring Boot Shiro 权限