The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery)

This article, part of our Modern JavaScript anthology, explores vanilla JavaScript's capabilities for DOM manipulation, demonstrating that it's a robust alternative to jQuery. Access the complete anthology via SitePoint Premium.

While jQuery is often the go-to for DOM manipulation, vanilla JavaScript offers efficient native methods. This article covers key DOM manipulation tasks: querying and modifying the DOM, managing classes and attributes, event handling, and animation. Finally, we'll build a lightweight custom DOM library.

Key Takeaways:

• Vanilla JavaScript provides powerful DOM manipulation tools, especially relevant with diminishing IE support.
• .querySelector() and .querySelectorAll() offer efficient element selection; the former returns the first match, while the latter returns all matches as a NodeList.
• Modify element classes and attributes directly using .classList methods and .setAttribute(), understanding the performance implications of manipulating the DOM versus HTML attributes.
• Use .addEventListener() for event handling, enabling multiple listeners of various types on a single element, offering more flexibility than .onclick.
• Improve performance and code clarity by creating helper functions or mini-libraries to handle repetitive DOM tasks, replicating jQuery's convenience using native JavaScript.

DOM Manipulation: Querying the DOM

(Note: This article provides a high-level overview of the Vanilla DOM API. For comprehensive details, refer to the Mozilla Developer Network.)

Use .querySelector() with CSS selectors to target elements:

const myElement = document.querySelector('#foo > div.bar');

This selects the first matching element. .matches() checks if an element matches a selector:

myElement.matches('div.bar') === true;

.querySelectorAll() retrieves all matching elements:

const myElements = document.querySelectorAll('.bar');

Querying within a parent element improves performance:

const myChildElement = myElement.querySelector('input[type="submit"]');

Unlike live collections from methods like getElementsByTagName(), .querySelectorAll() returns a static NodeList, which doesn't update dynamically. This impacts performance and requires explicit iteration.

Working with NodeLists

.querySelectorAll() returns a NodeList, not an array. Convert it to an array for standard array methods:

const myElement = document.querySelector('#foo > div.bar');

NodeList properties like children, firstElementChild, nextElementSibling, etc., provide convenient access to related nodes. Remember that childNodes includes all node types, not just elements. Use nodeType or instanceof to check node types.

Modifying Classes and Attributes

Use .classList methods for efficient class manipulation:

myElement.matches('div.bar') === true;

Access and modify element properties directly:

const myElements = document.querySelectorAll('.bar');

.getAttribute(), .setAttribute(), and .removeAttribute() directly modify HTML attributes, triggering browser redraws. Use these sparingly, primarily for attributes lacking DOM property equivalents or when persisting changes across operations like cloning.

Adding CSS Styles

Apply styles using camel-cased property names:

const myChildElement = myElement.querySelector('input[type="submit"]');

.window.getComputedStyle() retrieves computed style values:

Array.from(myElements).forEach(doSomethingWithEachElement);

Modifying the DOM

Use appendChild(), insertBefore(), and removeChild() for element manipulation. cloneNode() creates copies; use the boolean argument for deep cloning. Create new elements with createElement() and text nodes with createTextNode().

Element Properties: innerHTML and textContent

.innerHTML and .textContent manage HTML and plain text content, respectively. Modifying .innerHTML replaces content entirely; appending using .innerHTML = is less efficient than appending individual nodes. Use DocumentFragment to optimize multiple appends.

Listening to Events

Prefer .addEventListener() over directly assigning to event properties (e.g., onclick) for flexibility and multiple listeners. Use event.target to access the triggered element. .preventDefault() prevents default actions; .stopPropagation() stops event bubbling. The optional third argument to addEventListener() provides configuration options (capture, once, passive). Event delegation improves efficiency and handles dynamically added elements.

Animation

Use requestAnimationFrame() for smooth animations, avoiding layout thrashing.

Writing Your Own Helper Methods

Create custom helper functions to streamline DOM manipulation, mirroring jQuery's convenience. This example shows a basic custom $ function:

myElement.classList.add('foo');
myElement.classList.remove('bar');
myElement.classList.toggle('baz');

This allows for more concise code while retaining the benefits of vanilla JavaScript.

Conclusion

Vanilla JavaScript offers robust DOM manipulation capabilities, often eliminating the need for external libraries. While some aspects may require more verbose code than jQuery, creating custom helper functions can bridge this gap, enabling efficient and clean DOM manipulation. The choice depends on project needs and developer preference.

(FAQs section omitted for brevity, but the information provided in the input is already covered above.)

The above is the detailed content of The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery). For more information, please follow other related articles on the PHP Chinese website!