理解DOM操作基础
在web开发中，文档对象模型（dom）是html和xml文档的编程接口。它允许我们通过javascript访问和操作文档的内容、结构和样式。进行dom操作时，核心在于正确地选择（或称“查询”）到你想要操作的html元素。
1. document对象的重要性
所有DOM操作都始于document对象。它代表了整个HTML文档。例如，getElementById()、getElementsByTagName()等方法都属于document对象。初学者常犯的错误是直接调用getElementById()，而忽略了其前缀document.，导致函数未定义错误。因此，正确的调用方式应始终是document.getElementById()或document.getElementsByTagName()。
2. 元素选择方法
- document.getElementById(id): 这是最常用也是最高效的选择方法，通过元素的唯一ID来获取元素。一个HTML文档中，ID应该是唯一的。
- document.getElementsByTagName(tagName): 通过标签名获取元素集合（HTMLCollection）。它返回的是一个类数组对象，即使只有一个元素，也需要通过索引（如[0]）来访问。
- document.querySelector(selector) / document.querySelectorAll(selector): 更现代且强大的选择方法，允许使用CSS选择器来选择元素。querySelector返回第一个匹配的元素，querySelectorAll返回所有匹配的元素（NodeList）。
获取指定元素内容的标准方法
为了方便和准确地获取HTML元素的内容，最佳实践是为目标元素赋予一个唯一的ID。
立即学习“Java免费学习笔记（深入）”；
1. 为目标元素添加ID（最佳实践）
假设我们有一个元素，其内容需要被提取。为了便于JavaScript访问，我们应该给它一个ID，例如(2)。
2. 通过ID获取元素并提取内容
一旦元素有了ID，我们就可以使用document.getElementById()来获取它，并通过其innerHTML属性来提取其包含的HTML或文本内容。
// 获取ID为 "theSpan" 的span元素的内容
const spanContent = document.getElementById("theSpan").innerHTML;
// 此时，spanContent 变量将包含字符串 "(2)"innerHTML属性会返回元素内部的所有HTML内容（包括标签）。如果只需要纯文本内容，可以使用innerText属性。
将内容插入到另一元素
获取到所需内容后，下一步就是将其插入到页面上的另一个指定位置。
1. 获取目标插入点
同样，为了准确地将内容插入到某个元素中，该元素也应该有一个ID。例如，我们有一个
标签用于显示内容，可以给它一个ID：
。然后，使用document.getElementById()获取这个目标元素：
// 获取ID为 "placeSpanVAR" 的p元素
const targetParagraph = document.getElementById("placeSpanVAR");2. 赋值innerHTML
将之前提取到的内容赋值给目标元素的innerHTML属性，即可实现内容的插入。
// 将 spanContent 的值赋给 targetParagraph 的 innerHTML targetParagraph.innerHTML = spanContent;
重要提示： 请注意，这里是targetParagraph.innerHTML = spanContent;，而不是targetParagraph = spanContent;。前者是将内容赋值给DOM元素的属性，而后者是将DOM元素的引用变量targetParagraph重新赋值为一个字符串，这会导致targetParagraph不再指向DOM元素，从而无法更新页面显示。
完整示例代码
下面是一个完整的HTML和JavaScript示例，演示了如何获取元素的内容并将其插入到 元素中： 在上述代码中，当页面加载完成后（DOMContentLoaded事件触发），updateContent函数会被执行。它会找到ID为theSpan的元素，提取其内容"(2)"，然后将其赋给ID为placeSpanVAR的 元素的innerHTML，最终在页面上显示"(2)"。
(2)
注意事项与最佳实践
