DOM

透過純粹的JavaScript，我們可以動態地為網頁上的元素應用樣式。 在網頁瀏覽器中，有哪些API可以達成這個目的呢？ 首先，其中最乾淨的方式之一就是為元素新增或移除類別，並使用CSS中的類別樣式。 const element = document.querySelector('#my-element') 您可以使用元素的classList屬性以及其add()和remove()方法： element.classList.add('myclass') element.classList.remove('myclass') 您也可以直接使用style屬性修改元素的每個CSS屬性，該屬性會引用元素的內嵌樣式。 例如，您可以這樣修改元素的顏色： element.style.color = '#fff' 您可以修改元素的邊框： element.style.border = '1px solid black' 您看到了color和border。您可以使用camelCase（駝峰式大小寫）來修改所有的CSS屬性，當CSS屬性名稱包含破折號時。 在這個 MDN 頁面中，您可以方便地找到一個翻譯表，其中列出了所有的CSS屬性。

如果你需要在 DOM 中使用原生 JavaScript 為 HTML 元素添加屬性，該怎麼辦呢？ 假設你已經使用 querySelector() 選中了一個元素： const button = document.querySelector('#mybutton') 你可以按照以下步驟為它附加屬性： 創建屬性 設置屬性的值 將屬性附加到元素上 例如： const attribute = document.createAttribute('id') attribute.value = `remove-${item.name}` button.setAttributeNode(attribute) 如果該元素尚不存在，則你需要先創建元素，然後創建屬性，再將屬性添加到元素上，最後再將元素添加到 DOM 中： const button = document.createElement('button') const attribute = document.createAttribute('id') attribute.value = `some-value` button.setAttributeNode(attribute) button.textContent = 'Click me' document.querySelector('.container').appendChild(button)

了解如何使用純 JavaScript 隱藏和重新顯示元素。 要如何使用純 JavaScript 隱藏 DOM 元素？ 每個元素都有一個 style 屬性，可以使用它來修改 CSS 的樣式屬性。 你可以將 display 屬性設置為 ’none’（就像在 CSS 中使用 display: none; 一樣）： element.style.display = 'none'; 若要再顯示它，將其設回 block 或 inline： element.style.display = 'block';

了解如何在React中引用DOM元素 React在构建应用程序时很擅长将DOM抽象化。但是，如果您想要访问React组件表示的DOM元素怎么办？也许您需要添加一个与DOM直接交互的库，比如图表库，或者需要调用一些DOM API或在一个元素上设置焦点。 无论原因如何，一个良好的实践是确保在直接访问DOM之前没有其他方法可以实现。 在组件的JSX中，您可以使用ref属性将DOM元素的引用赋给组件的属性： ref={el => this.someProperty = el} 例如，将其与一个button元素放在上下文中： <button ref={el => (this.button = el)} /> button是组件的一个属性，可以由组件的生命周期方法（或其他方法）用来与DOM进行交互： class SomeComponent extends Component { render() { return <button ref={el => (this.button = el)} /> } } 在函数组件中，机制是相同的，只是不使用this（因为它不指向组件实例），而是使用一个属性： function SomeComponent() { let button; return <button ref={el => (button = el)} />; }

如何在盡可能早的時間點運行 JavaScript，而不是更早地運行？ 您可以通過對 document 對象添加 DOMContentLoaded 事件的監聽器來實現： document.addEventListener('DOMContentLoaded', (event) => { // 事件發生時執行的代碼 }) 我通常不在事件回調中使用箭頭函數，因為無法訪問 this。 但在這種情況下，我們不需要 this，因為它始終是 document。在任何其他事件監聽器中，我都會使用常規函數： document.addEventListener('DOMContentLoaded', function(event) { // 事件發生時執行的代碼 }) 例如，如果我在一個循環中添加事件監聽器，且不確定事件觸發時 this 將會是什麼。

TL;DR: 使用 remove() 方法於 element.classList 當你有一個 DOM 元素的參考時，你可以使用 remove 方法來刪除一個類別： element.classList.remove('myclass') 你可以使用 add 方法將一個新的類別加入： element.classList.add('myclass') 實作細節：classList 不是一個陣列，而是一個 DOMTokenList 類型的集合。 你無法直接編輯 classList，因為它是一個唯讀屬性。然而，你可以使用它的方法來改變元素的類別。

給定一個 DOM 元素，如何移除它的所有子元素呢？ 給定一個 DOM 中的項目，使用 querySelector() 來識別它，像這樣： const item = document.querySelector('#itemId') 然後，要移除它的所有子元素，有幾種不同的解決方案。 最快的方法看起來是這樣的： item.innerHTML = '' 另一個建議的解法是創建一個循環，檢查是否定義了 firstChild 屬性（元素至少具有一個子元素），然後將其刪除： const item = document.querySelector('#itemId') while (item.firstChild) { item.removeChild(item.firstChild) } 當所有子元素都被移除時，循環結束。 根據我查看的大多數性能測試結果，第一種解法看起來是最快的解決方案。

给定一个 DOM 元素，如何更改它的值？ 更改 innerText 属性的值： element.innerText = 'x' 要查找该元素，可以结合使用 选择器 API： document.querySelector('#today .total')

當我們有一個 DOM 元素時，我們該如何用另一個元素來替換它呢？ 假設我們有一個 DOM 元素並且已經有了對它的引用（可能是使用 querySelector() 獲取的）。 要將其替換為另一個 DOM 元素，可以在第一個元素上調用 replaceWith() 方法，並將第二個元素作為參數傳遞： const el1 = document.querySelector(/\* ... \*/) const el2 = document.querySelector(/\* ... \*/) el1.replaceWith(el2) 由於 Edge < 17 和 IE11 不支援此方法，如果你計劃支援這些瀏覽器，則應使用 Babel 將其轉換為 ES5。 另一種解決方案是查找父元素並使用 replaceChild() 方法，該方法更早並且被所有瀏覽器支援： const el1 = document.querySelector(/\* ... \*/) const el2 = document.querySelector(/\* ... \*/) el1.parentNode.replaceChild(el2, el1)

你如何檢查你所擁有的特定 DOM 元素是否有指定的類別？ 使用 classList 物件提供的 contains 方法，寫法如下： element.classList.contains('myclass') 從技術上來說，classList 是一個符合 DOMTokenList 介面的物件，這意味著它實作了相關的方法與屬性。 你可以在 DOMTokenList MDN 頁面 上查看詳細的資訊。