Modern JavaScript has replaced jQuery, and can efficiently operate DOM through native APIs. 1. Use document.querySelector() and querySelectorAll() to select elements to support complex selectors; 2. Use event delegates to listen to events in the parent element and use e.target.matches() to judge the target to improve dynamic content performance; 3. Create elements through document.createElement(), or insert HTML with insertAdjacentHTML(); 4. Use setAttribute(), classList and style attributes to operate attributes, class names and styles respectively; 5. Native DOM traversal methods corresponding to jQuery such as parentNode, nextElementSibling, querySelector, etc.; 6. Call el.remove() to delete elements, which can be compatible with old browsers. ParentNode.removeChild(); 7. Use textContent to get or set text content, which is safer and more efficient. InnerHTML is used to insert HTML; 8. Use document.addEventListener('DOMContentLoaded') to wait for the DOM to load; 9. You can write $ and $$ functions to simulate jQuery selectors, and encapsulate $.on to implement event proxy; 10. Performance optimization suggestions include cache selectors, using event delegates, batch DOM operations, and DocumentFragment to reduce rearrangement. With its powerful API, modern JavaScript no longer needs to rely on jQuery, and its code is lighter, efficient and easy to maintain.

Modern web development has largely moved away from jQuery, especially as native JavaScript (ES6 ) and modern DOM APIs have become powerful and consistent across browsers. Advanced DOM manipulation without jQuery is not only possible—it's often faster, cleaner, and more maintained. Here's how to handle common and advanced tasks using vanilla JavaScript.

1. Selecting Elements Like jQuery

jQuery made element selection easy with its flexible $() syntax. Modern JavaScript offers equally expressive methods:

 // Single element (like $('selector').get(0) or $('selector')[0])
const el = document.querySelector('.my-class');

// Multiple elements (returns NodeList, like jQuery collection)
const els = document.querySelectorAll('.my-items');

// Match on data attributes, states, etc.
const activeLinks = document.querySelectorAll('a.active[data-toggle]');

? Tip : Use Array.from() or spread syntax to convert NodeList to an array for map , filter , etc.:

 const texts = [...document.querySelectorAll('li')].map(li => li.textContent);

2. Event Delegation Without jQuery

Instead of attaching events to each element, use event delegation on a parent—especially useful for dynamic content.

 document.addEventListener('click', (e) => {
  // Check if the clicked element matches a selector
  if (e.target.matches('button.delete')) {
    console.log('Deleting item:', e.target.dataset.id);
  }
});

? Works even for elements added later.
? Avoids memory leaks from orphaned event listeners.

3. Creating and Inserting Elements

jQuery: $(&#39;<div class="box">Content</div>&#39;).appendTo(&#39;#container&#39;);

Vanilla JS:

 const div = document.createElement('div');
div.className = 'box';
div.textContent = 'Content';

document.getElementById('container').appendChild(div);

Or use insertAdjacentHTML() for quick HTML injection:

 document.body.insertAdjacentHTML(&#39;beforeend&#39;, &#39;<div class="alert">New message</div>&#39;);

? Positions: 'beforebegin' , 'afterbegin' , 'beforeend' , 'afterend'

4. Updating Attributes, Classes, and Styles

Attributes

 el.setAttribute('data-id', 123);
el.getAttribute('href');
el.removeAttribute('disabled');

Classes (with classList )

 el.classList.add('active');
el.classList.remove('hidden');
el.classList.toggle('visible');
el.classList.contains('selected');

Inline Styles

 el.style.opacity = '0.5';
el.style.display = 'none';

// For multiple styles, consider using CSS classes instead
el.classList.add('fade-out');

5. Traversing the DOM

jQuery made traversal independent. Native equivalents:

Example:

 const parent = el.parentNode;
const firstChild = parent.firstElementChild;
const lastChild = parent.lastElementChild;

6. Remove Elements

jQuery: $('#item').remove();

Vanilla JS:

 el.remove(); // Modern browsers

For older browser support:

 if (el.parentNode) {
  el.parentNode.removeChild(el);
}

7. Working with HTML and Text Content

?? Use textContent when possible—it's safer and faster than innerHTML .

8. Waiting for DOM Ready (Without jQuery Ready)

jQuery: $(document).ready(fn)

Vanilla JS:

 document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM is ready');
});

Or just place your script at the end of <body> —simple and effective.

9. Custom Utility Function (Mini jQuery Substitute)

If you miss the convenience, write a lightweight wrapper:

 const $ = (selector, context = document) => context.querySelector(selector);
const $$ = (selector, context = document) => [...context.querySelectorAll(selector)];

// Usage:
const header = $('.header');
const links = $$('nav a');

// Add methods
$.on = (target, event, selector, handler) => {
  target.addEventListener(event, (e) => {
    if (e.target.matches(selector)) handler.call(e.target, e);
  });
};

// Use it:
$.on(document, 'click', '.btn', (e) => alert('Clicked!'));

This gives you jQuery-like syntax without the overhead.

10. Performance Tips

• Cache selectors when used repeatedly.
• Use event delegation for dynamic or large lists.
• Avoid frequently DOM reads/writes— batch changes when possible.
• Use DocumentFragment for inserting many elements:

 const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i ) {
  const li = document.createElement(&#39;li&#39;);
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
list.appendChild(fragment); // One reflow

Basically, modern JavaScript gives you everything jQuery offered—and more—without the extra library. With querySelector , classList , addEventListener , and insertAdjacentHTML , you can do advanced DOM manipulation cleanly and efficiently.

It's not complex, but it's easy to overlook how far vanilla JS has come.

The above is the detailed content of Advanced DOM Manipulation without jQuery. For more information, please follow other related articles on the PHP Chinese website!