使用 ES6 代替 JQuery 操作 DOM

在前端开发中，操作 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，可以让我们更加高效地开发前端项目。

示例代码

// 获取单个元素
const element = document.querySelector('#my-element');

// 获取多个元素
const elements = document.querySelectorAll('.my-elements');

// 创建 DOM 元素
const element = document.createElement('div');
element.className = 'my-element';
element.innerText = 'Hello World!';
document.body.appendChild(element);

// 添加和删除 CSS 类
const element = document.querySelector('#my-element');
element.classList.add('active');
element.classList.remove('active');

// 修改元素属性
const element = document.querySelector('#my-element');
element.setAttribute('data-id', '123');
element.removeAttribute('data-id');

// 获取和设置元素内容
const element = document.querySelector('#my-element');
const content = element.innerHTML;
element.textContent = 'Hello World!';

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c461cdadd4f0e0ffedac12