整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
S一個重要功能就是操作DOM, 改變頁面顯示。
目錄：
1、基本概念
2、節(jié)點類型
3、節(jié)點關(guān)系
4、節(jié)點操作
DOM全稱為Document Object Model ，即文檔對象模型，是針對HTML和XML的一個API, 描繪了一個層次化的節(jié)點樹，可以添加、移除和修改頁面的某一部分。
DOM可以將任何HTML或XML文檔描繪成一個由多層節(jié)點構(gòu)成的結(jié)構(gòu)。
節(jié)點之間的關(guān)系構(gòu)成了層次，而所有頁面標記則表現(xiàn)為一個以特定節(jié)點為根節(jié)點的樹形結(jié)構(gòu)。以下面的HTML為例：
<html> <head> <title>Sample Page</title> </head> <body> <p>Hello world!</p> </body> </html>
將這個HTML文檔表示為一個層次結(jié)構(gòu)，如下圖
方框中黑體字代表節(jié)點類型。
文檔節(jié)點(圖中的 Document)是每個文檔的根節(jié)點，
這個例子中，它只有一個子節(jié)點，即 <html>元素，我們稱之為文檔元素。
文檔元素是文檔的最外層元素，文檔中的其他所有元素都包含在文檔元素中。
每個文檔只能有一個文檔元素。
在HTML頁面中，文檔元素始終都是<html>元素。
在XML中，沒有預(yù)定義的元素，任何元素都可能成為文檔元素。
每一段標記都可以通過樹中的一個節(jié)點來表示，總共有12種節(jié)點類型，這些類型都繼承自一個基類型。
并不是所有節(jié)點類型都受到Web瀏覽器的支持，最常用的就是元素、文本、文檔節(jié)點（下面數(shù)值常量中的1、3和9），我們只要關(guān)注這三種就可以了。
我們先看下所有的節(jié)點類型。
js 中所有節(jié)點類型都繼承自Node類型，因此都共享著相同的基本屬性和方法。
每個節(jié)點都有nodeType屬性，用于表明節(jié)點的類型。
nodeType有12個數(shù)值常量，任何類型必居其一。
各節(jié)點類型可能的子節(jié)點類型
通過比較上面這些常量，可以確定節(jié)點類型：
if (someNode.nodeType == 1) {
alert("Node is an element.");
}
把文檔樹比喻成家譜。（如下圖，某個節(jié)點可以通過屬性訪問其他節(jié)點）
每個節(jié)點有一個childNodes屬性，其中保存著一個NodeList對象（類數(shù)組對象，但不是Array的實例），它是基于DOM結(jié)構(gòu)動態(tài)查詢的結(jié)果。
可通過方括號，也可通過item() 方法來訪問NodeList中的節(jié)點。例子：
// 訪問 NodeList對象中的節(jié)點 var firstChild = someNode.childNodes[0]; var secondChild = someNode.childNodes.item(1); var count = someNode.childNodes.length;
在反映這些關(guān)系的所有屬性中，childNodes屬性更方便一些，因為只須使用簡單的關(guān)系指針，就可以通過它訪問文檔樹中的任何節(jié)點。
因為關(guān)系指針是只讀的，所以DOM提供了一些操作節(jié)點的方法。
主要是 添加、插入、替換、移除，我們分別介紹。
1、末尾添加一個節(jié)點
這是我們最常用的操作，appendChild()，用于向childNodes列表的末尾添加一個節(jié)點。
添加節(jié)點后，childNodes的新增節(jié)點、父節(jié)點及以前的最后一個子節(jié)點的關(guān)系指針都會相應(yīng)的得到更新。更新完成后，appendChild()返回新增的節(jié)點。
// appendChild() var returnedNode = someNode.appendChild(newNode); alert(returnedNode == newNode); // true alert(someNode.lastChild == newNode); // true
如果傳入到appendChild()中的節(jié)點已經(jīng)是文檔的一部分，那結(jié)果就是將該節(jié)點從原來的位置轉(zhuǎn)移到新位置。
2、插入節(jié)點
如果要把節(jié)點插入到 childNodes 列表中某個特定的位置上，用insertBefore(要插入的節(jié)點，作為參照的節(jié)點)。
插入節(jié)點后，被插入的節(jié)點會變成參照節(jié)點的前一個同胞節(jié)點（previousSibling），同時被方法返回。
如果參照節(jié)點是null, 則 insertBefore()與appendChild()執(zhí)行相同的操作。
// insertBefore() // 插入后成為最后一個子節(jié)點 returnedNode = someNode.insertBefore(newNode, null); alert(newNode == someNode.lastChild); // true // 插入后成為第一個子節(jié)點 var returnedNode = someNode.insertBefore(newNode, someNode.firstChild); alert(returnedNode == newNode); //true alert(newNode == someNode.firstChild); //true // 插入到最后一個子節(jié)點的前面 returnedNode = someNode.insertBefore(newNode, someNode.lastChild); alert(newNode==someNode.childNodes[someNode.childNodes.length-2]); //true
3、替換節(jié)點
如果要替換節(jié)點，用 replaceChild(要插入的節(jié)點，要替換的節(jié)點)
要替換的節(jié)點將由這個方法返回并從文檔樹中被移除，同時由要插入的節(jié)點占據(jù)其位置。
// 替換節(jié)點 replaceChild() // 替換第一個子節(jié)點 var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);
4、移除節(jié)點
移除節(jié)點用 removeChild(移除的節(jié)點)。
被移除的節(jié)點成為方法的返回值。
// 移除節(jié)點 removeChild() // 移除第一個節(jié)點 var formerFirstChild = someNode.removeChild(someNode.firstChild);
移除的節(jié)點仍然為文檔所有，不過在文檔中已經(jīng)沒有了自己的位置。
前面介紹的四個方法操作的都是某個節(jié)點的子節(jié)點，也就是說，要使用這幾個方法必須先取得父節(jié)點（使用parentNode屬性）。
5、其他方法
cloneNode()，接受一個布爾值參數(shù)，表示是否執(zhí)行深復(fù)制。
true, 執(zhí)行深復(fù)制，也就是復(fù)制節(jié)點及其整個子節(jié)點數(shù)。
false, 執(zhí)行淺復(fù)制，即只復(fù)制節(jié)點本身。
返回的節(jié)點副本屬于文檔所有，但沒有指定父節(jié)點。
因此，這個節(jié)點副本就成為“孤兒”，除非通過 appendChild(), insertBefore()或replaceChild()將它添加到文檔中。
下一篇中，我們詳解 常用到的 document, element, text 三種節(jié)點類型，并結(jié)合節(jié)點操作，介紹幾個常用的示例。
所有內(nèi)置的JavaScript對象
所有瀏覽器對象
所有HTML DOM對象
JavaScript 對象參考手冊
參考手冊描述了每個對象的屬性和方法，并提供了在線實例。
Array 對象
Boolean 對象
Date 對象
Math 對象
Number 對象
String 對象
RegExp 對象
全局屬性和函數(shù)
Browser 對象參考手冊
參考手冊描述了每個對象的屬性和方法，并提供了在線實例。
Window 對象
Navigator 對象
Screen 對象
History 對象
Location 對象
HTML DOM 參考手冊
參考手冊描述了 HTML DOM 的屬性和方法，并提供在線實例。
HTML Document
HTML Element
HTML Attributes
HTML Events
HTML DOM 元素對象參考手冊
參考手冊描述了每個對象的屬性和方法，并提供了在線實例。
Anchor 對象
Area 對象
Base 對象
Body 對象
Button 對象
Form 對象
Frame/IFrame 對象
Frameset 對象
Image 對象
Input Button 對象
Input Checkbox 對象
Input File 對象
Input Hidden 對象
Input Password 對象
Input Radio 對象
Input Reset 對象
Input Submit 對象
Input Text 對象
Link 對象
Meta 對象
Object 對象
Option 對象
Select 對象
Style 對象
Table 對象
td / th 對象
tr 對象
Textarea 對象
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
在前端開發(fā)的世界里，JavaScript如同魔法師手中的魔杖，而DOM（Document Object Model）則是施展魔法的舞臺。掌握DOM，意味著能夠動態(tài)地改變網(wǎng)頁的結(jié)構(gòu)、樣式和行為，為用戶帶來豐富的交互體驗。本文旨在帶你深入了解DOM，從其基本概念出發(fā)，直至實戰(zhàn)應(yīng)用，幫助你成為前端領(lǐng)域的“魔法師”。
DOM是一種樹狀結(jié)構(gòu)模型，用于表示HTML或XML文檔的結(jié)構(gòu)。它將文檔視為一個由節(jié)點組成的樹，每個節(jié)點都是一個對象，可以是元素節(jié)點、屬性節(jié)點、文本節(jié)點等。DOM允許JavaScript讀取和修改頁面的內(nèi)容和布局。
// 獲取元素節(jié)點
const element = document.getElementById('myElement');
// 修改內(nèi)容
element.textContent = 'Hello, DOM!';
DOM樹的根節(jié)點通常是<html>元素，下面掛載著<head>和<body>等子節(jié)點。每個節(jié)點都有自己的屬性和方法，如appendChild()、removeChild()等，用于操作DOM結(jié)構(gòu)。
假設(shè)我們要在用戶滾動頁面時動態(tài)加載更多數(shù)據(jù)。
window.addEventListener('scroll', function() {
if (window.scrollY + window.innerHeight >= document.body.scrollHeight) {
loadMoreData();
}
});
function loadMoreData() {
fetch('/api/data')
.then(response => response.json())
.then(data => {
data.forEach(item => {
const newNode = document.createElement('div');
newNode.textContent = item.title;
document.getElementById('content').appendChild(newNode);
});
});
}
const fragment = document.createDocumentFragment();
data.forEach(item => {
const newNode = document.createElement('div');
newNode.textContent = item.title;
fragment.appendChild(newNode);
});
document.getElementById('content').appendChild(fragment);
使用ID選擇器最快，其次是類選擇器，避免使用過于復(fù)雜的選擇器鏈。
DOM作為JavaScript與HTML文檔交互的橋梁，其重要性不言而喻。掌握DOM，意味著能夠靈活地控制網(wǎng)頁的表現(xiàn)，提升用戶體驗。隨著Web組件、Shadow DOM等新技術(shù)的出現(xiàn)，DOM的未來充滿無限可能，期待你在前端領(lǐng)域施展更多的魔法，創(chuàng)造更多精彩的應(yīng)用。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
