首页 > 文章 > web前端 > 了解文档对象模型 (DOM)

了解文档对象模型 (DOM)

Susan Sarandon原创: 2024-10-13 06:18:02805浏览

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中文网其他相关文章！

JavaScript css html Static Object for while xml using class Interface Attribute Event dom this

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：JSON.parse but without errors下一篇：RECORD vs COLLECTION in PLSQL

查看更多