html中dom和bom,区分BOM和DOM,区分window、document、html、body
JavaScript三大组成部分
1. ECMAScript
ECMAScript是JavaScript的语法标准,由ECMA(欧洲计算机厂家协会)制定的。
2. BOM
BOM即浏览器对象模型(brower object model)。
没有统一标准。各个浏览器厂商根据 DOM在各自浏览器上实现。
BOM由一系列相关的对象(包括window对象)构成,并且每个对象都提供了很多方法与属性。
主要用于管理窗口与窗口之间的通讯,因此其核心对象是window。
3. DOM
DOM即文档对象模型(document object model)。
DOM的标准化组织是W3C。
DOM 就是针对 HTML 和 XML 提供的一个应用程序接口(API)。换句话说就是能以编程的方式操作整个 HTML 的内容。(以下只谈论HTML,不谈论XML。但XML同理可得)。
HTML 的内容是指HTML文件中的各种标签(比如html标签,body标签,a标签,div标签等)及其中包含的文本。我们利用DOM提供的API,对这些内容进行增删改查等操作。
在HTML文件中,把每个标签(及其包含文本)看作一个对象,每个这样的对象作为一个节点,这样的节点连接起来构成了一个“文档树形结构”。这样一个个的节点在被称为是HTML中的一个个元素(Element)。
DOM提供的API帮助我们操作这个树形结构的文档。将HTML文件转化为DOM树的过程称为解析。转化为DOM树后,我们就可以利用DOM提供的API对HTML文件进行操作。
每个载入浏览器的 HTML 文档都会成为 Document 对象。由下图可以看出,document 是整个 DOM 树的根节点。
Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
DOM树结构
小结
图片来自互联网
window是BOM中的一个对象
document是DOM中的一个对象,同时也是BOM中的一个对象
DOM的对象document可以通过BOM的对象window来访问,即window.document。所以可以通过BOM访问DOM。
在DOM树中,html是documnet下的节点,而body又是html下面的节点。所以html和body是html文件中的具体内容。
可以不严谨地得到这样一个层级关系:window→document→html→body
细说BOM和DOM
1. BOM
BOM包含的对象有window(窗口)、navigator(浏览器)、screen(浏览器屏幕)、history(访问历史)、location(地址)等
window对象(核心对象)
页面一旦加载,就会创建windows对象,无需自行创。通过该对象可以做的事情比如:
获取一些浏览器相关属性
window.innerWidth // 返回窗口的文档显示区的宽度
window.innerHeight // 返回窗口的文档显示区的高度
window.outerWidth // 在innerWidth的基础上加上工具栏/滚动条的宽
window.outerHeight // 在innerHeight的基础上加上工具栏/滚动条的高
一些浏览器操作
window.alert() // 弹出框
window.confirm() // 确认框
window.prompt() // 输入框
计时器
window.setTimeout()
window.setInterval()
window.clearInterval()
// 不要再setInterval调用的函数中使用document.write()
navigator对象
提供浏览器相关信息,包括浏览器名称、版本号、操作系统等。
screen对象
提供用户屏幕相关信息。如宽(screen.width)
history对象
记录访问历史。如返回上次访问地址(history.back)。
location对象
浏览器中的地址栏,可以完成刷新当前页面与放回首页、显示端口号、服务器等信息。
document对象
document对象是window对象的子对象(window.document),同时也是DOM中的根节点对象。具体放在DOM中讨论。
2. DOM
DOM就是把html里的各种数据当做对象处理的一种思路。document对象是DOM树的根节点,通过document对象可以操作DOM树下的任意子节点。下面介绍几个DOM的常用操作。
获取节点
document.getElementById()
document.getElementByTagName()
document.getElementByClassName()
节点的创建、添加、删除
var ul = document.getElementByTagName("ul")[0];
var li = document.createElement("li");
li.innerHTML = "我是新增的li"
ul.appendChild(li);
ul.removeChild(li);
获得/设置节点的属性
var div = document.getElementByTagName("div")[0];
div.getAttribute("节点属性名称");
div.setAttribute("节点属性名称", 要设置成的值);
给节点添加/移除绑定事件
var div = document.getElementByTagName("div");
div.onclick = function(){};
div.onclick = null;
div.addeEventListener("click", function () {});
div.removeEventListener("click", function () {});
写在最后
html中dom和bom,区分BOM和DOM,区分window、document、html、body相关推荐
- 前端:JS/24/BOM和DOM简介,for...in循环遍历,window对象的属性和方法,延时器,定时器,screen屏幕对象,location地址栏对象,history历史记录对象
BOM 和DOM简介 BOM ,Browser Object Model ,浏览器对象模型: BOM主要提供了访问和操作浏览器各组件的方式: 浏览器组件:window(浏览器容器), location ...
- HTML的DOM和浏览器的BOM
DOM和BOM的区别 HTML DOM 的 document 是 BOM 的 window 对象的属性之一: 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. Ja ...
- day03_js学习笔记_03_js的事件、js的BOM、js的DOM
day03_js学习笔记_03_js的事件.js的BOM.js的DOM ================================================================ ...
- Web APIs,BOM树,声明dom对象,年会抽奖案例,随机图片,表单,用户注册倒计时,innerHTNL,classList的使用
介绍 严格意义上讲,我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系,ECMAScript 简称 ES 它提供了一套语言标准规范,如变量.数据类型.表达式.语 ...
- python中dom是什么意思_python--BOM和DOM
一. 介绍 什么是BOM和DOM? 简要答案:BOM是浏览器对象模型,用来获取或设置浏览器的属性.行为,例如:新建窗口.获取屏幕分辨率.浏览器版本号等. DOM是文档对象模型,用来获取或设置文档中标签 ...
- php删除bom,php bom如何去掉
去掉php bom的方法:首先用fopen函数打开php文件:然后读取php文件内容:接着调用ltrim将php开头的BOM头去掉:最后通过fwrite命令将去掉BOM头的php文件写入到新的PHP文 ...
- Group BOM 和BOM group
Group BOM:在创建bom时,不输入工厂即可创建组bom,如果有多工厂同时使用相同的bom,可通过组bom reference出相同的bom,修改其中一个工厂的bom,所有bom都会被更改,如果 ...
- HTML中常见的各种位置距离以及dom中的坐标讨论
最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的 ...
- html中dom多会有影响吗,DOM操作造成的页面卡顿问题及解决
相关目录 以下为我总结的其他性能优化点,欢迎参考,指点及吐槽 前言 界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现 的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很 ...
最新文章
- 也许,这是东半球最叼的Java内存模型
- 如何去掉系统快捷方式的箭头(转载)
- ***必须要掌握的计算机知识
- Eigen(8)实例最小二乘法
- 论文浅尝 | 基于深度序列模型的知识图谱补全
- 【Mybatis-Plus】(四)分页、乐观锁插件 通用枚举 多数据源
- 01_ExtJS_HelloWorld
- 关于ultrawebgrid的列的样式
- gd32f450 linux,GD32F450开发板初体验
- RPG游戏《黑暗之光》流程介绍与代码分析之(九):技能系统的实现
- pandas数据清洗策略1
- 「Hortic Res」APETALA2的同源物CaFFN可调节辣椒的开花时间
- 老照片瞬间修复神器!快帮你家的长辈恢复照片去吧
- C++实现骰子涂色算法
- STM32F103系列引脚定义-功能图
- python使用turtle库绘制一个红色五角星_使用turtle库绘制红色五角星图形
- 好用的Google浏览器插件
- 思科路由器限速设置全解
- cordova js(javascript)读取本地文件(将本地的bin文件转成字节数组)
- [Rust GUI]fltk-rs的helloworld
热门文章
- linux signal 处理
- 用数据库的方式编辑上一页 下一页
- SharePoint Enterprise Search基础知识点拾遗系列之二
- LVS高可用方案汇总
- 机房线路故障,引发多家公司不能上网,和自己de经历有感
- 50matches:更准确的搜索引擎
- ZZULIOJ 1059:最高分
- python3安装模块的命令_如何为PythonPython3安装gi模块?
- 信息学奥赛一本通 1101:不定方程求解 | OpenJudge NOI 2.1 7650 | 小学奥数 7650
- 松鼠聚会(洛谷-P3964)