JavaScript之彻底搞懂DOM与BOM及其区别与用法，java前端开发

imtokenmax合约众筹

于 2024-03-20 03:52:47 发布

阅读量562

点赞数 22

分类专栏： 2024年程序员文章标签： java javascript 前端

本文链接：https://blog.csdn.net/imtokenmax/article/details/136860687

版权

2024年程序员专栏收录该内容

7 篇文章 0 订阅

订阅专栏

II.II DOM的一些常见的操作元素方法

🌳 获取节点的DOM方法

🌳 获取/设置元素的属性值的DOM方法

🌳 创建节点(Node)的DOM方法

🌳 增添节点的DOM方法

🌳 删除节点的DOM方法

🌳 DOM常见的一些属性

III. BOM及其相关操作

III.I BOM总述

III.II BOM常见对象的介绍

🌳window对象

🌳location对象

🌳history对象

🌳navigator对象

高质量博主，点个关注不迷路🌸🌸🌸**！**

I. 简述：何为DOM，何为BOM？

==================

在文章开始之初，我要先提一下笼统地讲，什么是DOM，什么是BOM，因为这篇文章最终面向的是有一定JavaScript基础，但是对DOM和BOM并不了解，甚至不知道的朋友。

但是，在聊什么是DOM，什么是BOM之前，请容我先把整个的Javascript的结构给大家展示一下：

上面这张图，我们可以看到有四个元素：JavaScript，ECMAScript，DOM和BOM，那么它们四个之间有什么联系呢？用一个式子总结它们之间的关系：

JavaScript = ECMAscript + BOM + DOM

下面我们来一个一个对它们进行一个概述：

📗ECMAscript：

ECMAScript 是一种由 ECMA国际（前身为欧洲计算机制造商协会）通过 ECMA-262 标准化的脚本程序设计语言，它是JavaScript（简称JS）的标准，浏览器就是去执行这个标准。

ECMAscript更像一个规定，规定了各个浏览器怎么样去执行JavaScript的语法，因为我们知道JavaScript是运行在浏览器上的脚本语言！有了规定，但是我们还缺少与页面中各个元素交互的方式，此时下面的DOM诞生了！

📕DOM:

DOM（Document Object Model ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。

对于JavaScript：为了能够使JavaScript操作Html，JavaScript就有了一套自己的DOM编程接口。

一句话概括：DOM为JavaScript提供了一种访问和操作HTML元素的"方法"(之所以不用接口这个词，是怕一些朋友看到接口就发怵的情况，但其实最准确的描述是给JavaScript提供了接口)

📘BOM:

BOM 是 Browser Object Model，浏览器对象模型。BOM 是为了控制浏览器的行为而出现的接口。

对于JavaScript：为了能够让JavaScript能控制浏览器的行为，JavaScript就有了一套自己的BOM接口。

一句话概括：BOM为JavaScript提供了一种控制浏览器行为的"方法"。

最后，上面的三个JavaScript的组成成分中，ECMscript是一种规范，而其余的两个都是提供了"方法"，分别对应HTML元素和浏览器，于是下面我们针对后面两个：DOM和BOM，进行系统的讲解，由于面向小白，我后面的讲解会尽可能的简单易懂，基础不好也尽可放心食用！

II. DOM及其相关操作

=============

首先我们先讲解一下DOM的相关知识，我把它又分了两块内容：

II.I DOM树🌳

好的，那什么叫DOM树？

可能一些学过DOM的初学者听到这个词也会有一点陌生，但其实DOM树并不是什么特别玄幻的东西，恰恰相反，对前端工作人员来说，DOM树就是你天天处理的页面的HTML元素所构成那颗树：

BOM树中，每个节点可以有两个身份：可以是父节点的子节点，也可以是其他子节点的父节点，下面我们一起观察下面这段代码：

DOM_demo

跳探戈的小龙虾

上面的代码，它的DOM树应该是这样的：

这时候有人要问了，你说这么半天的DOM树，跟操作html元素有关吗？

答案是非常有关，而且只有了解了文档的DOM树结构，才能准确而有效的操作DOM元素，否则会出现各种意料之外的bug。在我们操作一个页面的HTML元素之前，要对整个页面的DOM有一个清晰的绘图，即使在不实实在在绘图，也要在脑中有一个清晰的脉络结构。

II.II DOM的一些常见的操作元素方法

关于JavaScript中DOM的一些常见的操作html元素的方法，我又双叒叕分成几个子部分给大家归类介绍：

🌳 获取节点的DOM方法

//1.通过元素的id属性值来获取元素，返回的是一个元素对象

var element = document.getElementById(id_content)

//2.通过元素的name属性值来获取元素，返回的是一个元素对象的数组

var element_list = document.getElementsByName(name_content)

//3.通过元素的class属性值来获取元素，返回的是一个元素对象的数组

var element_list = document.getElementsByClassName(class_content)

//4.通过标签名获取元素，返回的是一个元素对象数组

var element_list = document.getElementsByTagName(tagName)

🌳 获取/设置元素的属性值的DOM方法

//1.获取元素的属性值，传参自然地是属性名，例如class、id、href

var attr = element.getAttribute(attribute_name)

//2.设置元素的属性值，传参自然地是元素的属性名及要设置的对应的属性值

element.setAttribute(attribute_name,attribute_value)

🌳 创建节点(Node)的DOM方法

//1.创建一个html的元素，传参是元素类型，例如div、h1-5、a，下以div为例

var element = document.createElement(“div”)

//2.创建一个文本节点，传参的是对应的文本内容(注意是文本节点，不是某个html元素)

var text_node = document.createTextNode(text)

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中…(img-eAo4OGCb-1710877956459)]
[外链图片转存中…(img-lXAMbAbO-1710877956460)]
[外链图片转存中…(img-nBif2ejp-1710877956461)]
[外链图片转存中…(img-lQqJKjN8-1710877956461)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-XOXSZBKe-1710877956462)]