JavaScript中常用的Document了解

文档对象模型（DOM）是JavaScript的一个重要组成部分，它提供了一种访问和操作HTML文档的方法。在JavaScript中，Document对象是DOM的核心，它表示整个HTML文档。Document对象提供了各种方法和属性，用于对文档进行操作和获取信息。

一、Document对象的属性和方法

1. Document对象的属性

- document.documentElement：返回文档的根元素，即元素。

- document.head：返回文档的元素。

- document.body：返回文档的元素。

- document.title：获取或设置文档的标题。

- document.URL：获取文档的URL。

- document.domain：获取或设置文档的域名。

2. Document对象的方法

- document.getElementById()：根据元素的id属性获取元素对象。

- document.getElementsByClassName()：根据元素的class属性获取元素对象集合。

- document.getElementsByTagName()：根据元素的标签名获取元素对象集合。

- document.querySelector()：根据CSS选择器获取第一个匹配的元素对象。

- document.querySelectorAll()：根据CSS选择器获取所有匹配的元素对象。

- document.createElement()：创建一个新的元素对象。

- document.createTextNode()：创建一个包含文本的文本节点。

- document.createComment()：创建一个注释节点。

- document.createAttribute()：创建一个属性节点。

- document.createDocumentFragment()：创建一个文档片段。

- document.write()：将字符串写入文档流中。

二、Document对象的常见用法

1. 获取元素对象

可以使用getElementById()、getElementsByClassName()、getElementsByTagName()等方法根据元素的id、class或标签名获取元素对象。例如：

```javascript

var element = document.getElementById("myId");

var elements = document.getElementsByClassName("myClass");

var elements = document.getElementsByTagName("div");

```

2. 创建元素

可以使用createElement()方法创建新的元素对象，并使用appendChild()方法将它添加到文档中。例如：

```javascript

var newElement = document.createElement("div");

newElement.innerHTML = "This is a new div element.";

document.body.appendChild(newElement);

```

3. 修改元素属性和样式

可以使用setAttribute()方法添加或修改元素的属性，使用style属性修改元素的样式。例如：

```javascript

var element = document.getElementById("myId");

element.setAttribute("src", "image.jpg");

element.style.color = "red";

```

4. 修改元素的内容

可以使用innerHTML属性修改元素的HTML内容，使用innerText或textContent属性修改元素的文本内容。例如：

```javascript

var element = document.getElementById("myId");

element.innerHTML = "This is bold text.";

element.innerText = "This is text content.";

```

5. 添加和移除事件监听器

可以使用addEventListener()方法添加事件监听器，使用removeEventListener()方法移除事件监听器。例如：

```javascript

var element = document.getElementById("myButton");

element.addEventListener("click", function() {

alert("Button clicked");

});

element.removeEventListener("click", myFunction);

```

三、Document对象的案例说明

1. 动态创建元素

可以使用Document对象的createElement()方法创建元素，并使用appendChild()方法将新创建的元素添加到文档中。例如，下面的代码动态创建了一个

元素，并向其中添加了三个
• 元素：

  ```javascript

  var ul = document.createElement("ul");

  for (var i = 1; i <= 3; i++) {

  var li = document.createElement("li");

  li.innerHTML = "Item " + i;

  ul.appendChild(li);

  }

  document.body.appendChild(ul);

  ```

  2. 修改元素的样式

  可以使用Document对象的style属性修改元素的样式。例如，下面的代码将id为"myId"的元素的背景颜色设置为红色：

  ```javascript

  var element = document.getElementById("myId");

  element.style.backgroundColor = "red";

  ```

  3. 添加和移除事件监听器

  可以使用Document对象的addEventListener()方法添加事件监听器，使用removeEventListener()方法移除事件监听器。例如，下面的代码为id为"myButton"的按钮添加了一个点击事件监听器：

  ```javascript

  var element = document.getElementById("myButton");

  element.addEventListener("click", function() {

  alert("Button clicked");

  });

  ```

  以上是对JavaScript中常用的Document对象的介绍。通过Document对象的属性和方法，我们可以方便地访问和操作HTML文档，实现各种交互和动态效果。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/