了解文档对象模型 (DOM)-js教程-PHP中文网

了解文档对象模型 (DOM)

Susan Sarandon

发布： 2024-10-13 06:18:02

原创

843 人浏览过

Understanding the Document Object Model (DOM)

文档对象模型 (DOM) 对于 Web 开发人员来说是一个至关重要的概念，因为它定义了文档的结构并允许与 HTML 和 XML 文档进行动态交互。本指南将帮助您了解 DOM、其结构以及如何使用 JavaScript 操作它。

什么是 DOM？

定义：DOM 是 Web 文档的编程接口。它将文档表示为对象树，允许脚本在查看文档时更新文档的内容、结构和样式。
树结构：DOM 将文档表示为节点树。每个节点代表文档的一部分，例如元素、属性或文本。

DOM结构

属性节点：表示元素的属性（例如，class、id）。

注释节点：代表HTML中的注释。

示例 DOM 树

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

登录后复制

DOM 表示:

Document
├── html (Element)
│   ├── head (Element)
│   │   └── title (Element)
│   │       └── "My Page" (Text)
│   └── body (Element)
│       ├── h1 (Element)
│       │   └── "Hello, World!" (Text)
│       └── p (Element)
│           └── "This is a paragraph." (Text)

登录后复制

访问 DOM

选择元素

getElementById：通过 ID 选择单个元素。

  const element = document.getElementById('myId');

登录后复制

getElementsByClassName：返回具有指定类名的元素的实时 HTMLCollection。

  const elements = document.getElementsByClassName('myClass');

登录后复制

getElementsByTagName：返回具有指定标签名称的元素的实时 HTMLCollection。

  const elements = document.getElementsByTagName('div');

登录后复制

querySelector：选择与 CSS 选择器匹配的第一个元素。

  const element = document.querySelector('.myClass');

登录后复制

querySelectorAll：返回与 CSS 选择器匹配的所有元素的静态 NodeList。

  const elements = document.querySelectorAll('div.myClass');

登录后复制

操纵元素

更改内容：

  const element = document.getElementById('myId');
  element.textContent = 'New Content';

登录后复制

更改属性：

  const element = document.getElementById('myId');
  element.setAttribute('class', 'newClass');

登录后复制

改变风格：

  const element = document.getElementById('myId');
  element.style.color = 'blue';

登录后复制

创建和附加元素：

  const newElement = document.createElement('div');
  newElement.textContent = 'I am a new div';
  document.body.appendChild(newElement);

登录后复制

删除元素：

  const element = document.getElementById('myId');
  element.parentNode.removeChild(element);

登录后复制

DOM 事件

事件是浏览器中发生的操作或事件，您可以使用事件处理程序来响应它们。

添加事件监听器

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button clicked!');
});

登录后复制

常见事件

click：点击元素时触发。
mouseover：当鼠标悬停在元素上时触发。
keydown：按下某个键时触发。
submit：提交表单时触发。

结论

理解 DOM 对于 Web 开发至关重要，因为它提供了一种与网页交互和操作网页的方法。掌握 DOM 操作将使您能够创建动态和交互式 Web 应用程序。

随意深入研究文档并尝试 DOM API 中可用的各种方法和属性。快乐编码！

以上是了解文档对象模型 (DOM)的详细内容。更多信息请关注PHP中文网其他相关文章！