JavaScript DOM - 文档对象模型

最新推荐文章于 2024-08-18 10:54:05 发布

ordinary90

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量385

点赞数 3

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

本文链接：https://blog.csdn.net/zxcv321zxcv/article/details/138704060

版权

前端全栈开发专栏收录该内容

152 篇文章 0 订阅

订阅专栏

JavaScript DOM（Document Object Model）是一种表示文档结构的对象模型，它将文档表示为树状结构，并且可以使用 JavaScript 来操作和修改这个结构。

DOM 将整个 HTML 或 XML 文档表示为一个树状结构，其中树的每个节点表示一个文档的元素、属性、文本等。通过使用 JavaScript，可以使用 DOM 操作来访问、添加、修改或删除树中的节点和属性。

DOM 结构中的每个节点都有不同的属性和方法，用于访问和操作节点的信息。下面是一些常用的 DOM 属性和方法：

document.getElementById(id)：通过元素的 id 属性获取一个元素节点。
document.getElementsByClassName(className)：通过元素的 class 属性获取一组元素节点。
document.getElementsByTagName(tagName)：通过元素的标签名获取一组元素节点。
element.parentNode：获取一个元素节点的父节点。
element.childNodes：获取一个元素节点的所有子节点。
element.firstChild：获取一个元素节点的第一个子节点。
element.lastChild：获取一个元素节点的最后一个子节点。
element.nextSibling：获取一个元素节点的下一个兄弟节点。
element.previousSibling：获取一个元素节点的上一个兄弟节点。
element.innerHTML：获取或设置一个元素节点的 HTML 内容。

下面是一个使用 JavaScript DOM 操作的示例：

<!DOCTYPE html>
<html>
<head>
  <title>DOM Example</title>
</head>
<body>
  <h1 id="heading">Hello, World!</h1>
  <p class="content">This is a paragraph.</p>

  <script>
    // 获取元素节点并修改内容
    var heading = document

ordinary90

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript DOM - 文档对象模型

DOM 将整个 HTML 或 XML 文档表示为一个树状结构，其中树的每个节点表示一个文档的元素、属性、文本等。通过使用 JavaScript，可以使用 DOM 操作来访问、添加、修改或删除树中的节点和属性。JavaScript DOM（Document Object Model）是一种表示文档结构的对象模型，它将文档表示为树状结构，并且可以使用 JavaScript 来操作和修改这个结构。DOM 结构中的每个节点都有不同的属性和方法，用于访问和操作节点的信息。
复制链接

扫一扫