DOM讓JavaScript可以對文檔中的標簽、屬性、內容等進行訪增刪改操作

示例 HTML 文檔

首先，我們有一個簡單的 HTML 文件?index.html，內容如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作示例</title>
</head><body><div id="main"><p id="paragraph">這是一個段落。</p><ul id="list"><li>列表項 1</li><li>列表項 2</li></ul></div><script src="script.js"></script>
</body></html>

增（創建并添加元素）

在?script.js?文件中，我們可以使用以下代碼創建新元素并添加到文檔中：

// 創建一個新的段落元素
const newParagraph = document.createElement('p');
// 設置新段落的文本內容
newParagraph.textContent = '這是新創建的段落。';// 獲取主容器元素
const mainDiv = document.getElementById('main');
// 將新段落添加到主容器中
mainDiv.appendChild(newParagraph);// 創建一個新的列表項并添加到列表中
const newListItem = document.createElement('li');
newListItem.textContent = '新列表項';
const list = document.getElementById('list');
list.appendChild(newListItem);

查（查找元素）

// 通過 ID 查找元素
const paragraph = document.getElementById('paragraph');
console.log(paragraph.textContent);// 通過標簽名查找元素
const listItems = document.getElementsByTagName('li');
for (let i = 0; i < listItems.length; i++) {console.log(listItems[i].textContent);
}// 通過類名查找元素
// 假設 HTML 中有元素添加了類名 "example-class"
// const elementsWithClass = document.getElementsByClassName('example-class');// 通過選擇器查找元素
const firstListItem = document.querySelector('ul li');
console.log(firstListItem.textContent);

刪（移除元素）

// 獲取要移除的元素
const paragraphToRemove = document.getElementById('paragraph');
// 獲取其父元素
const parentDiv = paragraphToRemove.parentNode;
// 從父元素中移除該元素
parentDiv.removeChild(paragraphToRemove);// 也可以直接使用 remove() 方法（現代瀏覽器支持）
const listItemToRemove = document.querySelector('ul li');
listItemToRemove.remove();

改（修改元素內容和屬性）

// 修改元素的文本內容
const paragraphToModify = document.getElementById('paragraph');
paragraphToModify.textContent = '這是修改后的段落內容。';// 修改元素的 HTML 內容
paragraphToModify.innerHTML = '<strong>這是使用 innerHTML 修改的內容。</strong>';// 修改元素的屬性
const img = document.createElement('img');
img.src = 'example.jpg';
img.alt = '示例圖片';
document.body.appendChild(img);// 修改元素的類名
paragraphToModify.classList.add('new-class');
paragraphToModify.classList.remove('old-class');

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/895455.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/895455.shtml
英文地址，請注明出處：http://en.pswp.cn/news/895455.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！