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 () {});

写在最后