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操作HtmlJavaScript就有了一套自己的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 操作系统的默认语言

总结

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

JavaScript的DOM与BOM的区别与用法详解的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,有兴趣的可以了解一下

  5. ios 8 Homescreen webapp,关闭和打开iPad停止javascript

    我有一个适用于iPad的全屏HTML5网络应用程序,并且刚刚安装了IOS8来试用它,它一切正常,直到你关闭并重新启动iPad.一旦web应用程序重新启动javascript就会停止并加载新页面不会重新启动它.在iPad上的Safari中打开同一页面时,关闭和打开iPad会继续按预期工作.其他人注意到了这个或想出了一个解决方案吗?解决方法这似乎是我在iOS8.1.1更新中解决的.

  6. iOS 10 Safari问题在DOM中不再包含元素

    使用此链接,您可以重现该错误.https://jsfiddle.net/pw7e2j3q/如果您点击元素并从dom中删除它,然后单击链接测试.你应该看到旧的元素弹出选择.是否有一些黑客来解决这个问题?解决方法我能够重现这个问题.问题是,每当您尝试删除其更改事件上的选择框时,iOS10都无法正确解除对选择框的绑定.要解决此问题,您需要将代码更改事件代码放在具有一些超时

  7. iOS 6 javascript与object.defineProperty的间歇性问题

    当访问使用较新的Object.defineProperty语法定义属性的对象的属性时,有没有其他人注意到新iOS6javascript引擎中的间歇性错误/问题?https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty我正在看到javascript失败的情况,说

  8. ios – 如何使用JSExport导出内部类的方法

    解决方法似乎没有办法将内部类函数导出到javascript.我将内部类移出并创建了独立的类,它起作用了.

  9. 静音iOS推送通知与React Native应用程序在后台

    我有一个ReactNative应用程序,我试图获得一个发送到JavaScript处理程序的静默iOS推送通知.我看到的行为是AppDelegate中的didReceiveRemoteNotification函数被调用,但是我的JavaScript中的处理程序不会被调用,除非应用程序在前台,或者最近才被关闭.我很困惑的事情显然是应用程序正在被唤醒,并且它的didReceiveRemoteNotifi

  10. ios – Cordova 3.7在每个本机通话中复制iframe

    由于我已升级到Cordova3.7,每个本地调用都将一个新的iframe附加到DOM,如下所示.为了排除我现有的代码影响cordova的可能性,我尝试使用cordovaCLI创建一个新的代码,添加控制台插件,并在设备控制台中的setInterval循环中调用console.log().因此,我在DOM中收到了大量的iframe.我在iPad3,iOS7上尝试过使用xCode6构建应用程序.有没有人遇到这个问题?

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部