DOM操作：查找与属性设置

本文档主要介绍了DOM（Document Object Model）的一些基本操作方法，包括查找节点、遍历节点、获取和设置属性等。 DOM是Web页面的结构化表示，它允许程序和脚本动态更新、添加或删除HTML或XML文档中的元素、属性和文本。以下是对标题和描述中提到的DOM基本方法的详细说明： 1. **getElementById(id)**: 这个方法通过指定的ID来查找文档中的唯一元素。例如，`document.getElementById('myElement')`会返回ID为'myElement'的元素。 2. **getElementsByTagName(tagName)**: 此方法返回一个NodeList对象，包含了文档中所有指定标签名的元素。比如，`document.getElementsByTagName('p')`会返回所有`<p>`标签的元素集合。 3. **element.childNodes**: 这个属性返回一个NodeList，包含了元素的所有子节点，包括文本节点、注释节点等。可以通过索引访问，如`element.childNodes[0]`获取第一个子节点，`element.firstChild`和`element.lastChild`分别代表第一个和最后一个子节点。 4. **element.parentNode**: 提供了对当前元素的父节点的引用，可用于向上遍历DOM树。 5. **element.nextSibling** 和 **element.previousSibling**: 这两个属性分别指向当前元素的下一个兄弟节点和上一个兄弟节点，用于在同级节点之间移动。 6. **nodeName**: 返回节点的名称，对于元素节点，这通常是标签名，如`<a>`的`nodeName`是'a'。对于属性节点，它是属性的名字，对于文本节点，它是#text。 7. **nodeType**: 表示节点的类型，1表示元素节点，2表示属性节点，3表示文本节点。 8. **nodeValue**: 用于获取或设置节点的值。元素节点的`nodeValue`通常为null，属性节点的值为设置的属性值，文本节点的值为文本内容。 9. **hasChildNodes()**: 检查元素是否具有子节点，返回布尔值。 10. **tagName**: 获取或设置元素的标签名，与`nodeName`的区别在于`tagName`总是大写形式。 11. **创建新的元素和文本节点**: 可以使用`document.createElement()`创建新的元素，`document.createTextNode()`创建文本节点。 12. **setAttribute()**: 用于设置元素的属性，如`element.setAttribute('href', 'http://example.com')`将设置元素的`href`属性。 13. **getAttribute()**: 获取元素的属性值，如`element.getAttribute('class')`返回类名。 14. **innerHTML** 和 **innerText**: `innerHTML`用于获取或设置元素内部的HTML代码，而`innerText`获取或设置元素的纯文本内容。注意，这两个属性在处理文本时可能存在浏览器兼容性差异。 在实际应用中，我们经常结合这些方法进行DOM操作，例如动态修改页面内容、响应用户交互、实现AJAX数据加载等。了解和熟练掌握这些基本方法是JavaScript开发中的基础技能，也是构建动态网页的关键。