JavaScript DOM 对象详解

需要重新演唱

于 2024-07-16 19:32:16 发布

阅读量340

点赞数 15

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/xycxycooo/article/details/140474830

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JavaScript DOM 对象详解

在 JavaScript 编程中，DOM（Document Object Model）是指文档对象模型，它提供了一组用于与 HTML 文档进行交互的对象。DOM 对象允许开发者动态地访问和操作网页的内容、结构和样式。本文将详细介绍 JavaScript 中的 DOM 对象，并通过丰富的示例帮助你更好地理解。

1. DOM 的基本概念

DOM 是一种跨平台的、独立于语言的接口，它将 HTML 或 XML 文档表示为一个树形结构，其中每个节点都是一个对象，代表文档的一部分（如元素、属性、文本等）。通过 DOM，开发者可以添加、删除、修改和查询文档中的元素和内容。

2. DOM 树结构

DOM 树的根节点是 document 对象，它代表整个文档。树中的每个节点都是一个 Node 对象，具有以下几种主要类型：

Element：代表 HTML 元素（如 <div>、<p> 等）。
Text：代表元素中的文本内容。
Attribute：代表元素的属性（如 id、class 等）。
Comment：代表注释。

3. 获取 DOM 元素

JavaScript 提供了多种方法来获取 DOM 元素。

3.1 通过 ID 获取元素

使用 document.getElementById() 方法可以通过元素的 id 属性获取元素。

let element = document.getElementById('myElement');
console.log(element);

3.2 通过类名获取元素

使用 document.getElementsByClassName() 方法可以通过元素的 class 属性获取元素集合。

let elements = document.getElementsByClassName('myClass');
console.log(elements); // 返回一个 HTMLCollection

3.3 通过标签名获取元素

使用 document.getElementsByTagName() 方法可以通过元素的标签名获取元素集合。

let elements = document.getElementsByTagName('div');
console.log(elements); // 返回一个 HTMLCollection

3.4 通过 CSS 选择器获取元素

使用 document.querySelector() 方法可以通过 CSS 选择器获取第一个匹配的元素。

let element = document.querySelector('#myElement');
console.log(element);

使用 document.querySelectorAll() 方法可以通过 CSS 选择器获取所有匹配的元素集合。

let elements = document.querySelectorAll('.myClass');
console.log(elements); // 返回一个 NodeList

4. 操作 DOM 元素

获取到 DOM 元素后，可以对其进行各种操作，如修改内容、样式、属性等。

4.1 修改元素内容

使用 innerHTML 属性可以修改元素的 HTML 内容。

let element = document.getElementById('myElement');
element.innerHTML = '<p>New content</p>';

使用 textContent 属性可以修改元素的文本内容。

element.textContent = 'New text content';

4.2 修改元素样式

使用 style 属性可以修改元素的样式。

element.style.color = 'red';
element.style.fontSize = '20px';

4.3 修改元素属性

使用 setAttribute() 方法可以修改元素的属性。

element.setAttribute('class', 'newClass');

使用 getAttribute() 方法可以获取元素的属性值。

let className = element.getAttribute('class');
console.log(className);

5. 创建和删除 DOM 元素

JavaScript 提供了方法来动态创建和删除 DOM 元素。

5.1 创建元素

使用 document.createElement() 方法可以创建新的元素。

let newElement = document.createElement('div');
newElement.innerHTML = 'New element';

5.2 添加元素

使用 appendChild() 方法可以将新元素添加到指定元素的子节点列表的末尾。

let parentElement = document.getElementById('parentElement');
parentElement.appendChild(newElement);

使用 insertBefore() 方法可以将新元素插入到指定元素的子节点列表的指定位置。

let referenceElement = document.getElementById('referenceElement');
parentElement.insertBefore(newElement, referenceElement);

5.3 删除元素

使用 removeChild() 方法可以删除指定元素的子节点。

parentElement.removeChild(newElement);

6. 事件处理

JavaScript 可以通过事件处理程序来响应用户的操作，如点击、鼠标移动等。

6.1 添加事件处理程序

使用 addEventListener() 方法可以为元素添加事件处理程序。

element.addEventListener('click', function() {
  alert('Element clicked!');
});

6.2 移除事件处理程序

使用 removeEventListener() 方法可以移除元素的事件处理程序。

let clickHandler = function() {
  alert('Element clicked!');
};
element.addEventListener('click', clickHandler);
element.removeEventListener('click', clickHandler);

7. 示例：创建一个简单的交互式网页

以下是一个简单的示例，展示如何使用 JavaScript 操作 DOM 创建一个交互式网页。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DOM Example</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="container">
    <p id="paragraph">Click me to change my color!</p>
  </div>
  <button id="addButton">Add Element</button>
  <button id="removeButton">Remove Element</button>

  <script>
    let paragraph = document.getElementById('paragraph');
    let addButton = document.getElementById('addButton');
    let removeButton = document.getElementById('removeButton');
    let container = document.getElementById('container');

    paragraph.addEventListener('click', function() {
      paragraph.classList.toggle('highlight');
    });

    addButton.addEventListener('click', function() {
      let newParagraph = document.createElement('p');
      newParagraph.textContent = 'New paragraph';
      container.appendChild(newParagraph);
    });

    removeButton.addEventListener('click', function() {
      let paragraphs = container.getElementsByTagName('p');
      if (paragraphs.length > 1) {
        container.removeChild(paragraphs[paragraphs.length - 1]);
      }
    });
  </script>
</body>
</html>

在这个示例中，我们创建了一个包含段落和两个按钮的网页。点击段落时，段落的背景颜色会改变；点击“Add Element”按钮时，会添加一个新的段落；点击“Remove Element”按钮时，会删除最后一个段落。

通过本文的详细讲解，相信你已经对 JavaScript 中的 DOM 对象有了全面的了解。在实际编程中，合理使用 DOM 对象可以提高代码的效率和可读性。希望这些知识对你有所帮助！

需要重新演唱

关注

15
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM 对象详解

在 JavaScript 编程中，DOM（Document Object Model）是指文档对象模型，它提供了一组用于与 HTML 文档进行交互的对象。DOM 是一种跨平台的、独立于语言的接口，它将 HTML 或 XML 文档表示为一个树形结构，其中每个节点都是一个对象，代表文档的一部分（如元素、属性、文本等）。通过 DOM，开发者可以添加、删除、修改和查询文档中的元素和内容。通过本文的详细讲解，相信你已经对 JavaScript 中的 DOM 对象有了全面的了解。方法可以通过元素的标签名获取元素集合。
复制链接

扫一扫