1. `getElementById()`
`getElementById()` 是最常用的方法之一，用于通过元素的 `id` 属性获取指定的元素。这个方法返回匹配的第一个元素，如果没有找到匹配的元素，则返回 `null`。
```javascript
const element = document.getElementById('myElement');
if (element) {
element.style.color = 'red';
}
```
在这个例子中，我们通过 `id` 获取了一个元素，并将其文本颜色设置为红色。
2. `querySelector()`
`querySelector()` 方法允许我们使用 CSS 选择器来选取元素。它返回匹配到的第一个元素，如果找不到匹配的元素，则返回 `null`。
```javascript
const element = document.querySelector('.myClass');
if (element) {
element.textContent = 'Hello World!';
}
```
在这个例子中，我们使用类选择器 `.myClass` 来获取元素，并修改其内容。
3. `getElementsByTagName()`
`getElementsByTagName()` 方法返回所有带有指定标签名的 HTML 元素集合（HTMLCollection），这个集合是动态的，意味着当页面中的 DOM 结构发生变化时，集合也会自动更新。
```javascript
const elements = document.getElementsByTagName('div');
for (let i = 0; i < elements.length; i++) {
elements[i].style.border = '1px solid black';
}
```
这里我们获取了所有的 `
4. `getElementsByClassName()`
与 `getElementsByTagName()` 类似，`getElementsByClassName()` 返回的是带有指定类名的所有元素的 HTMLCollection。
```javascript
const elements = document.getElementsByClassName('active');
for (let i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = 'yellow';
}
```
这个例子中，我们找到了所有具有 `active` 类的元素，并更改它们的背景颜色。
5. `createDocumentFragment()`
`createDocumentFragment()` 创建一个新的空的 DocumentFragment 对象，可以用来高效地插入多个子节点到文档中。
```javascript
const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
const span = document.createElement('span');
span.textContent = 'Item ' + i;
fragment.appendChild(span);
}
document.body.appendChild(fragment);
```
在这个例子中，我们创建了一个 DocumentFragment，并向其中添加了多个 `` 元素，最后一次性将其添加到文档中，这样可以提高性能。
6. `createElement()`
`createElement()` 用于创建一个新的 HTML 元素节点。
```javascript
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div';
document.body.appendChild(newDiv);
```
这个简单的例子展示了如何动态创建一个新的 `
7. `addEventListener()`
虽然 `addEventListener()` 不是 `document` 对象特有的方法，但它常用于绑定事件处理函数到 `document` 对象上。
```javascript
document.addEventListener('click', function(event) {
console.log('Document was clicked at: ', event.clientX, event.clientY);
});
```
这个例子监听了整个文档的点击事件，并在控制台打印出点击的位置。
总结
以上介绍了 `document` 对象的一些常用方法，这些方法帮助开发者更方便地操作和管理网页的内容。掌握这些基础方法对于前端开发来说是非常重要的，它们构成了许多复杂应用的基础。希望本文能帮助你更好地理解和运用这些方法！
免责声明：本答案或内容为用户上传，不代表本网观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 如遇侵权请及时联系本站删除。
