前端网页三大要素：JavaScript、HTML、CSS，HTML 负责整体资料与架构，CSS 负责网页样式外观的呈现，JavaScript 处理使用者行为与互动，而这些互动其实都是由浏览器提供，主要提供的方法则分为两种「BOM」及「DOM」。
JavaScript 由三部分构成：
大家熟悉的 API，就是透过 JavaScript 去呼叫 BOM 与 DON，让使用者得以与浏览器做互动。
究竟，什麽是 BOM 呢？BOM ( Browser Object Model，浏览器物件模型 )，是浏览器所有功能的核心，主要处理浏览器视窗和框架，不过通常浏览器特定的 JavaScript 扩充套件都被看做 BOM 的一部份，包括：弹出新的浏览器视窗、移动与关闭及调整浏览器视窗、提供 web 浏览器详细资讯的定位物件、对 cookie 的支援.....等等。
window 物件其实就是 BOM 的核心，window 物件提供的属性主要有 document、location、navigator、screen、history 以及 frames。
在浏览器里的 window 物件扮演着两种角色：
ECMAScript 标准里的「全域物件」 (Global Object)
凡是在「全域作用范围内」宣告的变数、物件、函式等等，都会自动变成「全域物件」，
这样的变数便称它为「全域变数」，可以使用 window.xxx 的方式抓取。
JavaScript 用来与浏览器沟通的窗口
指的是 alert()、blur()、close()、open() 等等我们所看到的 window 方法，就是窗口。
全域变数范例，var a = 5 这个全域变数，可以透过 window 抓取
var a = 5;
console.log( window.a ); // 5
在「全域作用范围」宣告全域变数无法使用 delete 来移除，必须直接透过 window ：
// 无法使用 delete 来移除
var dog = 8;
console.log( window.dog ); // 8
delete window.dog; // false
console.log(window.dog); // 8
// 直接透过 window 来移除
window.dog = 8;
console.log(window.dog); // 8
delete window.dog; // true
console.log(window.dog); // undefined
由於 BOM 的 window 包含了 document，window 物件的属性和方法是可以直接使用及运作的，因此可以直接使用 window 物件的 document 属性，因为 document 物件又是 DOM 的根节点。可以说，BOM 包含了 DOM(物件)，浏览器提供访问的是 BOM 物件，从 BOM 物件在访问到 DOM 物件，因此 JavaScript 可以操作浏览器以及读取浏览器的文件。
接着聊聊 DOM，DOM ( Document Object Model，文件物件模型 )，是一个以树状结构来表示 HTML 文件的模型，而组合起来的树状图，我们称之为「DOM Tree」。这边这一行看起来可能还没有办法马上理解，所以这里直接范例：
<html xmlns="" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>DOM</title>
</head>
<body>
<h2><a href="http://www.baidu.com">javascript DOM</a></h2>
<p>对HTML元素进行操作，可新增、改变或移除css样式等</p>
<ul>
<li>Javascript</li>
<li>DOM</li>
<li>CSS</li>
</ul>
</body>
</html>
HTML 可以说是由节点构成的集合，我们将 HTML 程序码分解为 DOM 节点层次图：
由上面的说明可以知道，一个节点就是一个标签，JavaScript 就可以藉由 DOM API 去存取并改变 HTML 架构及互动方法，底下归纳 BOM 与 DOM 的分别：
参考开发者，透过 JavaScript 取得 DOM API 的写法：
// 根据传入的值，找到 DOM 中 id 为 'xxx' 的元素。
document.getElementById('xxx');
// 针对给定的 tag 名称，回传所有符合条件的 NodeList 物件
document.getElementsByTagName('xxx');
// 针对给定的 class 名称，回传所有符合条件的 NodeList 物件。
document.getElementsByClassName('xxx');
// 针对给定的 Selector 条件，回传第一个 或 所有符合条件的 NodeList。
document.querySelector('xxx');
document.querySelectorAll('xxx');
参考资料：
重新认识 JavaScript: Day 11 前端工程师的主战场：浏览器里的 JavaScript
JavaScript入门系列：BOM和DOM笔记
javascript学习笔记（三）BOM和DOM详解
<<: 予焦啦！Golang 当中的讯号（signal）机制
昨天做完了会动的汉堡动画传送门 今天来开关侧边栏吧！ 当然只要控制 width0 —> 100...
Net Core 为一跨平台的应用开发，其此框架上可以加上许多自制服务，称之为容器也不为过。 如果...
大家好～ 今天来实作如何用 Google Calendar API 建立 Google Meet 会...
昨天稍微简介了一下 ngrok 在做甚麽，今天我们要让我们的 Line Channel 公开，这个 ...
Mattermost RSS 当你使用过Mattermost一段时间後，想试着使用RSS订阅一些像是...