JavaScript学习手册十三：HTML DOM——文档元素的操作（一）

### JavaScript 中 HTML DOM 文档元素操作的基础知识 #### 获取 DOM 元素 在 JavaScript 中，可以通过多种方式获取 DOM 元素。常用的方法包括 `document.getElementById`、`document.getElementsByClassName` 和 `document.querySelector` 等。这些方法允许开发者定位到特定的 HTML 元素以便进一步操作[^1]。 #### 修改元素内容 一旦获取了目标元素，就可以对其内容进行修改。例如，使用 `.innerHTML` 属性可以设置或更改指定元素内部的 HTML 结构；而 `.textContent` 则用于仅更新纯文本内容而不涉及任何标签解析[^2]。 ```javascript // 设置 innerHTML 示例 let paragraph = document.querySelector('p'); paragraph.innerHTML = '<strong>这是新的加粗文字</strong>'; // 使用 textContent 替代原有内容为简单字符串 paragraph.textContent = '这里是替换后的普通文本'; ``` #### 操作属性与样式 除了调整内容外，还可以轻松操控元素的各种属性及其CSS样式。对于单个样式的变更可以直接通过 style 对象完成；如果需要批量应用复杂样式，则推荐利用 classList API 或者直接切换整个 className 来实现更高效管理[^3]。 ```javascript // 改变颜色并增加边框宽度 const boxElement = document.getElementById('box'); boxElement.style.color = 'red'; boxElement.style.borderWidth = '5px'; // 添加/移除类名 boxElement.classList.add('highlighted'); boxElement.classList.remove('normal-state'); ``` #### 动态创建与插入新元素 当希望向现有页面添加全新组件时，先调用 `document.createElement()` 构建所需节点实例，随后借助 appendChild() 方法将其挂载至合适位置即可达成目的。 ```javascript function createAndAppendNewDiv(parentId){ const newDiv = document.createElement("DIV"); newDiv.className="my-new-div"; newDiv.innerText='我是新增加的小盒子!'; let parentContainer=document.getElementById(parentId); parentContainer.appendChild(newDiv); } createAndAppendNewDiv('main-container'); ``` #### 处理事件 最后不可忽略的是交互行为的支持 —— 绑定各种类型的监听机制来响应用户的动作反馈。这通常涉及到 addEventListener 函数的应用以及合理设计回调逻辑以满足实际需求场景下的功能扩展可能性。 ```javascript document.addEventListener('click', function(event) { console.log(`点击发生于：${event.target.tagName}`); }); ``` 以上便是围绕 JavaScript 下针对 HTML DOM 文档元素基本操作的一些核心要点概述说明。