无需 jQuery 即可准备文档 - Javascript

在过去的几年当中，jQuery 一直是用来准备文档的最流行的框架之一。然而，新的浏览器 API 和 ECMAScript 规范的不断发展，使得原来需要 jQuery 来实现的功能可以使用原生 Javascript 来实现。现在，我们讲讨论如何使用 Javascript 来准备文档而不需要使用 jQuery。

使用原生 Javascript 准备文档

Javascript 在浏览器中本身就具有 DOM API，这使得我们可以方便地使用原生 Javascript 来准备文档。以下是一些常见的用法：

获取元素

要获取一个元素的引用，可以使用 document 对象的 getElementById、getElementsByClassName、getElementsByTagName 和 querySelector、querySelectorAll 方法：

// 通过id获取元素
const header = document.getElementById('header');

// 通过类名获取元素
const paragraphs = document.getElementsByClassName('paragraph');

// 通过标签名获取元素
const divs = document.getElementsByTagName('div');

// 通过css选择器获取元素
const mainContents = document.querySelectorAll('.main-content');

操作元素

要修改一个元素，可以使用元素对象的 innerHTML、innerText 和 setAttribute 方法：

// 设置元素的 innerHTML
header.innerHTML = 'Hello World!';

// 设置元素的 innerText（忽略标签）
header.innerText = 'Hello World!';

// 设置元素的属性
header.setAttribute('class', 'header');

创建元素

要创建一个元素，可以使用 document.createElement 方法：

// 创建一个段落元素
const paragraph = document.createElement('p');

// 设置元素的 innerHTML
paragraph.innerHTML = 'This is a paragraph.';

// 将元素插入到 DOM 中
document.body.appendChild(paragraph);

以上是使用原生 Javascript 来准备文档的一些常见用法。我们可以看到，原生 Javascript 并不比 jQuery 差，而且还更加灵活，因为原生 Javascript 可以与新的浏览器 API 和 ECMAScript 规范无缝集成，使我们更容易编写出优雅、高效的代码。

为什么要避免使用 jQuery

虽然 jQuery 可以让我们在早期的浏览器中使用新的 API 和规范，但在现代浏览器中，大多数 jQuery 方法已经有了相应的原生 API。

此外，由于 jQuery 是一个第三方的库，它的体积较大，可能会影响页面的加载速度。而且，由于 jQuery 并不是标准规范，如果以后出现了更好的替代品，我们可能需要花费时间将我们的代码从 jQuery 移植到新的库或原生 Javascript 实现。

结论

我们现在有很多原生的 Javascript API 和新的 ECMAScript 规范，它们可以代替大多数 jQuery 方法。因此，使用原生 Javascript 来准备文档可以提高效率、降低成本，并且更加优雅、灵活。所以，如果你正在编写一个新的项目，考虑使用原生 Javascript 来准备文档而不是 jQuery。