javascript dom

// 示例代码：使用 JavaScript 操作 DOM

// 获取 HTML 元素
const heading = document.getElementById('myHeading'); // 通过 ID 获取元素
console.log(heading);

// 修改元素内容
heading.innerHTML = '这是修改后的内容'; // 修改元素的 HTML 内容

// 添加 CSS 样式
heading.style.color = 'blue'; // 修改元素的颜色样式

// 创建新元素并添加到页面
const newParagraph = document.createElement('p'); // 创建一个新的 <p> 元素
newParagraph.textContent = '这是一个新段落'; // 设置新元素的文本内容
document.body.appendChild(newParagraph); // 将新元素添加到页面的 body 中

// 监听点击事件
heading.addEventListener('click', function() { // 给元素添加点击事件监听器
    alert('你点击了标题'); // 点击时弹出提示框
});

// 移除元素
function removeElement() {
    document.body.removeChild(newParagraph); // 从页面中移除指定的元素
}

解释说明：

1. 获取元素：document.getElementById 用于通过元素的 ID 获取 DOM 节点。
2. 修改内容：innerHTML 可以用来修改或读取元素的 HTML 内容，而 textContent 仅用于纯文本内容。
3. 修改样式：可以通过 style 属性直接修改元素的内联样式。
4. 创建和添加元素：document.createElement 用于创建新的 DOM 元素，appendChild 将其添加到指定位置。
5. 事件监听：addEventListener 可以为元素绑定事件处理程序，如点击事件。
6. 移除元素：removeChild 用于从 DOM 中移除指定的子节点。