To efficiently manipulate the DOM and handle events in JavaScript, use querySelector and querySelectorAll for selecting elements due to their flexibility with CSS selectors. Use textContent for safe text insertion and innerHTML when HTML parsing is necessary. Handle events using addEventListener for better flexibility, employing event delegation for dynamically added elements. Prefer class manipulation via classList over inline styles for maintainable styling changes, and use element.style.propertyName for direct style settings when needed.

When you're working with JavaScript and the DOM, knowing how to efficiently manipulate elements and handle events is key. Here's a practical roundup of common techniques and best practices for getting things done without unnecessary complexity.

Selecting Elements: Use What Fits

Selecting the right element is the first step in manipulating the DOM. querySelector and querySelectorAll are versatile and widely used because they accept CSS selectors:

• document.querySelector('.my-class') returns the first match.
• document.querySelectorAll('div > p') gives you a NodeList of all matching elements.

For simpler cases, older methods like getElementById or getElementsByClassName still work fine, but they’re less flexible than query selectors.

If you need an HTMLCollection that updates automatically when the DOM changes, stick with getElementsByTagName. Otherwise, prefer querySelectorAll for static results.

Modifying Content: Know the Difference Between Text and HTML

Once you've selected an element, you’ll often want to change its content. Two main properties do this:

• textContent: Safely inserts text. It doesn't parse HTML, so it’s faster and more secure.
• innerHTML: Parses strings as HTML. Use it when you need to insert markup, but be cautious — it can open up XSS vulnerabilities if not sanitized.

const box = document.querySelector('#message');
box.textContent = 'Hello <strong>there</strong>'; // Shows raw tags
box.innerHTML = 'Hello <strong>there</strong>';   // Renders bold text

Also useful:

• insertAdjacentHTML() for inserting HTML at specific positions relative to an element (like beforebegin, afterend).
• textContent.trim() to avoid leading/trailing whitespace issues.

Handling Events: Don’t Attach Inline

Avoid inline event handlers like onclick="doSomething()" in your HTML. Instead, use addEventListener for better separation of concerns and flexibility:

document.querySelector('button').addEventListener('click', function() {
  alert('Clicked!');
});

Some handy tips:

• You can attach multiple listeners to the same element and event type.
• Use optional { once: true } to auto-remove the listener after one trigger.
• For dynamically added elements, consider event delegation by listening on a parent and checking the target.

Example of event delegation:

document.querySelector('#parent').addEventListener('click', function(e) {
  if (e.target.matches('.dynamic-item')) {
    console.log('Item clicked:', e.target);
  }
});

Manipulating Styles and Classes: Prefer Class Changes Over Inline Styles

Directly setting styles via JavaScript works, but it's usually cleaner and easier to maintain if you toggle classes instead:

element.classList.add('highlight');
element.classList.remove('hidden');
element.classList.toggle('active');

Useful for:

• Animations triggered by class changes.
• Conditional styling based on state.

If you must set styles directly, use element.style.propertyName (camelCase), not hyphenated names:

element.style.backgroundColor = '#f0f0f0';

Remember that inline styles override CSS rules, which can make debugging harder later.

That covers the most commonly used JS techniques for DOM manipulation and event handling. These patterns will get you through most interactive tasks without needing extra libraries. There's more depth to each topic, but this should give you solid ground to build from.

The above is the detailed content of The ultimate JS roundup for DOM manipulation and events. For more information, please follow other related articles on the PHP Chinese website!