JavaScript 是一种基于对象和事件驱动的编程语言，它可以轻松地操作 HTML 元素，通过 JavaScript,我们可以在网页上实现动态效果、交互式功能以及数据处理等，本文将详细介绍如何使用 JavaScript 操作 HTML,包括创建和修改元素、操作 DOM 结构、事件监听与处理等。
创建和修改元素
1、1 创建元素
要使用 JavaScript 创建一个新元素，可以使用 createElement 方法，该方法接受一个参数，即要创建的元素的标签名，要创建一个 <div> 元素，可以使用以下代码：
var div = document.createElement('div');
1、2 修改元素属性
要修改元素的属性，可以使用 setAttribute 方法，该方法接受两个参数，第一个参数是要修改的属性名，第二个参数是新的属性值，要修改一个 <div> 元素的 id 属性，可以使用以下代码：
var div = document.getElementById('myDiv');
div.setAttribute('id', 'newDivId');
操作 DOM 结构
2、1 获取元素
要获取页面上的某个元素，可以使用 getElementById、getElementsByClassName、getElementsByTagName 等方法，这些方法分别接受一个参数，即要获取的元素的 ID、类名或标签名，要获取一个具有特定 ID 的 <div> 元素，可以使用以下代码：
var div = document.getElementById('myDiv');
2、2 添加和删除元素
要向页面中添加一个新元素，可以使用 createElement 方法创建一个新元素，然后将其添加到指定的位置，要从页面中删除一个元素，可以使用 removeChild 方法，要在页面中添加一个新的 <p> 元素，并将其添加到具有特定 ID 的 <div> 元素中，可以使用以下代码：
var newP = document.createElement('p');
newP.innerHTML = '这是一个新的段落。';
var div = document.getElementById('myDiv');
div.appendChild(newP);
要从页面中删除一个具有特定 ID 的 <p> 元素，可以使用以下代码：
var pToRemove = document.getElementById('pToRemove');
pToRemove.parentNode.removeChild(pToRemove);
事件监听与处理
3、1 为元素添加事件监听器
要为页面上的某个元素添加事件监听器，可以使用 addEventListener 方法，该方法接受三个参数：要监听的事件类型、事件触发时要执行的函数以及可选的配置对象，要为一个 <button> 元素添加一个点击事件监听器，可以使用以下代码：
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('按钮被点击了！');
});
3、2 移除事件监听器
要从页面上的某个元素移除事件监听器，可以使用 removeEventListener 方法，该方法接受三个参数：要移除的事件类型、事件触发时要执行的函数以及可选的配置对象，要从一个 <button> 元素移除一个点击事件监听器，可以使用以下代码：
var button = document.getElementById('myButton');
button.removeEventListener('click', function() {
alert('按钮被点击了！');
});
相关问题与解答：
Q1: 如何使用 JavaScript 将选中的文本替换为其他文本？
A1: 要使用 JavaScript 将选中的文本替换为其他文本，可以使用 window.getSelection() 方法获取选中的文本，然后使用 replaceSelection() 方法替换选中的文本，将选中的文本替换为 "已替换",可以使用以下代码：
function replaceSelectedText() {
var selectedText = window.getSelection().toString(); // 获取选中的文本
if (selectedText) { // 如果有选中的文本
document.execCommand('insertText', false, '已替换'); // 将选中的文本替换为 "已替换"
} else { // 如果没有选中的文本(即光标在页面上)
alert('请先选中一段文本！'); // 弹出提示框提示用户先选中一段文本
}
}
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/232501.html
微信扫一扫 