Javascript Document详解

发布时间：2023-05-24

一、document对象概述

在 Web 页面中，document 对象代表了整个 HTML 文档。通过它可以获得文档的根元素、文档的头部信息以及文档中的所有 HTML 元素。它是 JavaScript 语言访问和操作页面元素的主要方式。 例如，我们可以通过 document.getElementById('id') 方法获取文档中特定 ID 的 HTML 元素，并且可以使用 document.createElement('tagName') 方法在文档中创建新的 HTML 元素。此外，document 对象还提供了许多其他有用的属性和方法，如获取文档的 URL、title、cookie 等。

二、获取页面元素

通过 document 对象的各种方法，我们可以获取文档中的任何 HTML 元素，并且可以通过元素的属性和方法来获取和修改元素的内容、属性等。下面介绍一些常用的方法：

1. getElementById

const element = document.getElementById('example-id');
console.log(element.innerHTML);  // 获取该元素的 HTML 内容
element.innerHTML = 'New content';  // 修改该元素的 HTML 内容

该方法通过 HTML 元素的 ID 获取元素对象。

2. getElementsByTagName

const elements = document.getElementsByTagName('p');
for (let i = 0; i < elements.length; i++) {
  console.log(elements[i].innerHTML);  // 获取所有 <p> 元素的 HTML 内容
}

该方法通过 HTML 标签名称获取元素对象列表。

3. getElementsByClassName

const elements = document.getElementsByClassName('example-class');
for (let i = 0; i < elements.length; i++) {
  console.log(elements[i].innerHTML);  // 获取所有该类别的元素的 HTML 内容
}

该方法通过 HTML class 名称获取元素对象列表。

三、创建页面元素

在 JavaScript 中，我们可以通过 document.createElement('tagName') 方法来创建新的 HTML 元素，并将其添加到文档中。

const newElement = document.createElement('p');
newElement.innerHTML = 'New element';  // 设置新元素的内容
document.body.appendChild(newElement);  // 在 body 元素中添加新元素

这里我们首先创建一个新的 <p> 元素，然后使用 innerHTML 属性设置新元素的内容，最后使用 appendChild 方法将新元素添加到页面中。

四、修改页面元素

通过 document 对象获取元素对象后，我们可以使用元素的属性和方法来修改元素的内容、属性等。

1. innerHTML

const element = document.getElementById('example-id');
element.innerHTML = 'New content';  // 修改该元素的 HTML 内容

innerHTML 属性用于获取或设置元素的 HTML 内容。

2. value

const inputElement = document.getElementById('example-input');
console.log(inputElement.value);  // 获取输入框的值
inputElement.value = 'New value';  // 修改输入框的值

value 属性用于获取或设置输入框的值。

五、其它常用属性和方法

1. document.URL

该属性用于获取当前文档的 URL：

console.log(document.URL);  // 输出当前文档的 URL

2. document.title

该属性用于获取或设置当前文档的标题：

console.log(document.title);  // 输出当前文档的标题
document.title = 'New title';  // 修改当前文档的标题

3. document.cookie

该属性用于获取或设置当前文档的 cookie：

console.log(document.cookie);  // 输出当前文档的 cookie
document.cookie = 'name=value';  // 设置当前文档的 cookie

4. document.write

该方法用于将给定的字符串写入文档：

document.write('Hello, world!');  // 将字符串写入文档

注意：该方法不推荐使用，因为它会覆盖文档的内容。

结语

JavaScript 的 document 对象是访问和操作 HTML 页面元素的重要方式。我们可以使用各种方法获取和修改页面元素的内容、属性等。在使用时要注意保持页面的结构和语义，使页面更易于维护和扩展。

推荐文章