打了BOM，来了DOM？

已于 2022-03-22 16:18:19 修改
阅读量2.2k 收藏 69
点赞数 90
分类专栏： JavaScript 文章标签： javascript 开发语言 DOM HTML CSS
于 2022-03-17 04:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51547965/article/details/123538332
版权

📜个人简介

⭐️个人主页：微风洋洋🙋‍♂️
🍑博客领域：编程基础,后端
🍅写作风格：干货,干货,还是tmd的干货
🌸精选专栏：【JavaScript】
🚀支持洋锅：点赞👍、收藏⭐、留言💬

好久不见，甚是想念！
大家好！我是微风洋洋

之前洋锅花了两篇文章来介绍BOM，没想到刚讲完啦BOM，就来了DOM。就好像是打了小的，来了老的，是不是玩不起？
那DOM有时何许人也？是BOM的爹地嘛？

传送门

什么，BOM指的是物料清单？

JavaScript实现“双11”秒杀，你也可以

文章目录

一、DOM对象简介

🌴 什么是DOM

DOM：Document Object Model，文档对象模型。

作用：是一套规范文档内容的通用型标准。

DOM发展历史
1.

  • 时间：1998年10月。
  • 事件：DOM正式成为W3C的推荐标准。
  • 名称：第1级DOM（DOM Level 1，或DOM1）。
  • 作用：为XML和HTML文档中的元素、节点、属性等提供了必备的属性和方法。
  • 参考：最初结合了Netscape及微软公司开发的DHTML（动态HTML）思想。

2.
  • 时间：2000年11月。
  • 事件：发布了第2级DOM（DOM Level 2，或DOM2）。
  • 作用：在DOM1的基础上增加了样式表对象模型。
  • 名称：第3级DOM（DOM Level 3，或DOM3） 。
  • 作用：在DOM2基础上增加了内容模型、文档验证以及键盘鼠标事件等功能。
  • 提示：直到目前为止，DOM几乎被所有浏览器所支持。

🌴 DOM HTML节点树

DOM HTML指的是DOM中为操作HTML文档提供的属性和方法。

  • 文档（Document）表示HTML文件。
  • 文档中的标签称为元素（Element）。
  • 文档中的所有内容称为节点（Node）。

因此，一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分

在这里插入图片描述

在这里插入图片描述


  • HTML文档根据节点作用，分为标签节点、文本节点、属性节点和注释节点。
  • 各节点之间的关系，又可分为以下几个方面：
  • 根节点：标签是整个文档的根节点，有且仅由一个。
  • 子节点：指的是某一个节点的下级节点。
  • 父节点：指的是某一个节点的上级节点。
  • 兄弟节点：两个节点同属于一个父节点。

🌴 DOM对象的继承关系

通过前面的学习可以知道，在JavaScript中要对网页中的元素进行操作，可以利用document对象的getElementById()方法实现，但是此方法的返回值类型是什么？下面通过代码进行查看。

在这里插入图片描述

在这里插入图片描述


📌 总结

  • document和Element是两种不同类型的节点（Node）对象。
  • 它们不仅能够使用Node对象的一系列属性和方法完成节点操作。
  • 也可以使用特有的属性和方法完成不同类型节点的操作。

在这里插入图片描述

除了document和Element对象，还有其他几种类型的节点对象也继承Node对象，如文本（Text）、注释（Comment）等。


举个例子
在这里插入图片描述


代码实现👇


	<div id="test"></div>
	<script>
	var test = document.getElementById('test');
	console.log(test); // 输出结果：<div id="test"></div>
	console.log(test.__proto__); // 输出结果：HTMLDivElement { …… }
	</script>
	
	<div id="test"></div>
	<script>
	var test = document.getElementById('test');
	console.log(test.nodeName); // 通过节点方式获取节点名，输出结果：DIV
	console.log(test.tagName); // 通过元素方式获取标签名，输出结果：DIV
	console.log(document.nodeName); // document属于节点，输出结果：#document
	console.log(document.tagName); // document不属于元素，输出结果：undefined
	</script>
	
	<script>
	var test = document.getElementById('test');
	test.nodeType === Node.ELEMENT_NODE; // 比较结果：true
	document.nodeType === Node.DOCUMENT_NODE; // 比较结果：true
	<script>

在这里插入图片描述



二、DOM节点操作

🌴 获取节点

由于HTML文档可以看做是一个节点树，因此，可以利用操作节点的方式操作HTML中的元素。

在这里插入图片描述

childNodes属性与前面学习过的children属性的区别。

相同点：都可以获取某元素的子元素。

不同点： childNodes属性用于节点操作，返回值中还会包括文本节点等其他类型的节点，是一个NodeList对象的集合。 children属性用于元素操作，返回的是HTMLCollection对象的集合

举个例子

在这里插入图片描述

代码实现👇


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>节点操作</title>
	</head>
	<body>
	<ul id="ul">
	<li>JS</li>
	<li>BOM</li>
	<li>DOM</li>
	<!--注释-->
	</ul>
	<script>
	var ul = document.getElementById('ul'); // 根据id获取ul的元素对象
	console.log(ul.childNodes); // 查看ul下的所有节点
	</script>
	</body>
	</html>

📌 注意

childNodes属性在IE6~8不会获取文本节点，在IE9及以上版本和主流浏览器中则可以获取文本节点。

此外，由于document对象继承自Node节点对象，因此document对象也可以进行以上的节点操作。

在这里插入图片描述



🌴 节点追加

在获取元素的节点后，还可以利用DOM提供的方法实现节点的添加，如创建一个li元素节点，为li元素节点创建一个文本节点等。

在这里插入图片描述

create系列的方法是由document对象提供的，与Node对象无关。

举个例子

在这里插入图片描述

代码实现👇


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>节点追加</title>
	</head>
	<body>
	<script>
	var h2 = document.createElement('h2'); // 创建h2元素节点
	var text = document.createTextNode('Hello JavaScript'); // 创建文本节点
	var attr = document.createAttribute('align'); // 创建属性节点
	attr.value = 'center'; // 为属性节点赋值
	h2.setAttributeNode(attr); // 为h2元素添加属性节点
	h2.appendChild(text); // 为h2元素添加文本节点
	document.body.appendChild(h2); // 将h2节点追加为body元素的子节点
	console.log(document.getElementsByTagName('h2')[0]);
	</script>
	</body>
	</html>



🌴 节点删除

语法：removeChild()和removeAttributeNode()方法实现。

返回值：是被移出的元素节点或属性节点。

举个例子

在这里插入图片描述

代码实现👇


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>删除节点和节点属性</title>
	</head>
	<body>
	<ul>
	<li>PHP</li><li>JavaScript</li><li class="strong">UI</li>
	</ul>
	<script>
	var child = document.getElementsByTagName('li')[2]; // 获取第3个li元素
	var attr = child.getAttributeNode('class'); // 获取元素的class属性值
	console.log(child.removeAttributeNode(attr)); // 删除元素的class属性值
	console.log(child.parentNode.removeChild(child)); // 删除元素
	</script>
	</body>
	</html>

如果觉得这篇文章对你有一丢丢启发的话，不妨 点赞👍、收藏⭐、留言💬支持一下，你的支持将是我继续创作的最大动力❤️❤️❤️

由于作者水平有限，如有错误和不准确之处在所难免，本人也很想知道这些错误，恳望读者批评指正！

if (学会了）{
点赞收藏给个好评，我祝福您学啥会啥；
}else{
点赞收藏给个好评，我相信您定能学会；
}

微风洋洋
关注
  • 90
    点赞
  • 踩
  • 69
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 161
    评论
专栏目录
Node对象与Element对象
weixin_52102646的博客
11-09 2491
Node对象与Element对象Node对象Node对象是什么继承链关系判断节点类型遍历节点获取父节点空白节点问题空白节点空白节点的解决方案获取子节点获取相邻兄弟节点插入节点appendChild()方法insertBefore()方法删除节点替换节点复制节点textContent属性Element对象定位页面元素定位页面元素的方法遍历元素获取子元素获取相邻兄弟元素属性操作innerHTML属性 你好！ 这是我自己编辑的一些知识点。如果你想学习JavaScript的有关知识, 可以仔细阅读这篇文章，了解一下
Node和Element的区别（节点和元素）——超详细
wind96的博客
12-02 3060
如图一个xml文档由元素节点，属性节点，文本节点成 其中bookstore被称为文档元素或根元素，也是一个元素节点 整个文档是一个文档节点，即document节点。在Java中document接口是继承于node接口，表示整个xml文档 每个xml标签是一个元素节点，即element节点。在Java中element接口继承于node接口，表示xml文档中的一个元素 text节点为文本节点，在Java中text接口继承于characterData接口，而characterData继承于nod.
JavaScript DOM
YanHSama的博客
02-18 394
DOM节点
什么是DOM和BOM？
热门推荐
似水流年QC的博客
06-01 1万+
DOM 全称是 Document Object Model，也就是文档对象模型。提供操作页面元素的方法和属性，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM 树DOM树是Web页面的模型，当浏览器加载一个Web页面时，它会创建这个页面的模型，称为DOM树。DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。①.文档节点：在树的顶端是文档节点，它呈现整个页面。②.元素节点：需要访问DOM树时，需要从查找元素开始。
JS 之 DOM详解
玄鱼殇
07-07 7417
dom操作博大精深，源远流长～
Javascript之BOM与DOM讲解
02-09
JavaScript是Web开发中不可或缺的一部分，主要由三个组成部分构成：ECMAScript、DOM（文档对象模型）和BOM（浏览器对象模型）。这三个部分协同工作，使开发者能够创建动态、交互式的网页。 1. ECMAScript： ...
DOM和BOM的使用
01-08
DOM 和 BOM 的使用 DOM（Document Object Model）和 BOM（Browser Object Model）是前端开发中两个基础概念。DOM 是一个文档对象模型，它将 HTML 文档抽象为一个树形结构，允许开发者通过 JavaScript 操作文档的...
BOM与DOM的区别分析
09-05
**BOM与DOM的区别分析** 在Web开发中，BOM（Browser Object Model）和DOM（Document Object Model）是两个至关重要的概念，它们都是用于处理和操作网页内容的接口。DHTML（Dynamic HTML）技术的实现离不开这两者的...
javascript学习笔记（三）BOM和DOM详解
10-25
本文应用了很多实例，来解读JavaScript中BOM和DOM，DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的...
javascript bom是什么及bom和dom的区别
10-23
BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作。这篇文章给大家介绍javascript bom是什么及bom和dom的区别，感兴趣的朋友一起学习吧
最全的DOM和BOM的解释分析
忆水思寒的博客
08-04 1万+
        今天咱们就来看看DOM和BOM。什么是DOM和BOM？DOM（document object model）：文档对象模型，提供操作页面元素的方法和属性BOM（browser object model）；浏览器对象模型，提供一些属性和方法可以操作浏览器我想很多的人都看过这样的官方的解释，那具体的如何我们一起来分析下。一  什么是BOM和DOM？       Javascript 由三部分构成，ECMASc
JavaScript(二十三) DOM继承树，DOM基本操作
Bella.的博客
02-23 629
上节讲到的节点类型也被用为查找的基本操作 IE不支持全说的是IE9及以下，IE10以上全部遵循W3C标准 1. DOM继承树 代表的就是一系列的继承关系 1. 大写的Document，你可以理解成构造函数（函数里只有构造函数需要首字母大写），但是你不能new它，它是留给系统留给自己new的 作用：大的Document可以作为小的document的原型，在大的上填一个属性，从小的里可以访问 但是大的Document，不是直接构造小的document的，正经说小的document的原型
JavaScript中DOM
weixin_43466575的博客
04-05 233
1、DOM对象介绍 （1）什么是DOM DOM：Document Object Model，文档对象模型。 作用：是一套规范文档内容的通用型标准。 （2）DOM HTML节点树 DOM HTML指的是DOM中为操作HTML文档提供的属性和方法。 文档（Document）表示HTML文件。 文档中的标签称为元素（Element）。 文档中的所有内容称为节点（Node）。 因此，一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分 。 <!DOCTYPE html> &lt
BOM和DOM详解
weixin_44074543的博客
05-06 3715
我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。 1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准] 2. BOM 是 各个浏览器厂商根据 DOM 在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] 3. window 是 BOM 对象，而非 js 对象； DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。 BOM 主要处理浏览器
DOM对象的继承关系
weixin_43427301的博客
10-28 387
DOM
DOM与BOM详解
最新发布
libingjiedd的博客
03-12 1066
DOM 全称是 Document Object Model，也就是文档对象模型。提供操作页面元素的方法和属性，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM 树DOM树是Web页面的模型，当浏览器加载一个Web页面时，它会创建这个页面的模型，称为DOM树。DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。①.文档节点：在树的顶端是文档节点，它呈现整个页面。②.元素节点：需要访问DOM树时，需要从查找元素开始。
BOM和DOM分别代表什么？
07-25
BOM和DOM是在Web开发中经常提到的两个重要的概念。 BOM代表浏览器对象模型（Browser Object Model），它提供了与浏览器窗口进行交互的对象和方法。BOM提供了一组对象，用于控制浏览器的行为和属性，例如操作浏览器历史记录、控制浏览器窗口大小、跳转到不同的URL等。常见的BOM对象包括window、location、history、navigator等。 DOM代表文档对象模型（Document Object Model），它是对HTML或XML文档的逻辑结构的表达。DOM将文档中的每个元素、属性、文本等都表示为对象，通过DOM可以对文档进行增删改查的操作。DOM提供了一组标准的接口和方法，开发者可以使用这些接口和方法来操作HTML或XML文档的结构和内容。通过DOM，可以动态地改变网页的内容、样式和结构。常见的DOM对象包括document、element、attribute等。 总结来说，BOM提供了与浏览器窗口交互的对象和方法，而DOM提供了对HTML或XML文档结构的表达和操作的接口和方法。它们是Web开发中重要的两个概念，用于控制和操作网页的各个方面。
评论 161
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

微风洋洋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值