日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 DOM 或文檔對象模型是 web 頁面上所有對象的根。它表示文檔的結(jié)構(gòu)，并將頁面連接到編程語言。它的結(jié)構(gòu)是一個邏輯樹。每個分支結(jié)束于一個節(jié)點，每個節(jié)點包含子節(jié)點、對象。DOM API非常龐大，在本文中，咱們只討論比較常用有有用的那些API。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),七星企業(yè)網(wǎng)站建設(shè),七星品牌網(wǎng)站建設(shè),網(wǎng)站定制,七星網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,七星網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

document.querySelector & document.querySelectorAll

document.querySelector方法返回文檔中與指定選擇器或選擇器組匹配的第一個 html 元素。 如果找不到匹配項，則返回null。

document.querySelectorAll 方法返回與指定的選擇器組匹配的文檔中的元素列表 (使用深度優(yōu)先的先序遍歷文檔的節(jié)點)。返回的對象是 NodeList 。

 
 
 

  
  
  
// 返回第一個 ul 元素 
  
  
  
const list = document.querySelector('ul') 
  
  
  
// 返回所有類名為 info 或者 warning 的 div 元素 
  
  
  
const elements = document.querySelectorAll('div.info, div.warning'); 
 
 
 

document.createElement

在一個 HTML 文檔中， Document.createElement(tagName) 方法創(chuàng)建由 tagName 指定的 HTML 元素，或一個HTMLUnknownElement，如果tagName不被識別。

Node.appendChild

Node.appendChild()方法將節(jié)點添加到給定父節(jié)點的子節(jié)點列表的末尾。 請注意，如果給定的子代是文檔中現(xiàn)有節(jié)點的引用，則它將移動到新位置。看看示例：

 
 
 

  
  
  
let list = document.createElement('ul'); 
  
  
  
['北京', '上海', '深圳'].forEach(city => { 
  
  
  
  let listItem = document.createElement('li') 
  
  
  
  listItem.innerText = city 
  
  
  
  list.appendChild(listItem) 
  
  
  
}) 
  
  
  
document.body.appendChild(list) 
 
 
 

Node.insertBefore

此方法在給定的父節(jié)點內(nèi)的子引用節(jié)點之前插入給定節(jié)點(并返回插入的節(jié)點)

偽代碼如下所示：

• 北京
• 上海
• 深圳
• ↓

Node.insertBefore('廈門','北京')

• ↓
• 廈門
• 北京
• 上海
• 深圳

 
 
 

  
  
  
let list = document.querySelector('ul'); 
  
  
  
let firstCity = list.querySelector('ul > li'); 
  
  
  
let newCity = document.createElement('li'); 
  
  
  
newCity.textContent = 'San Francisco'; 
  
  
  
list.insertBefore(newCity, firstCity); 
 
 
 

Node.removeChild

Node.removeChild方法從DOM中刪除一個子節(jié)點并返回刪除的節(jié)點。 請注意，返回的節(jié)點不再是DOM的一部分，而是仍存在于內(nèi)存中。 如果處理不當，可能會導(dǎo)致內(nèi)存泄漏。

 
 
 

  
  
  
let list = document.querySelector('ul'); 
  
  
  
let firstItem = list.querySelector('li'); 
  
  
  
let removedItem = list.removeChild(firstItem); 
 
 
 

Node.replaceChild

此方法替換父節(jié)點中的子節(jié)點(并返回替換后的舊子節(jié)點)。請注意，如果處理不當，此方法可能導(dǎo)致與Node.removeChild類似的內(nèi)存泄漏問題。

 
 
 

  
  
  
let list = document.querySelector('ul'); 
  
  
  
let oldItem = list.querySelector('li'); 
  
  
  
let newItem = document.createElement('li'); 
  
  
  
newItem.innerHTML = '前端小智'; 
  
  
  
let replacedItem = list.replaceChild(newItem, oldItem); 
 
 
 

Node.cloneNode

Node.cloneNode(deep) 方法返回調(diào)用該方法的節(jié)點的一個副本，deep(可選)表示是否采用深度克隆,如果為true,則該節(jié)點的所有后代節(jié)點也都會被克隆,如果為false,則只克隆該節(jié)點本身.

 
 
 

  
  
  
let list = document.querySelector('ul'); 
  
  
  
let clone = list.cloneNode(); 
 
 
 

Element.getAttribute方法返回元素上給定屬性的值，反之亦然，Element.setAttribute設(shè)置給定元素上屬性的值。

 
 
 

  
  
  
let list = document.querySelector('ul'); 
  
  
  
let clone = list.cloneNode(); 
 
 
 

Element.hasAttribute / Element.removeAttribute

Element.hasAttribute方法檢查給定元素是否具有指定的屬性，返回值為boolean。 通過調(diào)用Element.removeAttribute方法，我們可以從元素中刪除具有給定名稱的屬性。

 
 
 

  
  
  
let list = document.querySelector('ul'); 
  
  
  
if (list.hasAttribute('id')) { 
  
  
  
    console.log('list has an id'); 
  
  
  
    list.removeAttribute('id'); 
  
  
  
}; 
 
 
 

Element.insertAdjacentHTML

element.insertAdjacentHTML(position, text) 將指定的文本解析為HTML或XML，并將結(jié)果節(jié)點插入到DOM樹中的指定位置。它不會重新解析它正在使用的元素，因此它不會破壞元素內(nèi)的現(xiàn)有元素。這避免了額外的序列化步驟，使其比直接innerHTML操作更快。

position是相對于元素的位置，并且必須是以下字符串之一：

beforebegin：元素自身的前面。

afterbegin：插入元素內(nèi)部的第一個子節(jié)點之前。

beforeend：插入元素內(nèi)部的最后一個子節(jié)點之后。

afterend：元素自身的后面。

text是要被解析為HTML或XML,并插入到DOM樹中的字符串。

 
 
 

  
  
  
 
  
  
  
 
  
  
  
   
  
  
  
  
Hello World