JavaScript >> Javascript 文檔 >  >> Tags >> DOM

如何更改 DOM

本文最初是為 DigitalOcean 編寫的 .

在了解 DOM 系列的前兩期中,我們學習瞭如何訪問 DOM 中的元素和如何遍歷 DOM。利用這些知識,開發人員可以使用類、標籤、id 和選擇器來查找 DOM 中的任何節點,並使用父、子和兄弟屬性來查找相關節點。

理解 DOM 的下一步是學習如何添加、更改、替換和刪除節點。待辦事項列表應用程序是 JavaScript 程序的一個實際示例,您需要能夠在其中創建、修改和刪除 DOM 中的元素。

在本文中,我們將學習如何創建新節點並將其插入 DOM、替換現有節點和刪除節點。

創建新節點

在靜態網站中,通過在 .html 中直接編寫 HTML 來將元素添加到頁面中 文件。在動態 Web 應用程序中,元素和文本通常使用 JavaScript 添加。 createElement()createTextNode() 方法用於在 DOM 中創建新節點。

屬性/方法 說明
createElement() 創建一個新的元素節點
createTextNode() 創建一個新的文本節點
node.textContent 獲取或設置元素節點的文本內容
node.innerHTML 獲取或設置元素的 HTML 內容

開闢新的基本index.html 使用的文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>
</html>

我們將使用 createElement()document 對象創建一個新的 p 元素。

const paragraph = document.createElement('p')

我們創建了一個新的 p 元素,我們可以在 Console 中測試 .

console.log(paragraph);
控制台
<p></p>

paragraph 變量輸出一個空的 p 元素,沒有任何文本就不是很有用。為了向元素添加文本,我們將設置 textContent 屬性。

paragraph.textContent = "I'm a brand new paragraph."
console.log(paragraph);
控制台
<p>I'm a brand new paragraph.</p>

createElement() 的組合 和 textContent 創建一個完整的元素節點。

另一種設置元素內容的方法是使用 innerHTML 屬性,它允許您向元素添加 HTML 和文本。

paragraph.innerHTML = "I'm a paragraph with <strong>bold</strong> text."

雖然這可行並且是向元素添加內容的常用方法,但使用 innerHTML 可能存在跨站點腳本 (XSS) 風險 方法,因為可以將內聯 JavaScript 添加到元素中。所以推薦使用textContent 相反,它會去除 HTML 標籤。

也可以使用 createTextNode() 創建一個文本節點 方法。

const text = document.createTextNode("I'm a new text node.")
console.log(text);
控制台
"I'm a new text node."

通過這些方法,我們創建了新的元素和文本節點,但在將它們插入文檔之前,它們在網站的前端是不可見的。

將節點插入 DOM

為了看到我們在前端創建的新文本節點和元素,我們需要將它們插入到 document . appendChild()insertBefore() 用於在父元素的開頭、中間或結尾添加項目,replaceChild() 用於用新節點替換舊節點。

屬性/方法 說明
node.appendChild() 添加一個節點作為父元素的最後一個子節點
node.insertBefore() 在指定兄弟節點之前插入一個節點到父元素中
node.replaceChild() 用新節點替換現有節點

讓我們用 HTML 創建一個簡單的待辦事項列表。

<ul>
  <li>Buy groceries</li>
  <li>Feed the cat</li>
  <li>Do laundry</li>
</ul>

當您在瀏覽器中加載頁面時,它將如下所示:

為了將新項目添加到待辦事項列表的末尾,我們必須先創建元素並向其添加文本,正如我們在“創建新節點”中所學到的那樣。

// To-do list ul element
const todoList = document.querySelector('ul')

// Create new to-do
const newTodo = document.createElement('li')
newTodo.textContent = 'Do homework'

現在我們有了新的待辦事項的完整元素,我們可以使用 appendChild() 將其添加到列表的末尾 .

// Add new todo to the end of the list
todoList.appendChild(newTodo)

可以看到新的li 元素已附加到 ul 的末尾 .

<ul>
  <li>Buy groceries</li>
  <li>Feed the cat</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

也許我們有更高優先級的待辦事項,我們想將它添加到列表的開頭。我們必須創建另一個元素,如 createElement() 只創建一個元素,不能重複使用。

// Create new to-do
const anotherTodo = document.createElement('li')
anotherTodo.textContent = 'Pay bills'

我們可以使用 insertBefore() 將它添加到列表的開頭 .這個方法有兩個參數——第一個是要添加的新子節點,第二個是緊跟新節點的兄弟節點。換句話說,您是在下一個兄弟節點之前插入新節點。

parentNode.insertBefore(newNode, nextSibling)

對於我們的待辦事項列表示例,我們將添加新的 anotherTodo 列表的第一個子元素之前的元素,當前是 Buy groceries 列表項。

// Add new to-do to the beginning of the list
todoList.insertBefore(anotherTodo, todoList.firstElementChild)
<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the cat</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

新節點已成功添加到列表的開頭。現在我們知道如何將節點添加到父元素。接下來我們可能想做的是用新節點替換現有節點。

我們將修改現有的待辦事項以演示如何替換節點。創建新元素的第一步保持不變。

const modifiedTodo = document.createElement('li')
modifiedTodo.textContent = 'Feed the dog'

喜歡 insertBefore() , replaceChild() 接受兩個參數 - 新節點和要替換的節點。

parentNode.replaceChild(newNode, oldNode)

我們將用修改後的待辦事項替換列表的第三個子元素。

// Replace existing to-do with modified to-do
todoList.replaceChild(modifiedTodo, todoList.children[2])
<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

appendChild() 的組合 , insertBefore() , 和 replaceChild() ,您可以在 DOM 中的任何位置插入節點和元素。

從 DOM 中移除節點

現在我們知道如何創建元素、將它們添加到 DOM 以及修改現有元素。最後一步是學習從 DOM 中刪除現有節點。可以使用 removeChild() 從父節點中刪除子節點 ,並且可以使用 remove() 刪除節點本身 .

方法 說明
node.removeChild() 移除子節點
node.remove() 移除節點

使用上面的待辦事項示例,我們希望在項目完成後刪除它們。如果您完成了作業,您可以刪除 Do homework item,恰好是列表的最後一個子項,具有 removeChild() .

todoList.removeChild(todoList.lastElementChild)
<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
</ul>

一個更簡單的方法是刪除節點本身,使用 remove() 方法直接在節點上。

// Remove second element child from todoList
todoList.children[1].remove()
<ul>
  <li>Pay bills</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
</ul>

removeChild() 之間 和 remove() ,您可以從 DOM 中刪除任何節點。您可能會看到從 DOM 中刪除子元素的另一種方法是設置 innerHTML 父元素的屬性為空字符串 ("" )。這不是首選方法,但您可能會看到它。

結論

在本教程中,我們學習瞭如何使用 JavaScript 創建新的節點和元素並將它們插入到 DOM 中,以及替換和刪除現有的節點和元素。

在了解 DOM 系列的這一點上,您知道如何訪問 DOM 中的任何元素、遍歷 DOM 中的任何節點以及修改 DOM 本身。您現在可以自信地使用 JavaScript 創建基本的前端 Web 應用程序了。


Tutorial JavaScript 教程
  1. Firebase – Vue 數據庫集成不起作用

  2. 使用 JavaScript 從數組中過濾唯一值

  3. 使用 Node.js 構建 JavaScript 命令行界面 (CLI)

  4. 從不輸入 TypeScript

  5. 轉義,特殊字符

  6. 你好,我的老朋友錯了

  7. 如何將參數傳遞給promise函數

  1. 如何將 python 聊天機器人集成到網站

  2. 動態創建元素的事件綁定?

  3. 在 Vercel 中設置 Namecheap 域

  4. 構建時間 CSS-in-JS:解釋

  5. 檢測 HTTP 或 HTTPS,然後在 JavaScript 中強制使用 HTTPS

  6. 會出什麼問題?如何處理 Angular 中的錯誤

  7. 為什麼在學習編碼時不能(也不應該)記住所有內容

  1. If-Else 或 Switch-Case:選擇哪一個?

  2. JavaScript 工具中的指標、日誌和跟踪

  3. JavaScript 中的數據結構和算法(雙向鍊錶)

  4. 將 Material UI CSS 框架添加到 React 應用程序