广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >怎么理解JavaScript中的BOM和DOM
  • 753
分享到

怎么理解JavaScript中的BOM和DOM

2024-04-02 19:04:59 753人浏览 薄情痞子
摘要

本篇内容主要讲解“怎么理解javascript中的BOM和DOM”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么理解JavaScript中的BOM和DOM”吧

本篇内容主要讲解“怎么理解javascript中的BOM和DOM”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么理解JavaScript中的BOM和DOM”吧!

JavaScript使用心得之BOM和DOM

自从netscape navigator2.0把js引入到浏览器中,js可谓与浏览器接下了不解之缘,而js在浏览器中执行的速度,也是现在各种各样的浏览器展示其牛*的主要指标之一。那BOM和DOM到底是什么类?

BOM:Browser Object Model,是浏览器相关的一组特性,由于和浏览器相关,那一定没有统一的标准了,原因是,有ms了......,不过庆幸的是,还是有一些事实标准的。

DOM:Document Object Model,这个就是标准了,由著名的w3c制定,目前***的级别是level 3,不过3还没有彻底完成,目前主流的浏览器都可以支持到(仅仅是支持到哦,并不是完全遵守的)level 2,对html,也就是html4.x,目前***的是4.01,后来w3c向把html统一向xml靠拢,于是就有了xhtml1.0,再后来,w3c想搞一个xhtml2.0,结果进度缓慢,加之各大厂商又不看好,于是就有了HTML5.0 (很牛的东东,有待尝试哦)。

对规范有兴趣可以浏览维基上的一篇文章。

JavaScript使用心得之BOM描述

好了,BOM和DOM的历史就先说到这里了,搞点实质性的东东,先说一下BOM的体系结构:

怎么理解JavaScript中的BOM和DOM

先从window说起,对于window,最简单的一句就是它是表示打开页面的浏览器窗口,并不包含页面的内容。请牢记后一句话,我在最开始的时候,就用它访问过页面的内容,结果当然是访问不到了。

既然是表示浏览器的窗口,那就一定包含:

◆新建窗口(window.open()),

◆关闭窗口(window.close()),

◆改变窗口位置(resizeBy(),resizeTo()),

◆移动窗口(moveBy(),moveTo),

还有一些其固有的特性,比如:

◆打开新的连接,并可以指定打开方式

◆弹出系统对话框(alert(),confirm(),prompt()),

◆设置超时与暂停(setTimeout(),setInterval()),

◆状态栏,

前面的那些操作使用的时候可以查阅文档,当然能记住更好。不过要注意不同的浏览器对这些方法的支持各不一样,Oh,My God,It's  a  confusion of world!后两个操作十分的不专业,***不要使用。

对于特性要罗嗦一下咯,***一个特性,不专业,尽量不要使用,第二和第三个,一看就知道了,也没啥说的,***个还是有必要说一下的。

提一个问题,如何通过js实现在一个新的窗口打开连接,也就是通过js实现类似点击

< a href='Http://www.sina.com' target='_blank'>sina< /a>

的效果,用location么,错,虽然location有target这个属性,但,那是不行的,那怎么解决类?呵呵,答案是使用

window.open('http://www.sina.com','_blank');

这句代码的实际意思是把一个连接在一个指定的框架(frame)内打开,_self

,_top,_blank,这些是专有的框架名。

然后再说一说让人迷惑的几个东东,parent,self,top,opener,,怎么样可区分清楚么?

其中self总是等于window,仅是名字不一样而已,不过正是由于这个特点,使用它可以使我们的代码更易于阅读,而top对象和parent对象,本人认为,只有在多框架(frames)下才会被用到,top对象指向最顶层的框架,也就是当一个页面使用了frame或iframe时,才会被用到。***opener用于window.open()打开的子窗口。

然后下来说一说document和location对象,首先,我在上面的BOM的体系结构图中,将这两个对象标记为了红颜色,为什么类?简单,是由于混乱。

document是一个既属于BOM又属于DOM的对象,而location对象,则是一个既属于window,又属于document的属性。从BOM的角度来看,document对象中包含了页面中一些通用的属性和集合,不过document中的很多属性(alinkColor,bGColor,fgColor,linkColor,vlinkColor)是可以通过CSS控制的,所以我的建议是能使用css控制的尽量使用css,而剩下的属性(lastModifie

d,referrer,title,URL),基本上没有多大的用处,要说有用的,我认为只有referrer可能有点用,它可以告诉你用户是怎么访问到你的页面的。其实document的主要作用是用于DOM。

location对象表示载入窗口的URL,同时还可以用于解析URL,比如要获得GET请求后的参数可以使用

location.search

对于history和navigator对象,history对象提供了go(int),back(),forward()方法,他们的功能类似于浏览器的前进和后退,不过出于安全的考虑,history仅仅提供导航的功能,要想得到用户的浏览历史,仅靠这个对象是不行的。

到此,相信大家对“怎么理解JavaScript中的BOM和DOM”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: 怎么理解JavaScript中的BOM和DOM

本文链接: https://www.lsjlt.com/news/86836.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 怎么理解JavaScript中的BOM和DOM
    本篇内容主要讲解“怎么理解JavaScript中的BOM和DOM”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么理解JavaScript中的BOM和DOM”吧...
    99+
    2022-10-19
  • JavaScript中BOM和DOM详解
    目录BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. locatio...
    99+
    2022-11-12
  • JavaScript中DOM和BOM原理详析
    目录前言DOM为什么要创建DOM节点或者画一个类似于这样的结构图?DOM的家世1.DOM为啥这么有必要?2.DOM的迭代,有啥区别?3.注意注意!!DOM的好兄弟BOM!小结前言 本...
    99+
    2022-11-13
  • JavaScript中BOM,DOM和事件怎么使用
    这篇文章主要介绍“JavaScript中BOM,DOM和事件怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript中BOM,DOM和事件怎么使用”文章能帮助大家解决问题。BOM概...
    99+
    2023-07-02
  • JavaScript中BOM,DOM和事件的用法详解
    目录BOM概念对象组成Window:窗口对象Location:地址栏对象History:历史记录对象DOM概念W3C DOM 标准被分为 3 个不同的部分核心DOM模型HTML DO...
    99+
    2022-11-13
  • JavaScript中BOM和DOM有什么区别
    这篇文章将为大家详细讲解有关JavaScript中BOM和DOM有什么区别,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。BOM定义了JavaScript可以...
    99+
    2022-10-19
  • JavaScript中DOM与BOM的区别与用法是什么
    本文小编为大家详细介绍“JavaScript中DOM与BOM的区别与用法是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript中DOM与BOM的区别与用法是什么”文章能帮助大家解决疑惑,...
    99+
    2022-10-19
  • 如何理解JavaScript DOM中的Node节点
    如何理解JavaScript DOM中的Node节点,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。在DOM(文档对象模型)中,HTML文档...
    99+
    2022-10-19
  • JavaScript中的DOM技术怎么用
    这篇文章主要为大家分析了JavaScript中的DOM技术怎么用的相关知识点,内容详细易懂,操作细节合理,具有一定参考价值。如果感兴趣的话,不妨跟着跟随小编一起来看看,下面跟着小编一起深入学习“JavaSc...
    99+
    2022-10-19
  • JavaScript中怎么获取HTML的DOM节点
    JavaScript中怎么获取HTML的DOM节点,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。1. 通过顶层document...
    99+
    2022-10-19
  • JavaScript 中怎么利用DOM创建和克隆元素
    这期内容当中小编将会给大家带来有关JavaScript 中怎么利用DOM创建和克隆元素,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。createElement()和cre...
    99+
    2022-10-19
  • 怎样深入理解vue中的虚拟DOM和Diff算法
    怎样深入理解vue中的虚拟DOM和Diff算法,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。真实DOM的渲染在讲虚拟DOM之前,先说一下真实DOM的渲染。浏览器真实DOM渲...
    99+
    2023-06-22
  • 怎么理解javascript中防抖和节流
    本篇内容介绍了“怎么理解javascript中防抖和节流”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • JavaScript中的原型和原型链怎么理解
    这篇文章主要介绍“JavaScript中的原型和原型链怎么理解”,在日常操作中,相信很多人在JavaScript中的原型和原型链怎么理解问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2022-10-19
  • 怎么理解JavaScript在IE和FireFox中的不同表现
    怎么理解JavaScript在IE和FireFox中的不同表现,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。Javascript在IE与Fir...
    99+
    2022-10-19
  • 怎么理解并掌握JavaScript中的this
    这篇文章主要介绍“怎么理解并掌握JavaScript中的this”,在日常操作中,相信很多人在怎么理解并掌握JavaScript中的this问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望...
    99+
    2022-10-19
  • javascript中的等值比较怎么理解
    本篇内容介绍了“javascript中的等值比较怎么理解”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • JavaScript中的变量声明怎么理解
    这篇文章的内容主要围绕JavaScript中的变量声明怎么理解进行讲述,文章内容清晰易懂,条理清晰,非常适合新手学习,值得大家去阅读。感兴趣的朋友可以跟随小编一起阅读吧。希望大家通过这篇文章有所收获!变量ECMAScript中,变量可以保存...
    99+
    2023-06-29
  • 怎么理解javascript中数组化
    本篇内容介绍了“怎么理解javascript中数组化”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!  数组...
    99+
    2022-10-19
  • javascript中怎么实现一个基于DOM的模板引擎
    本篇内容主要讲解“javascript中怎么实现一个基于DOM的模板引擎”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript中怎么实现一个基于DO...
    99+
    2022-10-19
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作