JavaScript DOM操作：元素获取与修改完全指南

"这篇学习笔记主要探讨了JavaScript中操作页面元素的方法，包括获取元素、添加、修改和删除元素。通过DOM操作，可以实现对网页内容、结构和样式的动态改变。文章特别提到了innerText和innerHTML两个属性的使用，并举例说明它们的区别。" 在JavaScript中，DOM（Document Object Model）是一种标准，用于表示HTML或XML文档的结构，并提供了一种与浏览器无关的方式来访问和操作这些文档的元素。以下是对标题和描述中涉及知识点的详细说明： 1. 获取元素 使用`document.querySelector()`或`document.getElementById()`可以获取页面上的特定元素。`querySelector()`接收一个CSS选择器作为参数，返回匹配该选择器的第一个元素。`getElementById()`则根据指定的ID查找元素。 2. 添加元素 添加元素通常涉及创建新的HTML元素并将其插入到DOM树中。例如，可以使用`document.createElement()`创建新元素，然后使用`appendChild()`或`insertBefore()`方法将它添加到已有的父元素中。 3. 修改元素 - innerText: `element.innerText`属性用于获取或设置元素的文本内容，不包括HTML标签。当设置值时，所有HTML标签都会被忽略。例如，在示例中，按钮点击后会更新div的内容为当前日期。 - innerHTML: `element.innerHTML`则包含元素内的所有HTML代码，包括标签、样式和文本。在修改innerHTML时，可以插入完整的HTML结构。 4. 删除元素 删除元素常用的方法是`element.remove()`，它会从DOM中移除指定的元素。 5. innerText与innerHTML的区别 - innerText: 当设置元素的innerText时，所有HTML标签都将被忽略，只保留纯文本内容。在示例中，设置`<div>`的innerText为`<strong>加粗</strong>`，结果只会显示文本"加粗"，而不进行加粗处理。 - innerHTML: 相反，innerHTML不仅包含文本，还包含HTML标签。如果设置一个元素的innerHTML为`<strong>加粗</strong>`，浏览器会解析这个标签，使得内容实际显示为加粗。 6. 日期操作 示例中还涉及到了日期的处理。通过`new Date()`创建一个新的日期对象，然后可以通过`getFullYear()`、`getMonth()+1`（月份从0开始，所以加1）、`getDate()`和`getDay()`获取年、月、日和星期几。`getDay()`返回的是0（周日）到6（周六）的数字，可以通过数组映射为中文的星期。 JavaScript提供了强大的DOM操作能力，通过理解并熟练运用这些知识点，开发者可以实现丰富的交互式网页功能。