JavaScript（十五）DOM

最新推荐文章于 2023-10-30 13:21:08 发布
最新推荐文章于 2023-10-30 13:21:08 发布
阅读量104 收藏
点赞数
分类专栏： JavaScript 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LWYYYYYY/article/details/90375898
版权

DOM是什么

DOM 的全称为 Document Object Model，译为文档对象模型。DOM 规定了浏览器应该如何创建 HTML 页面，以及 JavaScript 如何访问和修改浏览器窗口中的 Web 页面的内容。

1. W3C 对 DOM 的定义

DOM 是一个独立于任何语言和平台的接口，允许任何语言或脚本动态地访问和更新 HTML 文档的内容、结构和样式。该 HTML 页面可以进一步处理，并且该处理的结果可以被合并到所呈现的 HTML 页面中。

2. 详解 DOM

DOM 中每一个字母的含义如下:

  • D 表示 Document，即将一个 HTML 页面表示为一个文档。

  • O 表示 Object，即将一个 HTML 页面中的每一个部分都转换成一个对象。

    DOM 实际上是以面向对象方式来描述一个 HTML 页面。其中 Document 对象主要处理 HTML 页面内容。

  • M 表示 Model，即通过模型来表示对象之间的关系，方便获取对象。

    DOM 将一个 HTML 页面表示为一个树形结构的模型。（关于树形结构会在后面学习）

3. DOM 的组成

  • DOM Core: 指定类属类型，将带有标记的文档看成树状结构并据此对文档进行相关操作。
  • DOM HTML: 提供用于操作 HTML 文档以及类似于 JavaScript 对象模型语法的功能部件，在核心 DOM 的基础上支持对所有 HTML 元素对象进行操作。
  • DOM CSS: 提供脚本编程实现 CSS 的接口。
  • DOM XML

4. DOM 树结构

当浏览器加载 HTML 页面时，会创建这个 HTML 页面的模型。这个模型就叫做 DOM 树结构，会被保存到浏览器的内存中。

4.1节点

节点（node）是个网络术语，表示网络中的连接点。一个网络是由一些节点构成的集合。在 DOM 树结构中主要由以下 4 种节点组成:

  • 文档节点: 表示整个 HTML 页面（相当于 document 对象）。当需要访问任何标签、属性或文本时，都可以通过文档节点进行导航。
  • 元素节点: 表示 HTML 页面中的标签（即 HTML 页面的结构）。当访问 DOM 树时，需要从查找元素节点（标签）开始。
  • 文本节点: 表示 HTML 页面中的标签所包含的文本内容。
  • 属性节点: 表示 HTML 页面中的开始标签包含的属性。

根据节点的分类，上面的 DOM 树结构就可以更详细的表示为如下示例:

 

4.2判断节点类型

当通过 DOM 节点树获取 HTML 页面的节点时，我们如何可以判断出当前节点是哪种类型呢？我们可以通过如下 3 个属性进行判断:

 nodeNamenodeTypenodeValue
文档节点#document9null
元素节点标签名1null
属性节点属性名2属性值
文本节点#text3文本内容
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>判断节点类型</title>
		<link rel="stylesheet" href="css/style.css" />
		<style>
			body {
				padding-top: 50px;
				padding-left: 50px;
			}
		</style>
	</head>
	<body>
		<div id="container" class="container">
			<div class="col-md-6">
				<h3>判断文档节点</h3>
				<button id="dname" class="btn btn-primary">nodeName</button>
				<button id="dtype" class="btn btn-primary">nodeType</button>
				<button id="dvalue" class="btn btn-primary">nodeValue</button>
				<h3>判断元素节点</h3>
				<button id="ename" class="btn btn-primary">nodeName</button>
				<button id="etype" class="btn btn-primary">nodeType</button>
				<button id="evalue" class="btn btn-primary">nodeValue</button>
				<h3>判断属性节点</h3>
				<button id="aname" class="btn btn-primary">nodeName</button>
				<button id="atype" class="btn btn-primary">nodeType</button>
				<button id="avalue" class="btn btn-primary">nodeValue</button>
				<h3>判断文本节点</h3>
				<button id="tname" class="btn btn-primary">nodeName</button>
				<button id="ttype" class="btn btn-primary">nodeType</button>
				<button id="tvalue" class="btn btn-primary">nodeValue</button>
			</div>
			<div id="show" class="col-md-6" style="padding-top: 50px;"></div>
		</div>
		<script>
			var show = document.getElementById('show');
			var content = '';
			
			var dname = document.getElementById('dname');
			dname.onclick = function(){
				content += '<h5>文档节点的nodeName: ' + document.nodeName + '</h5>';
				show.innerHTML = content;
			}
			var dtype = document.getElementById('dtype');
			dtype.onclick = function(){
				content += '<h5>文档节点的nodeType: ' + document.nodeType + '</h5>';
				show.innerHTML = content;
			}
			var dvalue = document.getElementById('dvalue');
			dvalue.onclick = function(){
				content += '<h5>文档节点的nodeValue: ' + document.nodeValue + '</h5><br>';
				show.innerHTML = content;
			}
			
			var ename = document.getElementById('ename');
			ename.onclick = function(){
				content += '<h5>元素节点的nodeName: ' + ename.nodeName + '</h5>';
				show.innerHTML = content;
			}
			var etype = document.getElementById('etype');
			etype.onclick = function(){
				content += '<h5>元素节点的nodeType: ' + etype.nodeType + '</h5>';
				show.innerHTML = content;
			}
			var evalue = document.getElementById('evalue');
			evalue.onclick = function(){
				content += '<h5>元素节点的nodeValue: ' + evalue.nodeValue + '</h5><br>';
				show.innerHTML = content;
			}
			
			var aname = document.getElementById('aname');
			aname.onclick = function(){
				var attrNode = aname.getAttributeNode('id');
				content += '<h5>属性节点的nodeName: ' + attrNode.nodeName + '</h5>';
				show.innerHTML = content;
			}
			var atype = document.getElementById('atype');
			atype.onclick = function(){
				var attrNode = atype.getAttributeNode('id');
				content += '<h5>属性节点的nodeType: ' + attrNode.nodeType + '</h5>';
				show.innerHTML = content;
			}
			var avalue = document.getElementById('avalue');
			avalue.onclick = function(){
				var attrNode = avalue.getAttributeNode('id');
				content += '<h5>属性节点的nodeValue: ' + attrNode.nodeValue + '</h5><br>';
				show.innerHTML = content;
			}
			
			var tname = document.getElementById('tname');
			tname.onclick = function(){
				var textNode = tname.firstChild;
				content += '<h5>文本节点的nodeName: ' + textNode.nodeName + '</h5>';
				show.innerHTML = content;
			}
			var ttype = document.getElementById('ttype');
			ttype.onclick = function(){
				var textNode = ttype.firstChild;
				content += '<h5>文本节点的nodeType: ' + textNode.nodeType + '</h5>';
				show.innerHTML = content;
			}
			var tvalue = document.getElementById('tvalue');
			tvalue.onclick = function(){
				var textNode = tvalue.firstChild;
				content += '<h5>文本节点的nodeValue: ' + textNode.nodeValue + '</h5>';
				show.innerHTML = content;
			}
		</script>
	</body>
</html>

4.3节点关系

DOM 节点树的概念从上面的图示中可以一目了然。构成节点树结构的同时，节点与节点之间也存在着如下 3 种关系:

  • 祖先节点与后代节点的关系
  • 父节点与子节点的关系
  • 兄弟节点的关系（拥有共同的父节点）

 

 

 

李不烦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中 DOM 的概念解释
norang的博客
06-04 1869
3.1 文档：DOM中的“D” 如果没有document （文档），DOM也就无从谈起。当创建了一个网页 并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它把你编写 的网页文档转换为一个文档对象。 在人类语言中，“对象”这个词的含义往往不那么明确，它几乎可以用来 称呼任何一种东西。但在程序设计语言中，“对象”这个词的含义非常明 确。 3.2 对象：DOM中的“O” 在上一章的末尾，我们向大家展示了几个JavaScript对象的例子。你应该 还记得，“对象”是一种自足的数据集合。与某个特定对象相关联的变
JavaScript dom操作 dom元素查询 示例代码
最新发布
06-27
JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
JavaScript之DOM
qq_43751200的博客
06-05 1768
DOM
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
JavaScript DOM操作
好好学习天天向上
03-27 5136
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
JavaScript中的DOM对象
qq_44971635的博客
03-23 2443
文章目录 前言 一、DOM是什么？ 二、获取元素节点的方法 1.获取body和head节点 2.通过ID获取元素节点 3.通过class获取元素节点 4.通过name属性获取元素节点 5.通过标签名获取元素节点 6.通过css选择器获取元素节点 三、操作元素的属性 四、操作元素的样式属性 五、节点操作 六、节点的属性 六、其他 前言 提示：DOM DOM树理解。 一、DOM是什么？ 示例：DOM（document object mod...
一文吃透JavaScript中的DOM知识及用法
不迁怒，不贰过。小知识，大智慧。
11-12 4183
一文带你吃透DOM的知识和用法，绝对实用。 DOM是网页的核心结构，无论是HTML、CSS还是JavaScript，都和DOM 密切相关。HTML的作用是构建DOM结构，CSS的作用是设定样式，JavaScript的作用是读取以及控制、修改DOM。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
JavaScript DOM详解
Chiclaim
10-03 7398
DOM的获取Element的方法和属性： getElementById(id) getElementsByTagName(tag) getElementsByClassName(class) parentNode childNodes firstChild lastChild nextSibling
JavaScript：DOM选择器
读心悦
10-23 1466
在通过id、name、class或者标签名来获取元素的时候，只能通过document来调用对应函数，在查找特定元素的时候可能不太方便，比如获取p元素的子元素。一、通过id定位元素，JavaScript提供了getElementById()函数来来查找对应的ID的元素的，返回的是匹配到ID的第一个元素。通过绑定不同的事件，就可以修改文档的结构、样式喝内容。，baseElement表示的是基准元素，常见的基准元素有document和element，selectors表示是一个标准的css选择器，
JavaScript删除DOM
weixin_56550293的博客
12-16 4917
删除一个DOM节点就比插入要容易很多 要删除一个节点秒首先要获取该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉 //获取自身节点 var self=document.getElementById('id'); //获取自身节点的父节点 var parent=self.parentElement; //删除节点 parent.removeChild(self); 注意：删除后的节点虽然已经不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置 当你遍..
【JavaScript 】DOM操作快速入门
Joker_ZJN的博客
10-30 2307
相信我，十分钟，快速入门JavaScript dom操作。
JavaScript dom操作 趣味案例
06-25
本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可...
JavaScript DOM 学习总结(五)
10-23
当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理HTML文档的标准方法，本篇文章给大家介绍javascript dom 学习总结(五)，感兴趣的朋友一起学习吧
JavaScript DOM操作 示例代码
06-25
包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含...
纯JavaScript操作DOM节点
05-22
纯JavaScript操作DOM节点，通过动态JS创建元素标签，自定义元素的个数，并显示序号和对应的正则表达式验证和图片类型大小验证，，在前端用户姓名和性别多选框的取值已拿到，最后把后面的if else代码放开就可以了，...
node（三）buffer 文件 读取 写入
libufan的博客
07-27 7007
一、Buffer - Buffer的结构和数组很像，操作的方法也和数组类似 - 数组中不能存储二进制的文件，而buffer就是专门用来存储二进制数据 - 使用buffer不需要引入模块，直接使用即可 - 在buffer中存储的都是二进制数据，但是在显示时都是以16进制的二位数形式显示 buffer中每一个元素的范围是从00 - ff 0 - 255 00000000 - 1111...
JavaScript（三）语句 循环 if while for
libufan的博客
05-07 1065
1. 语句 在 JavaScript 中，语句使用分号（;）进行分隔。 可以在每行编写一条语句，也可以在每行编写多条语句。 分类: 条件语句: JavaScript 解释器根据一个值判断是执行还是跳过指定语句。 循环语句: JavaScript 解释器根据一个值判断是否重复执行指定语句。 跳转语句: 使 JavaScript 解释器跳转到指定语句。 值得注意的是: - 建议每行编写一...
Express、路由（Router) 、request、response
libufan的博客
08-02 894
一、简介 Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。 Express 简单来说就是运行在Node 平台中的服务器模块，通过Express可以很容易的通过HTTP协议向用户返回静态或动态页面。 Express的特点: 精简、灵活、适合各种WEB应用程序 二、安装express npm ...
零基础CSS教程（一）
libufan的博客
03-17 765
CSS介绍 1.什么是 CSS CSS全称为Cascading Style Sheets，译为层叠样式表。样式定义如何显示HTML元素。样式通常存储在样式表中。 2.CSS的作用 html是网页的骨架，而CSS就是对骨架内容的修饰； html负责结构，css负责样式，js负责行为 CSS 是能够真正做到⽹页表现与内容分离的⼀一种样式设计语⾔言。相对于传...
JavaScript DOM编程艺术探索
"JavaScript DOM编程艺术，深入探讨JavaScript与DOM的关系，以及它们在网页交互中的重要性。" 在网页设计领域，JavaScript与DOM是不可或缺的技术工具，它们共同塑造了现代网页的交互性和动态性。JavaScript是一种由...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值