JavaScript的DOM与BOM的区别与用法详解

目录
  • 1. 简述：何为DOM，何为BOM？
  • 2. DOM及其相关操作
    • 2.1DOM树
    • 2.2DOM的一些常见的操作元素方法
      • 获取节点的DOM方法
      • 获取/设置元素的属性值的DOM方法
      • 创建节点(Node)的DOM方法
      • 增添节点的DOM方法
      • 删除节点的DOM方法
      • DOM常见的一些属性
  • 3. BOM及其相关操作
    • 3.1 BOM总述
    • 3.2 BOM常见对象的介绍
      • window对象
      • location对象
      • history对象
      • navigator对象
  • 总结

1. 简述：何为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，进行系统的讲解，由于面向小白，我后面的讲解会尽可能的简单易懂，基础不好也尽可放心食用！

2. DOM及其相关操作

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

2.1DOM树

好的，那什么叫DOM树？

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM_demo</title>
</head>
<body>
    <div>
        <a href="https://blog.csdn.net/qq_52736131">跳探戈的小龙虾</a>
    </div>
</body>
</html>

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

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

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

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

关于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)//3.创建一个属性节点，传参是对应的属性名var attr_node = document.createAttribute(attribute_name)element.setAttributeNode(attr_node)

特别注意第三个，创建属性节点这个方法，要搭配具体的元素，也就是你要先获取某个具体元素element，创建一个属性节点，最后对这个元素添加这个属性节点(setAttributeNode)。

增添节点的DOM方法

//1.向element内部的最后面添加一个节点，传入的参数是节点类型element.appendChild(Node)//2.向element内部某个已存在的节点的前面插入一个节点，仍然传入一个节点类型的参数element.insertBefore(new_Node,existed_Node)

注意，添加节点之前，你要先创建好节点，同时要选好父节点element，第二个方法甚至你还要找好插入位置后面的兄弟节点。

删除节点的DOM方法

//删除element内的某个节点，传参是节点类型参数element.removeChild(Node)

注意，删除时，要找到对应的父节点element才可以顺利删除。

DOM常见的一些属性

最后是一些常见的DOM属性：

//1.获取当前元素的父节点var element_father = element.parentNode//2.获取当前元素的html元素型子节点var element_son = element.children//3.获取当前元素的所有类型子节点，包括html元素、文本和属性var element_son = element.childNodes//4.获取当前元素的第一个子节点var element_first = element.firstChild//5.获取当前元素的前一个同级元素var element_pre = element.previousSibling//6.获取当前元素的后一个同级元素var element_next = element.nextSibling//7.获取当前元素的所有文本，包括html源码和文本var element_innerHTML = element.innerHTML//8.获取当前元素的所有文本，不包含html源码var element_innerTEXT = element.innerText

其中，第七个的意思是说把元素内的html代码和文本都转成文本，原先的html代码是执行的，转成文本相当于变成了普通的字符串！

3. BOM及其相关操作

3.1 BOM总述

下面我们再讲一讲BOM，由于篇幅有限，BOM不做特别细致的讲解(实用性的确也没有DOM那么大)。我们回顾一下开始的时候关于BOM的介绍：

BOM给JavaScript提供用来操作浏览器的若干的"方法"

那么首先我们用一张图把整个BOM的结构给大家梳理一下，与DOM类似，BOM也有一个树状结构：

3.2 BOM常见对象的介绍

window对象

从上面这张图上，我们可以看到：

window是整个BOM树食物链的顶端，因此每一个新打开的窗口，都被认为是一个window对象。

window对象有以下常见的属性和方法：

属性/方法 含义
opener 当前窗口的父窗口
length 窗口中的框架数
document 窗口中当前显示的文档对象
alert(string) 创建一个警告对话框，显示一条信息
close() 关闭窗口
confirm() 创建一个需要用户确认的对话框
open(url,name,[options]) 打开一个新窗口并返回新 window 对象
prompt(text,defaultInput) 创建一个对话框要求用户输入信息
setInterval(expression,milliseconds) 经过指定时间间隔计算一个表达式
setInterval(function,millis enconds,[arguments]) 经过指定时间间隔后调用一个函数
setTimeout(expression,milli seconds) 在定时器超过后计算一个表达式
setTimeout(expression,milli seconds,[arguments]) 在定时器超过时后计算一个函数

其中，大家看到上面有一个函数alert()，因为大家学JavaScript的时候，输入输出流大家大部分都以alert()函数弹窗作为自己的第一个demo，所以看到这里你可能会问了：

当时用alert()函数的时候，好像没有提到window，那这里的alert()是之前学的那个alert()吗？答案是这样的：

这两个alert()确实是同一个函数，之所以可以不加window是因为，window的所有属性和方法，都可以有两种表示方法：

(1) window.属性 / window.方法()

(2) 直接属性 / 方法() 的方式调用

不仅仅是alert()，上面所有的window属性和函数都成立，感兴趣的小伙伴可以自行尝试。

location对象

什么是location对象？

location对象是window对象的一个属性，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。

location对象有以下常见的属性和方法：

属性/方法 内容
host 主机名：端口号
hostname 主机名
href 整个 URL
pathname 路径名
port 端口号
protocol 协议部分
search 查询字符串
reload() 重载当前 URL
repalce() 用新的 URL 替换当前页面

其实我们仔细观察上面那张结构图就会发现：

location对象不仅仅是window对象的一个属性，还是document对象的一个属性。

这意味着：

window.location = location = document.location

history对象

什么是history对象？

history 对象是 window 对象的属性，它保存着用户上网的记录，这个记录的时间戳是从窗口被打开的那一刻算起。

history对象有以下常见的属性和方法：

属性/方法 描述
length history 对象中的记录数
back() 前往浏览器历史条目前一个 URL，类似后退
forward() 前往浏览器历史条目下一个 URL，类似前进
go(num) 浏览器在 history 对象中向前或向后

navigator对象

最后介绍一下navigator对象：

navigator对象，是BOM中识别客户端浏览器的一个window属性。

与navigator相关的一些常见属性：

属性 说明
appName 完整的浏览器名称和版本信息
platform 浏览器所在的系统平台
plugins 浏览器中安装的插件信息的数 组
userAgent 浏览器的用户代理字符串
userLanguage 操作系统的默认语言

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • javascript学习笔记（三）BOM和DOM详解

    javascript学习笔记（三）BOM和DOM详解

    js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W3C 的标准: [所有浏览器公共遵守的标准] 2. BOM 是 各个浏览器厂商根据 DOM 在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] 3. window 是 BOM 对象,而非 js 对象: DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API). BOM

  • Javascript基础知识（三）BOM，DOM总结

    window对象: 打开和关闭窗口: window.open() 三个参数:1.载入新窗口的页面的URL 2.新窗口的名字 3.特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值. window.close() 系统对话框: 1.alert("hello world!"); 2.confirm("Are you sure?");---选择 3.prompt("你的名字是说明?",""); 时间间隔 setT

  • 解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述

    解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述

    DHTML:它不是一门新的语言,而是HTML.CSS和JavaScript这三者相结合的产物,DHTML包含如下3个含义:    (1)通过HTML把网页标记为各个元素    (2)利用CSS设计元素之间的排版样式,并控制各个标记的位置    (3)使用js来控制各个标记JavaScript由三部分组成: (1) ECMAScript是一种由欧洲计算机制造商协会(ECMA)通过ECMA-262标准化的脚本程序设计语言.ECMAScript定义了脚本语言的所有特性.对象和方法,其他语言可以实现EC

  • JavaScript中BOM和DOM详解

    目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM事件操作 鼠标事件 键盘事件 触屏事件 特殊事件 表单事件 浏览器兼容处理 兼容性写法,封装工具 BOM(浏览器对象模型)

  • 实现JavaScript的组成----BOM和DOM详解

    我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了很多对象,用来访问浏览器的功能,这些功能于网页内容无关(这些是DOM的事),目前,BOM已经被W3C搬入了HTML5规范中. window对象: BOM的core,表示浏览器的一个实例,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在

  • javascript bom是什么及bom和dom的区别

    javascript bom是什么及bom和dom的区别

    什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C BOM最初是Netscape浏览器标准的一部分 在BOM章节中你将学到什么 BOM教程中,同学们将学到与浏览器窗口交互的一些对

  • JavaScript的DOM与BOM的区别与用法详解

    JavaScript的DOM与BOM的区别与用法详解

    目录 1. 简述:何为DOM,何为BOM? 2. DOM及其相关操作 2.1DOM树 2.2DOM的一些常见的操作元素方法 获取节点的DOM方法 获取/设置元素的属性值的DOM方法 创建节点(Node)的DOM方法 增添节点的DOM方法 删除节点的DOM方法 DOM常见的一些属性 3. BOM及其相关操作 3.1 BOM总述 3.2 BOM常见对象的介绍 window对象 location对象 history对象 navigator对象 总结 1. 简述:何为DOM,何为BOM? 在文章开始之初

  • JavaScript中的普通函数和箭头函数的区别和用法详解

    最近被问到了一个问题: javaScript 中的箭头函数 ( => ) 和普通函数 ( function ) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答-- 箭头函数中的 this 和调用时的上下文无关,而是取决于定义时的上下文 这并不是很正确的答案--虽然也不是完全错误 箭头函数中的 this 首先说我的回答中没有错误的部分:箭头函数中的 this 确实和调用时的上下文无关 function make () { return ()=>{ consol

  • c++容器list、vector、map、set区别与用法详解

    c++容器list.vector.map.set区别 list 封装链表,以链表形式实现,不支持[]运算符. 对随机访问的速度很慢(需要遍历整个链表),插入数据很快(不需要拷贝和移动数据,只需改变指针的指向). 新添加的元素,list可以任意加入. vector 封装数组,使用连续内存存储,支持[]运算符. 对随机访问的速度很快,对头插元素速度很慢,尾插元素速度很快 新添加的元素,vector有一套算法. map 采用平衡检索二叉树:红黑树 存储结构为键值对<key,value> set 采用

  • Linux系统关机命令之间的区别及用法详解

    Linux系统关机命令有哪些呢?良许教程网为您解答!熟悉linux的朋友应该知道我们在linux系统中常用到的关机命令有:shutdown.halt.poweroff.init:重启命令有:reboot.下面本文就主要介绍一些常用的关机命令以及各种关机命令之间的区别和具体用法. 以下是比较常用的一些关机命令 1.halt立刻关机 2.poweroff 立刻关机 3.shutdown -h now立刻关机(root用户使用) 4.shutdown -h 10 10分钟后自动关机 注:如果是通过sh

  • Javascript中Math.max和Math.max.apply的区别和用法详解

    最近在做一个小案例的时候遇到了Math.max.apply这么一个用法,之前很少遇到过感觉挺有趣的,就记录一下. 1Math.max 语法: Math.max(n1,n2,n3,...,nX) 返回值:max() 方法可返回指定的参数中带有较大的值的那个数 var a = Math.max(1,2,3,4); console.log(a); //4 但是如果数据是放在一个数组里面,此时就不能这样调用了.这时就用到apply方法 2Math.max.apply apply() 方法调用一个函数.简

  • Python中几种属性访问的区别与用法详解

    起步 在Python中,对于一个对象的属性访问,我们一般采用的是点(.)属性运算符进行操作.例如,有一个类实例对象foo,它有一个name属性,那便可以使用foo.name对此属性进行访问.一般而言,点(.)属性运算符比较直观,也是我们经常碰到的一种属性访问方式. python的提供一系列和属性访问有关的特殊方法: __get__ , __getattr__ , __getattribute__ , __getitem__ .本文阐述它们的区别和用法. 属性的访问机制 一般情况下,属性访问的默认

  • JavaScript对象字面量和构造函数原理与用法详解

    本文实例讲述了JavaScript对象字面量和构造函数.分享给大家供大家参考,具体如下: 对象中只有两种属性:(一种比较细的分法) 属性(数据属性)比如:名字,年龄,性别,出版社,地址等信息: 方法(封装代码的属性:函数 ,在这也是一种属性). 在JS中对象的字面量和构造函数是非常的重点,其实在其他的语言中,是没有对象字面量的. 一.对象的字面量的语法: { 属性名: 属性值, 属性名: 属性值, 方法名: 你们函数 } 这个大括号括起来的整个代码块就是叫做对象. var p1 = { } ①访

  • Javascript添加监听与删除监听用法详解

    本文实例讲述了Javascript添加监听与删除监听的用法.分享给大家供大家参考.具体分析如下: js中事件监听就是利用addEventListener来绑定一个事件,这个用法在jquery中非常常用并且简单,但在原生js中比较复杂,这里整理了addEventListener事件各方法的测试与例子供大家参考学习. 在前两天做播放器的时候添加监听后删除监听遇到了一点麻烦,删不掉,后来看了一下才发现,参数需要完全对应,什么叫完全对应呢,换句话说: 复制代码 代码如下: $('.video')[0].

  • Shell编程中while与for的区别及用法详解

    在shell编程中经常用到循环,常用的循环有for和while循环两种.while循环默认以行读取文件,而for循环以空格读取文件切分文件,本篇就结合现网的一些使用示例说说二者的用法和区别. 一.常用语法 1.for循环 for循环常用的语法结构有如下几种: for 变量 in seq字符串 for 变量 in `command` " " for 变量 in "$@"或"$*" for((赋值:条件:运算语句)) 2.while循环 while循

  • PHP中VC6、VC9、TS、NTS版本的区别与用法详解

    1． VC6与VC9的区别: VC6版本是使用Visual Studio 6编译器编译的,如果你的PHP是用Apache来架设的,那你就选择VC6版本. VC9版本是使用Visual Studio 2008编译器编译的,如果你的PHP是用IIS来架设的,那你就选择 VC9版本. VC9版本是针对IIS服务器的版本,没有对APACHE的支持,而VC6版本对IIS和apache都提供了支持 2．Ts与nts的区别: Windows版的PHP从版本5.2.1开始有Thread Safe和NoneThr

随机推荐