JavaScript中怎么操作DOM

JavaScript中怎么操作 DOM，針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站設(shè)計、京山網(wǎng)絡(luò)推廣、小程序定制開發(fā)、京山網(wǎng)絡(luò)營銷、京山企業(yè)策劃、京山品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供京山建站搭建服務(wù)，24小時服務(wù)熱線：028-86922220，官方網(wǎng)址：muchs.cn

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é)點的引用，則它將移動到新位置?？纯词纠?/p>

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āng)，可能會導(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āng)，此方法可能導(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樹中的字符串。

<!-- beforebegin --> 
<div> 
  <!-- afterbegin --> 
  <p>Hello World</p> 
  <!-- beforeend --> 
</div> 
<!-- afterend -->

示例：

var list = document.querySelector('ul'); list.insertAdjacentHTML('afterbegin', '<li id="first-item">First</li>');

關(guān)于JavaScript中怎么操作 DOM問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

網(wǎng)站題目：JavaScript中怎么操作DOM
文章源于：http://muchs.cn/article2/ihsioc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、建站公司、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站、動態(tài)網(wǎng)站、小程序開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容