JavaScript版的DOM总结：DOM是什么以及DOM操作

最新推荐文章于 2024-09-18 08:30:33 发布

「已注销」

最新推荐文章于 2024-09-18 08:30:33 发布

阅读量869

点赞数 1

分类专栏：前端设计基础文章标签： javascript

本文链接：https://blog.csdn.net/abc701110/article/details/104851505

版权

DOM是Document Object Model的缩写，是中立于平台和语言的接口，用于动态访问和更新HTML和XML文档。它将网页转换为多层节点结构，允许开发者通过API操作页面内容和结构。DOM节点包括元素、文本和属性节点，它们之间有特定的关系。通过DOM，可以使用如getElementById、getElementsByTagName等方法选择和修改节点，包括改变内容、样式和属性。DOM操作还包括添加、删除和插入节点，以及显示和隐藏元素。

摘要由CSDN通过智能技术生成

文章目录

- - DOM总结
  - - 1、DOM是什么
    - 2、DOM操作

DOM总结

跟着老师从HTML入门，对CSS有了初步了解，再到接触JavaScript、JQuery,如今在学Vue的我，突然被老师的一句话给问懵了——什么是DOM？说实话，当时有点懵。嗯，很重要。嗯？是什么嘞？

1、DOM是什么

DOM 是 Document Object Model（文档对象模型）的缩写。DOM 定义了访问 HTML 和 XML 文档的标准：“是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

用人话说就是，当创建好一个页面并加载到浏览器时，DOM就悄然而生，它会把网页文档转换为一个文档对象，主要功能是处理网页内容。

DOM 把整个页面映射为一个多层节点结构。HTML或 XML 页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。就像这样一段代码：

<html>
	<head>
		<title>Sample Page</title>
	</head>
	<body>
		<p>Hello World!</p>
	</body>
</html>

在 DOM 中，这个页面可以通过下图所示的分层节点图表示。

这张图就像一棵倒着生长的树，这就是我们所说的网页文档的DOM结构。在这张图中，每一个HTML标签都是一个DOM节点，节点内可以有基本属性、样式、事件等可供修改的属性，使开发人员获取了控制页面内容和结构的主动权。借助DOM提供的API，开发人员可以非常容易地删除、添加、替换或修改任何节点。

1）DOM结构

在这里插入图片描述

2）DOM节点

a、节点分类

每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点

b、节点之间的关系

<html>
  <head>
    <title>DOM 教程</title>
  </head>
  <body>
    <h1>DOM 第一课</h1>
    <p>Hello world!</p>
  </body>
</html>

从上面的 HTML 中：

html 节点没有父节点；它是根节点
head 和 body 的父节点是 html 节点
文本节点 “Hello world!” 的父节点是 p 节点

并且：

html 节点拥有两个子节点：head 和 body
head 节点拥有一个子节点：title 节点
title 节点也拥有一个子节点：文本节点 “DOM 教程”
h1 和 p 节点是同胞节点，同时也是 body 的子节点

并且：

head 元素是 html 元素的首个子节点
body 元素是 html 元素的最后一个子节点
h1 元素是 body 元素的首个子节点
p 元素是 body 元素的最后一个子节点

c、选择器——找到节点

id选择器：通过使用 getElementById() 方法，返回的内容是一个唯一的元素节点

<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>

<script>
x=document.getElementById("intro");
document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>");
</script>

</body>
</html>