經(jīng)過前一周的基礎(chǔ) JavaScript 學(xué)習(xí)，是不是對如何在網(wǎng)頁開發(fā)中使用它還是一頭霧水？

別著急，關(guān)于如何使用 JavaScript 讓我們的網(wǎng)頁更具有交互性和更容易實現(xiàn)我們想要的功能，今天，我們一起來看一看。

什么是 DOM？

首先一定要認(rèn)識大名鼎鼎的 DOM。

DOM（Document Object Model）即文檔對象模型，是瀏覽器用來解析 HTML 和 XML 文檔的編程接口。

它將文檔表示為一個結(jié)構(gòu)化的節(jié)點樹，每個節(jié)點代表文檔的一部分（例如元素、屬性、文本等）。

有了 DOM，使用 JavaScript 來動態(tài)地訪問和操作文檔的內(nèi)容和結(jié)構(gòu)就非常方便。

DOM 的基本操作

1. 獲取元素

要操作 DOM，首先需要獲取我們想要操作的元素。

常用的方法有getElementById、getElementsByClassName、getElementsByTagName和querySelector等。

來看看如何使用。

<!-- 假如有這一段網(wǎng)頁代碼 --> <div id="myElement">myElement</div> <div class="myClass">myClass</div> <p ></p> 

// 通過ID獲取元素 var elementById = document.getElementById('myElement');  // 通過類名獲取元素 var elementsByClassName = document.getElementsByClassName('myClass');  // 通過標(biāo)簽名獲取元素 var elementsByTagName = document.getElementsByTagName('p');  // 通過CSS選擇器獲取元素 var elementBySelector = document.querySelector('.myClass'); 

2. 修改元素內(nèi)容

獲取到元素后，我們可以使用innerHTML或textContent屬性來修改元素的內(nèi)容。

// 修改元素的HTML內(nèi)容 elementById.innerHTML = '<p>新的內(nèi)容</p>';  // 修改元素的文本內(nèi)容 elementById.textContent = '新的文本內(nèi)容'; 

3. 修改元素屬性

可以使用setAttribute方法來修改元素的屬性，或者直接通過屬性名來修改。

比如，可以通過下述代碼修改class屬性。

// 使用setAttribute方法 elementById.setAttribute('class', 'newClass');  // 直接修改屬性 elementById.className = 'newClass'; 

4. 添加和刪除元素

想要動態(tài)為網(wǎng)頁添加內(nèi)容，少不了要添加或刪除元素，那如何做呢？

就是使用appendChild方法來添加新的子元素，使用removeChild方法來刪除子元素。

接著來看例子。

// 創(chuàng)建一個新的元素 var newElement = document.createElement('div'); newElement.textContent = '我是新元素';  // 添加新的子元素 elementById.appendChild(newElement);  // 刪除子元素 elementById.removeChild(newElement); 

實際應(yīng)用場景

簡單舉兩個實際的例子來看看在實際的場景中，如何使用 DOM。

1. 動態(tài)生成列表

假設(shè)有一個空的ul元素，可以使用 JavaScript 動態(tài)生成列表項并添加到ul中。

<!-- 空的列表 --> <ul id="myList"></ul> 

在執(zhí)行完下述代碼，會是什么樣呢？

var ulElement = document.getElementById('myList'); var items = ['項目1', '項目2', '項目3'];  items.forEach(function (item) {   var liElement = document.createElement('li');   liElement.textContent = item;   ulElement.appendChild(liElement); }); 

就是下面這樣的代碼了。

<!-- 空的列表 --> <ul id="myList">   <li>項目1</li>   <li>項目2</li>   <li>項目3</li> </ul> 

2. 表單驗證

表單驗證中，常在用戶提交表單之前，使用 JavaScript 來驗證用戶輸入的內(nèi)容，并給出相應(yīng)的提示。

<form id="myForm">   <input id="myInput" />   <!--省略其它代碼--> </form> 

var formElement = document.getElementById('myForm'); formElement.addEventListener('submit', function (event) {   var inputElement = document.getElementById('myInput');   if (inputElement.value === '') {     alert('輸入不能為空');     event.preventDefault(); // 阻止表單提交   } }); 

總結(jié)

• ?? DOM（Document Object Model）即文檔對象模型，是瀏覽器用來解析 HTML 和 XML 文檔的編程接口。

• ?? 獲取元素常用的方法有getElementById、getElementsByClassName、getElementsByTagName和querySelector等。

• ?? 使用innerHTML或textContent屬性來修改元素的內(nèi)容。