08 DOM

document 对象

document 对象是 Web 开发中非常核心的一个对象，它代表了整个 HTML 文档，是 DOM（文档对象模型）树的根节点，提供了对文档中元素的访问和操作接口。以下是关于 document 对象的一些详细介绍：

1. 获取元素的方法

1.1 getElementById(id)

• 描述：根据元素的 id 属性值获取对应的元素，返回一个元素对象。如果文档中没有匹配的元素，则返回 null。
• 示例：

  let element = document.getElementById('myElement');
  console.log(element); // 返回 id 为 'myElement' 的元素对象

1.2 getElementsByClassName(classNames)

• 描述：根据元素的 class 属性值获取一组元素，返回一个 HTMLCollection 对象，该对象是一个类数组对象，包含所有匹配的元素。如果文档中没有匹配的元素，则返回一个空的 HTMLCollection 对象。
• 示例：

  let elements = document.getElementsByClassName('myClass');
  console.log(elements); // 返回一个包含所有 class 为 'myClass' 的元素的 HTMLCollection 对象

1.3 getElementsByTagName(tagName)

• 描述：根据元素的标签名获取一组元素，返回一个 HTMLCollection 对象，包含所有匹配的元素。如果文档中没有匹配的元素，则返回一个空的 HTMLCollection 对象。
• 示例：

  let elements = document.getElementsByTagName('div');
  console.log(elements); // 返回一个包含所有 div 元素的 HTMLCollection 对象

1.4 querySelector(selector)

• 描述：使用 CSS 选择器来选择文档中的第一个匹配的元素，返回一个元素对象。如果文档中没有匹配的元素，则返回 null。
• 示例：

  let element = document.querySelector('.myClass');
  console.log(element); // 返回第一个 class 为 'myClass' 的元素对象

1.5 querySelectorAll(selector)

• 描述：使用 CSS 选择器来选择文档中的所有匹配的元素，返回一个 NodeList 对象，该对象是一个类数组对象，包含所有匹配的元素。如果文档中没有匹配的元素，则返回一个空的 NodeList 对象。
• 示例：

  let elements = document.querySelectorAll('.myClass');
  console.log(elements); // 返回一个包含所有 class 为 'myClass' 的元素的 NodeList 对象

2. 文档信息属性

2.1 document.title

• 描述：获取或设置文档的标题，对应 HTML 中的 <title> 标签内容。
• 示例：

  console.log(document.title); // 获取文档标题
  document.title = '新标题'; // 设置文档标题

2.2 document.URL

• 描述：获取当前文档的完整 URL。
• 示例：

  console.log(document.URL); // 获取当前文档的完整 URL

2.3 document.domain

• 描述：获取或设置当前文档的域名。设置 document.domain 可以用于跨子域的通信。
• 示例：

  console.log(document.domain); // 获取当前文档的域名
  document.domain = 'example.com'; // 设置文档域名

2.4 document.referrer

• 描述：获取加载当前文档的前一个文档的 URL。
• 示例：

  console.log(document.referrer); // 获取前一个文档的 URL

3. 文档操作方法

3.1 document.createElement(tagName)

• 描述：创建一个新的元素节点，返回一个元素对象。
• 示例：

  let newElement = document.createElement('div');
  console.log(newElement); // 返回一个新的 div 元素对象

3.2 document.createTextNode(text)

• 描述：创建一个新的文本节点，返回一个文本节点对象。
• 示例：

  let textNode = document.createTextNode('Hello, World!');
  console.log(textNode); // 返回一个新的文本节点对象

3.3 document.appendChild(node)

• 描述：将一个节点添加到文档中的指定父节点的子节点列表的末尾。
• 示例：

  let parentElement = document.getElementById('parent');
  let newElement = document.createElement('div');
  parentElement.appendChild(newElement); // 将 newElement 添加到 parentElement 的末尾

3.4 document.insertBefore(newNode, referenceNode)

• 描述：将一个节点插入到文档中的指定父节点的子节点列表中，插入位置在 referenceNode 之前。
• 示例：

  let parentElement = document.getElementById('parent');
  let newElement = document.createElement('div');
  let referenceElement = document.getElementById('reference');
  parentElement.insertBefore(newElement, referenceElement); // 将 newElement 插入到 referenceElement 之前

3.5 document.removeChild(node)

• 描述：从文档中删除指定的节点。
• 示例：

  let parentElement = document.getElementById('parent');
  let childElement = document.getElementById('child');
  parentElement.removeChild(childElement); // 从 parentElement 中删除 childElement

3.6 document.replaceChild(newNode, oldNode)

• 描述：用一个新的节点替换文档中的一个旧的节点。
• 示例：

  let parentElement = document.getElementById('parent');
  let newElement = document.createElement('div');
  let oldElement = document.getElementById('old');
  parentElement.replaceChild(newElement, oldElement); // 用 newElement 替换 oldElement

4. 事件相关方法

4.1 document.addEventListener(type, listener, options)

• 描述：为文档添加一个事件监听器。
• 示例：

  document.addEventListener('click', function() {
      console.log('文档被点击');
  });

4.2 document.removeEventListener(type, listener, options)

• 描述：移除文档上之前添加的事件监听器。
• 示例：

  function handleClick() {
      console.log('文档被点击');
  }
  document.addEventListener('click', handleClick);
  document.removeEventListener('click', handleClick);

5. 其他常用方法

5.1 document.write(text)

• 描述：向浏览器的文档流中直接写内容，可以用于动态生成 HTML 内容。不过在现代开发中，推荐使用更现代的方法（如 innerHTML、textContent 等）来操作 DOM，因为 document.write 有一些已知的问题和限制。
• 示例：

  document.write('<div>Hello, World!</div>');

5.2 document.getElementById(id).innerHTML

• 描述：获取或设置元素的 HTML 内容。
• 示例：

  let element = document.getElementById('myElement');
  console.log(element.innerHTML); // 获取元素的 HTML 内容
  element.innerHTML = '<span>New Content</span>'; // 设置元素的 HTML 内容

5.3 document.getElementById(id).textContent

• 描述：获取或设置元素的文本内容，与 innerHTML 不同，textContent 不会解析 HTML 标签。
• 示例：

  let element = document.getElementById('myElement');
  console.log(element.textContent); // 获取元素的文本内容
  element.textContent = 'New Text Content'; // 设置元素的文本内容

6. 文档状态属性

6.1 document.readyState

• 描述：返回文档的加载状态，可能的值有：
  • loading：文档正在加载。
  • interactive：文档已加载完毕，但子资源（如图片、样式表等）仍在加载。
  • complete：文档及其所有子资源都已加载完毕。
• 示例：

  console.log(document.readyState); // 获取文档的加载状态

6.2 document.addEventListener('DOMContentLoaded', handler)

• 描述：监听 DOMContentLoaded 事件，该事件在文档的初始 HTML 完全加载和解析完成后触发，不包括样式表、图片和子框架的加载。
• 示例：

  document.addEventListener('DOMContentLoaded', function() {
      console.log('DOM 加载完成');
  });

7. 窗口和文档的关系

document 对象是 window 对象的一部分，可以通过 window.document 访问。window 对象代表浏览器窗口，而 document 对象代表窗口中的文档内容。它们之间的关系如下：

• window 是全局对象，所有全局变量和函数都是 window 的属性。
• document 是 window 的一个属性，代表文档内容。
• window 和 document 之间有一些事件和方法是相互关联的，例如 window.onload 和 document.addEventListener('load', handler) 都可以用于监听页面加载完成的事件。

总结

document 对象是 Web 开发中非常重要的一个对象，它提供了对文档中元素的访问和操作接口，允许我们动态地创建、修改和删除元素，监听和处理各种事件，获取文档的状态信息等。掌握 document 对象的这些方法和属性，可以帮助我们更灵活地操作 DOM，实现丰富的交互效果。