在JavaScript中，document对象是一个非常核心的对象，它代表了当前网页的整个HTML文档。document对象是Window对象的一个属性，因此可以很方便地直接使用。通过document对象，开发者可以访问和操作页面中的所有元素、属性以及CSS样式等。以下是一些常用的document对象的方法和属性：

1. 获取页面元素：

   • getElementById(id): 通过元素ID获取元素。
   • getElementsByClassName(className): 通过类名获取元素集合。
   • getElementsByTagName(tagName): 通过标签名获取元素集合。
   • querySelector(selector): 使用CSS选择器获取第一个匹配的元素。
   • querySelectorAll(selector): 使用CSS选择器获取所有匹配的元素集合。

2. 修改文档内容：

   • innerHTML: 获取或设置某个元素的HTML内容。
   • innerText 或 textContent: 获取或设置元素的纯文本内容，不包括HTML标签。
   • appendChild(node): 向指定元素的子元素列表末尾添加一个新的子元素。
   • removeChild(node): 从父节点中删除一个子节点。

3. 创建和插入元素：

   • createElement(tagName): 创建一个新的HTML元素。
   • createTextNode(text): 创建一个新的文本节点。
   • insertBefore(newNode, referenceNode): 在某个元素之前插入新节点。

4. 属性操作：

   • getAttribute(attributeName): 获取元素的属性值。
   • setAttribute(attributeName, value): 设置元素的属性值。
   • removeAttribute(attributeName): 移除元素的属性。

5. 样式操作：

   • 虽然直接操作style属性更常见，但这是针对元素而非document对象本身。例如：element.style.color = 'red';

6. 表单交互：

   • 通过document.forms可以访问到页面上的所有表单，进而操作表单元素和数据。

7. 页面加载与事件：

   • addEventListener(event, function): 为文档或其元素添加事件监听器。
   • DOMContentLoaded 事件：当初始的HTML文档被完全加载和解析完成时触发，不需要等待样式表、图片和子框架完成加载。

这只是document对象功能的一部分，实际上它提供了更广泛的功能来与网页内容进行交互。理解和掌握document对象对于前端开发至关重要。



真诚赞赏，手留余香

微信支付