Vanilla JavaScript中DOM操縱的基礎知識（無jQuery）

這篇文章，我們的現代JavaScript選集的一部分，探討了Vanilla JavaScript進行DOM操縱的功能，表明它是JQuery的強大替代品。 通過SitePoint Premium訪問完整的選集。

> jQuery通常是DOM操縱的首選，而Vanilla JavaScript提供了有效的本機方法。本文涵蓋了關鍵DOM操縱任務：查詢和修改DOM，管理類和屬性，事件處理和動畫。 最後，我們將構建一個輕巧的自定義DOM庫。

鑰匙要點：

。

• >和
提供有效的元素選擇；前者返回第一場比賽，而後者則以nodelist為單位。
• >使用.querySelector()方法和.querySelectorAll()>修改元素類和屬性，了解操縱DOM與HTML屬性的性能含義。
>使用
• 進行事件處理，啟用單個元素上各種類型的多種偵聽器，提供的靈活性比.classList>。 .setAttribute()>。
>通過創建輔助功能或迷你插曲來處理重複的DOM任務，提高性能和代碼清晰度，從而使用本機JavaScript複製JQuery的便利
• .addEventListener().onclick DOM操縱：查詢DOM
• >
（注意：本文提供了香草DOM API的高級概述。有關綜合詳細信息，請參閱Mozilla開發人員網絡。） 與CSS選擇器一起使用

>使用

>

這是第一個匹配元素。

檢查元素是否與選擇器匹配：

.querySelector()

檢索所有匹配元素：

<code class="language-javascript">const myElement = document.querySelector('#foo > div.bar');</code>

父元素中的查詢.matches()提高性能：

<code class="language-javascript">myElement.matches('div.bar') === true;</code>

>與.querySelectorAll()>，

等方法的實時收集不同，返回靜態節點符，該靜態節點不會動態更新。 這會影響性能並需要明確的迭代。

<code class="language-javascript">const myElements = document.querySelectorAll('.bar');</code>

與Nodelists合作

<code class="language-javascript">const myChildElement = myElement.querySelector('input[type="submit"]');</code>

getElementsByTagName().querySelectorAll()返回節點符，而不是數組。 將其轉換為標準數組方法的數組：

<code class="language-javascript">const myElement = document.querySelector('#foo > div.bar');</code>

> Nodelist屬性，例如children>，firstElementChild，nextElementSibling等，提供了對相關節點的方便訪問。 請記住，childNodes包括所有節點類型，而不僅僅是元素。 使用nodeType或instanceof檢查節點類型。

修改類和屬性

使用.classList>進行有效類操作的方法：

>

<code class="language-javascript">myElement.matches('div.bar') === true;</code>

>直接訪問和修改元素屬性：

>

<code class="language-javascript">const myElements = document.querySelectorAll('.bar');</code>

.getAttribute()，.setAttribute()和.removeAttribute()>直接修改HTML屬性，觸發瀏覽器Redraws。 很少使用這些，主要用於缺乏DOM屬性等效物的屬性，或者在克隆等操作中持續進行更改時。

添加CSS樣式

使用駱駝限制的屬性名稱應用樣式：

<code class="language-javascript">const myChildElement = myElement.querySelector('input[type="submit"]');</code>

.window.getComputedStyle()>檢索計算樣式值：

<code class="language-javascript">Array.from(myElements).forEach(doSomethingWithEachElement);</code>

>修改dom

>使用appendChild()>，insertBefore()和進行元素操縱。 removeChild()創建副本；使用布爾論點進行深層克隆。 用cloneNode()創建新元素，並使用createElement()>。 createTextNode()

元素屬性：innerhtml和textContent

>

和

分別管理HTML和純文本內容。 修改.innerHTML完全替換內容；使用.textContent的附加效率不如附加單個節點效率。 使用.innerHTML來優化多個附錄。 .innerHTML = DocumentFragment

聆聽事件

>首選

，而不是直接分配到事件屬性（例如

）的靈活性和多個偵聽器。 使用.addEventListener()訪問觸發元素。 onclick>防止默認操作； event.target停止事件冒泡。 可選的第三個參數為.preventDefault()>提供配置選項（.stopPropagation()，addEventListener()，capture）。 事件委託提高效率並處理動態添加的元素。 once passive

動畫

>使用

進行平滑的動畫，避免佈局thrash。

> requestAnimationFrame()

寫下自己的助手方法

> >創建自定義輔助功能以簡化DOM操縱，從而反映了jQuery的便利性。 此示例顯示了一個基本的自定義

函數：

> $

這允許在保留Vanilla JavaScript的好處的同時提供更多簡潔的代碼。

<code class="language-javascript">myElement.classList.add('foo');
myElement.classList.remove('bar');
myElement.classList.toggle('baz');</code>

結論

>（為簡潔而省略了FAQS部分，但是輸入中提供的信息已上面涵蓋。

以上是Vanilla JavaScript中DOM操縱的基礎知識（無jQuery）的詳細內容。更多資訊請關注PHP中文網其他相關文章！