在前端开发中，操作 DOM 是必不可少的一项技能。而在过去，很多开发者都会使用 JQuery 来简化 DOM 操作。然而，随着 ES6 的普及，我们现在可以使用更加现代化的方式来操作 DOM，而不必依赖于 JQuery。
ES6 的 DOM 操作方式
ES6 提供了一些新的语言特性，可以让我们更加方便地操作 DOM。下面是一些常用的 ES6 DOM 操作方式：
获取 DOM 元素
在 ES6 中，我们可以使用 querySelector 和 querySelectorAll 方法来获取 DOM 元素。
// 获取单个元素
const element = document.querySelector('#my-element');
// 获取多个元素
const elements = document.querySelectorAll('.my-elements');创建 DOM 元素
ES6 中，我们可以使用 createElement 方法来创建 DOM 元素。
const element = document.createElement('div');
element.className = 'my-element';
element.innerText = 'Hello World!';
document.body.appendChild(element);添加和删除 CSS 类
在 ES6 中，我们可以使用 classList 属性来添加和删除 CSS 类。
const element = document.querySelector('#my-element');
element.classList.add('active');
element.classList.remove('active');修改元素属性
ES6 中，我们可以使用 setAttribute 和 removeAttribute 方法来修改元素属性。
const element = document.querySelector('#my-element');
element.setAttribute('data-id', '123');
element.removeAttribute('data-id');获取和设置元素内容
在 ES6 中，我们可以使用 innerHTML 和 textContent 属性来获取和设置元素内容。
const element = document.querySelector('#my-element');
const content = element.innerHTML;
element.textContent = 'Hello World!';ES6 与 JQuery 的对比
ES6 提供的 DOM 操作方式与 JQuery 相比，具有以下优点：
- 更加现代化：ES6 是 JavaScript 的下一代标准，与时俱进，使用 ES6 的方式可以更好地适应现代化的前端开发。
- 更加轻量级：JQuery 是一个非常强大的库，但它的体积比较大，使用 ES6 的方式可以减少项目的体积和加载时间。
- 更加简洁明了：ES6 的语法更加简洁明了，代码可读性更高，可以让代码更加易于维护和修改。
总结
操作 DOM 是前端开发中必不可少的一项技能，而现在我们可以使用 ES6 的语法来操作 DOM，而不必依赖于 JQuery。ES6 提供了更加现代化、轻量级、简洁明了的方式来操作 DOM，可以让我们更加高效地开发前端项目。
示例代码
-- -------------------- ---- ------- -- ------ ----- ------- - -------------------------------------- -- ------ ----- -------- - ------------------------------------------ -- -- --- -- ----- ------- - ------------------------------ ----------------- - ------------- ----------------- - ------ -------- ----------------------------------- -- ----- --- - ----- ------- - -------------------------------------- -------------------------------- ----------------------------------- -- ------ ----- ------- - -------------------------------------- ------------------------------- ------- ----------------------------------- -- --------- ----- ------- - -------------------------------------- ----- ------- - ------------------ ------------------- - ------ --------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c461cdadd4f0e0ffedac12