經(jīng)過前一周的基礎(chǔ) JavaScript 學(xué)習(xí)，是不是對(duì)如何在網(wǎng)頁開發(fā)中使用它還是一頭霧水？
別著急，關(guān)于如何使用 JavaScript 讓我們的網(wǎng)頁更具有交互性和更容易實(shí)現(xiàn)我們想要的功能，今天，我們一起來看一看。
什么是 DOM？
首先一定要認(rèn)識(shí)大名鼎鼎的 DOM。
DOM（Document Object Model）即文檔對(duì)象模型，是瀏覽器用來解析 HTML 和 XML 文檔的編程接口。
它將文檔表示為一個(gè)結(jié)構(gòu)化的節(jié)點(diǎn)樹，每個(gè)節(jié)點(diǎn)代表文檔的一部分（例如元素、屬性、文本等）。
有了 DOM，使用 JavaScript 來動(dòng)態(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. 添加和刪除元素
想要?jiǎng)討B(tài)為網(wǎng)頁添加內(nèi)容，少不了要添加或刪除元素，那如何做呢？
就是使用appendChild方法來添加新的子元素，使用removeChild方法來刪除子元素。
接著來看例子。
// 創(chuàng)建一個(gè)新的元素 var newElement = document.createElement('div'); newElement.textContent = '我是新元素'; // 添加新的子元素 elementById.appendChild(newElement); // 刪除子元素 elementById.removeChild(newElement);
實(shí)際應(yīng)用場(chǎng)景
簡單舉兩個(gè)實(shí)際的例子來看看在實(shí)際的場(chǎng)景中，如何使用 DOM。
1. 動(dòng)態(tài)生成列表
假設(shè)有一個(gè)空的ul元素，可以使用 JavaScript 動(dòng)態(tài)生成列表項(xiàng)并添加到ul中。
<!-- 空的列表 --> <ul id="myList"></ul>
在執(zhí)行完下述代碼，會(huì)是什么樣呢？
var ulElement = document.getElementById('myList'); var items = ['項(xiàng)目1', '項(xiàng)目2', '項(xiàng)目3']; items.forEach(function (item) { var liElement = document.createElement('li'); liElement.textContent = item; ulElement.appendChild(liElement); });
就是下面這樣的代碼了。
<!-- 空的列表 --> <ul id="myList"> <li>項(xiàng)目1</li> <li>項(xiàng)目2</li> <li>項(xiàng)目3</li> </ul>
2. 表單驗(yàn)證
表單驗(yàn)證中，常在用戶提交表單之前，使用 JavaScript 來驗(yàn)證用戶輸入的內(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）即文檔對(duì)象模型，是瀏覽器用來解析 HTML 和 XML 文檔的編程接口。
?? 獲取元素常用的方法有getElementById、getElementsByClassName、getElementsByTagName和querySelector等。
?? 使用innerHTML或textContent屬性來修改元素的內(nèi)容。
該文章在 2024/10/22 12:07:51 編輯過
400 186 1886
