在前端开发中，我们经常需要操作 DOM 元素，例如改变一个按钮的点击事件或文本框的值。而以往我们可能会使用 jQuery 来完成这些任务，但现在随着 JavaScript 的发展，我们已经不再依赖于 jQuery 了。
改变元素的 onclick 事件
要改变一个元素的 onclick 事件，我们可以使用 JavaScript 中的 addEventListener() 函数。例如，如果我们有一个按钮元素，它原来的 onclick 事件是弹出一个对话框，我们希望改为控制台输出一段文字时，可以这样做：
const btn = document.getElementById('myButton');
btn.addEventListener('click', () => {
console.log('Hello, world!');
});上面的代码首先获取 id 为 'myButton' 的元素，然后使用 addEventListener() 函数添加一个 click 事件监听器。当按钮被点击时，该监听器将在控制台上打印 'Hello, world!'。
需要注意的是，如果你想在同一个元素上添加多个事件监听器，可以使用 addEventListener() 函数的第三个参数，将其设置为 true 表示在捕获阶段执行监听器，或者设置为 false 或省略表示在冒泡阶段执行监听器。
改变元素的 value 属性
要改变一个输入框或文本域的值，我们可以直接修改它的 value 属性。例如，如果我们有一个文本框元素，它原来的值是 'Hello, world!'，我们希望改为 'Goodbye, world!'，可以这样做：
const input = document.getElementById('myInput');
input.value = 'Goodbye, world!';上面的代码首先获取 id 为 'myInput' 的元素，然后修改其 value 属性为 'Goodbye, world!'。这样文本框中的内容就会被更新。
需要注意的是，如果你想动态地将输入框的值设置为用户输入的内容，可以通过监听输入事件来实现。例如，下面的示例代码将监听一个文本框的输入事件，并在每次输入结束后输出输入的内容：
const input = document.getElementById('myInput');
input.addEventListener('input', () => {
console.log(input.value);
});总结
在本文中，我们介绍了如何使用 JavaScript 来改变一个元素的 onclick 事件或 value 属性，从而不再依赖于 jQuery。需要注意的是，JavaScript 提供了更多 DOM 操作功能，我们可以通过学习 JavaScript 的基础知识和 API 掌握更多技巧，进行更灵活、高效的前端开发。
示例代码：https://codepen.io/chatgpt/pen/gOaNJWj
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14995