首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

DOMBOM区别

DOMBOM区别 在浏览器中运行JavaScript可以认为由三部分组成:ECMAScript描述了该语言语法基本对象,DOM文档对象模型描述了处理网页内容方法接口,BOM浏览器对象模型描述了与浏览器进行交互方法接口...DOM全称是Document Object Model即文档对象模型,是针对XML基于树API,描述了处理网页内容方法接口,是HTMLXMLAPI,DOM把整个页面规划成由节点层级构成文档...网页是由服务器发送给客户端浏览器,无论用什么浏览器,接收到HTML都是一样,所以DOM浏览器无关,其关注是网页本身内容,由于是相对独立于浏览器,所以可以制定标准。...DOM定义了Node等对象做为这种实现基础,就是说为了能以编程方法操作这个HTML内容,例如添加元素、修改元素、删除元素等,我们把这个HTML结构看做一个对象树DOM树,其本身里面的所有东西例如...BOM是Browser Object Model即浏览器对象模型,DOM是为了操作文档出现接口,而BOM就是为了控制浏览器行为而出现接口,例如跳转页面、前进、后退、书签等等,程序还可能需要获取屏幕大小之类参数

1.4K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    再谈BOMDOM(1):BOMDOM概述

    JavaScript实现包括以下3个部分: ECMAScript(核心):描述了JS语法基本对象。...区别DOM描述了处理网页内容方法接口,BOM描述了与浏览器进行交互方法接口。...BOMDOM对比 BOM为了处理浏览器窗口框架 DOM为了操作文档出现接口,是 HTML XML 应用程序接口(API)。...js 对象; javacsript是通过访问BOM(Browser Object Model)对象来访问、控制、修改客户端(浏览器),由于BOMwindow包含了document,window对象属性方法是直接可以使用而且被感知...可以说,BOM包含了DOM(对象),浏览器提供出来给予访问BOM对象,从BOM对象再访问到DOM对象,从而js可以操作浏览器以及浏览器读取到文档。

    85520

    js对象(BOM部分DOM部分)

    JS总体包括ECMAScript,DOMBOM三个部分,但是能够浏览器进行交互只有DOMBOM,那么到底什么是DOMBOM呢 概念 BOM(Browser Object Model)是指浏览器对象模型...BOM Window对象是客户端JavaScript最高层对象之一,由于window对象是其它大部分对象共同祖先,在调用window对象方法属性时,可以省略window对象引用。...DOM(Document Object Model)是一套对文档内容进行抽象概念化方法。...HTML DOM 模型被构造为对象DOMDOM标准规定HTML文档中每个成分都是一个节点(node): 文档节点(document对象):代表整个文档 元素节点(element 对象):代表一个元素...根据class属性获取 document.getElementsByTagName 根据标签名获取标签合集 注意: 涉及到DOM操作JS代码应该放在文档哪个位置。

    4.3K20

    DOM事件BOM学习

    #DOM简单学习文档对象模型(Document Object Model,简称DOM) 功能:控制html文档内容 *代码:获取页面标签(元素)对象,Element *Document.getElementByid...> ``` BOM学习 1.概念:Browser object Model 浏览器对象模型 *将浏览器各个组成部分封装成对象 2.组成: Window:窗口对象 Navigator:...()显示带有一段消息一个确认按钮警告框 confirm()显示带有一段消息以及确认按钮取消按钮对话框。...clearInterval()取消由setInterval()设置timeout. 3.属性 1.获取其他BOM对象; history location...*HTML DOM 1.标签体设置获取:innerHTML 2.使用html元素对象 3.控制元素样式 3.1.使用元素style属性来设置 如: //修改元素

    1.6K30

    JavaScript 中 DOM BOM

    3.BOM(浏览器对象模型)指的是由 Web 浏览器暴露所有对象组成表示模型。...从根本上将 BOM 只处理浏览器窗口框架,但是人们习惯把针对浏览器 JavaScript 扩展也算作 BOM 一部分,例如:浏览器弹出新窗口功能;移动、缩放关闭浏览器窗口功能;navigator...BOM 直到 HTML5 才有了规范可以遵守,在此之前每个浏览器都有自己不同实现。 DOM 级别 DOM1 级由两个模块组成,DOM 核心(DOM Core) DOM HTML。...DOM2 级引入模块有: - DOM 视图(DOM Views):定义了追踪不同文档视图接口。 - DOM 事件(DOM Events):定义了事件事件处理接口。...- DOM 样式(DOM Style):定义了基于 CSS 为元素样式接口。 - DOM 遍历范围(DOM Traversal and Range):定义了遍历操作文档树接口。

    46720

    JavaScript中DomBom

    修真院Web工程师零基础全能课 本节课内容: JavsScriptDomBom 主讲人介绍 沁修,葡萄藤技术总监 项目经验丰富,擅长H5移动项目开发。...这些节点有许多不同类型,我们先来看看其中三种: 元素节点、文本节点属性节点。 HTML标签元素就是DOM元素节点,它提供了一份文档结构。...3.4 动态创建 前面的方法都是对已经存在元素做出搜索修改。 然而js也可以用来改变网页结构内容,可以通过创建新元素改变现有元素来改变网页结构。...5.BOM BOM,browser object model,浏览器对象模型,这个对象就是对应着浏览器窗口window。 它提供了一些方法用于访问浏览器功能,这些功能网页内容无关。...5.1 window对象 window对象是BOM核心,表示浏览器正打开窗口,它是一个全局对象。 它还有一些属性方法子对象,我们其实已经默默使用过它了。

    91610

    深入JavaScript之BOMDOM事件

    文章目录 BOM 概念 对象组成 Window:窗口对象 方法 与弹出框有关方法 与打开关闭有关方法 与定时器有关方式 属性 获取其他BOM对象 获取DOM对象 特点 Location:地址栏对象...特点:所有dom对象都可以被认为是一个节点 方法 属性 HTML DOM 事件监听机制 概念 常见事件 点击事件 焦点事件 加载事件 鼠标事件 键盘事件 选择改变 表单事件 事件简单学习 功能...如何绑定事件 案例1:电灯开关 BOM 概念 BOM全称Browser Object Model浏览器对象模型,将浏览器各个组成部分封装成对象。...HTML DOM 标签体设置获取:innerHTML 使用html元素对象属性 控制元素样式 使用元素style属性来设置 如: //修改样式方式1 div1.style.border =...如何绑定事件 直接在html标签上,指定事件属性(操作),属性值就是js代码 事件:onclick— 单击事件 通过js获取元素对象,指定事件属性,设置一个函数 代码: <img

    2.9K30

    再谈BOMDOM(4):DOM0DOM2事件处理分析

    JavaScript能够让网站对用户各种操作及时做出“反馈”,响应用户交互行为,而这些就是:DOM,事件以及事件处理 DOM就是操作元素,这个看《再谈BOMDOM(1):BOMDOM概述》 事件就是用户或浏览器自身执行某种动作...这其实也怪javascript之父忙于把抄袭其他语言,忽略了自身事件系统建设。从此世界被划分为两大阵营了。 双方都设计两种绑定事件方法,无侵入式与侵入式。你可以说内联式与非内联式区别。...|微任务宏任务|定时器》 参考文章: JavaScript 运行机制详解:再谈Event Loop www.ruanyifeng.com/blog/2014/10/event-loop.html JS...-------DOM0级事件处理DOM2级事件处理-------简单记法 https://www.cnblogs.com/holyson/p/3914406.html ECMAScript、BOMDOM...(核心、浏览器对象模型与文档对象模型)https://www.cnblogs.com/best/p/8028168.html JavaScript学习总结(三)BOMDOM详解 https://segmentfault.com

    83310

    DOM BOM各种宽高属性

    先区分一下 window 对象 document 对象: window 对象表示浏览器中打开窗口,而 document 对象表示整个 html 文档,它是 window 对象一部分。...注意:IE Opera 下表示是窗口文档区到屏幕距离,这意味着窗口最大化时,screenTop 返回是窗口顶部栏高度而不是 0。.../总宽度,包括滚动条边框。...element.style.property/element.getBoundingClientRect().property;: 对于一个 dom 元素,它 style 属性返回是一个属性可读写对象...对于一个 dom 元素,它 getBoundingClientRect() 方法返回是该元素对应矩形对象,通过 top,bottom,left,right 可以分别获得该对象各边相对于窗口上边或者左边距离

    1.9K10

    再谈BOMDOM(5):各个大流浪器DOMBOM里面的那些坑—兼容性

    判断鼠标滚轮是向上还是向下,IE是通过wheelDelta属性,而火狐是通过detail属性 js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周时间整理,我将根据实例整理那些大大小小“...PS:IE 中所有 DOM 对象都是以 COM 对象形式实现,这意味着 IE 中 DOM可能会其他浏览器有一定差异。...其余参照:http://segmentfault.com/a/1190000002559158#articleHeader11 offsetLeftstyle.left区别 style.left返回是字符串...资料参考: http://w3help.org/zh-cn/kb/, http://www.zhihu.com/question/29072028 转载本站文章《再谈BOMDOM(5):各个大流浪器...DOMBOM里面的那些坑—兼容性》, 请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/xml/2016_0406_7740.html

    96740

    【面试题】虚拟DOM真实DOM区别

    bug收集:专门解决与收集bug网站 网址:www.bugshouji.com 下面主要从查增删改两个角度来分析。...ParentNode.querySelector()ParentNode.querySelectorAll()是有范围地查询ParentNode下节点,过程中是需要根据传入参数来比对节点上属性。...观察一下当前组件实例:console.log(this) 二、增删改 普通真实dom作增删改时会引起浏览器重排重绘。...虚拟dom比真实dom体积小,操作时相对来说消耗性能少,如果在页面中删除一个dom,会引起重绘,影响后边元素布局 1) 虚拟Dom不会进行回流重绘操作 2) 虚拟dom进行频繁修改, 然后一次性比较并修改真实...DOM中需要改部分,最后并在真实DOM中进行回流重绘, 减少过多DOM节点回流重绘 3) 真实Dom频繁回流重绘效率非常低 2.

    79730

    再谈BOMDOM(3):DOM节点操作-元素样式修改及DOM内容增删改查

    (不包括文本节点注释) ownerDocument 指向整个文档文档节点 node与element区别 element是包含在node里,它nodeType是1 parentElement匹配是...   innerHTML: 表示元素所有元素和文本HTML代码   outerText: 与前者区别是替换是整个目标节点,问题返回innerText一样内容   outerHTML: 与前者区别是替换是整个目标节点...学习总结(三)BOMDOM详解 https://segmentfault.com/a/1190000000654274 Javascript操作BOMDOM详解(1) https://blog.csdn.net.../openbox2008/article/details/85260063 JavaWeb学习总结:JavaScript(BOMDOM) https://blog.csdn.net/weixin_42384085.../fjner/p/5892325.html 转载本站文章《再谈BOMDOM(3):DOM节点操作-元素样式修改及DOM内容增删改查》, 请注明出处:https://www.zhoulujun.cn/html

    1.2K20
    领券