摘要：而与最大的区别在于与浏览器沟通的窗口，不涉及网页内容。完全依赖于浏览器厂商实作本身无标准规范，而有着所制定的标准来规范。而透过选取出来的节点，我们可以通过操作属性来变更它的文字。
在许多的网页前端教学或是文章书籍当中，你可能常常听到这样的说法：「HTML、CSS 与JavaScript 是网页前端三大要素」，其中：
HTML 负责资料与结构
CSS 负责样式与呈现
JavaScript 负责行为与互动
那么，如果你跟我在学JavaScript的时候也有一样的疑问：变量、类型、对象、流程控制、函数...表面上看似基础都学会了，但...
我还是不知道怎么通过JavaScript在网页上输出"Hello World!"啊！
那么相信看完今天的分享，我保证你一定可以通过JavaScript 在网页上输出"Hello World!" (嘻嘻)
浏览器里的JavaScript严格来说，JavaScript (或者说ECMAScript 标准) 并没有提供网页的操作方法。
事实上，前端开发者在网页的操作方法都是由JavaScript的执行平台，也就是浏览器提供的。这些操作方法基本上会分别由这两种对象所拥有：BOM与DOM。
所以广泛来说，在浏览器上的JavaScript 实际上包含了以下三部分：
JavaScript核心 (以ECMAScript标准为基础)
BOM (Browser Object Model，浏览器对象模型)
DOM (Document Object Model，文件对象模型)
由于BOM与DOM是由浏览器执行环境所提供；所以换句话说，在node环境下的JavaScript就不会有这两个部分。
前端开发者就是可以通过JavaScript 去调用BOM 与DOM 提供的API，进一步通过它们去控制浏览器的行为与网页的内容。
那么接下来就来具体介绍一下BOM与DOM吧。
BOM 是什么");BOM(Browser Object Model，浏览器对象模型)，是浏览器所有功能的核心，与网页的内容无关。
在早期没有制定标准规范的时候，各家浏览器厂商几乎在自家浏览器上都有各自的功能，非常混乱。直到后来W3C 把各家浏览器都有的部分，以及确定已经(或未来会) 加入的功能，统一集合起来纳入了HTML5 的标准中，这也就是我们现在看到的BOM API。
BOM 有时也有人非正式地称它为Level 0 DOM。因为它在DOM level 1 标准前就已存在，而不是真的有文件去规范这些，所以Level 0 DOM与BOM两者实际上指的是同一个东西。
BOM的核心window对象
从上图可以看出BOM的核心是window对象。
而window对象提供的属性主要为document、location、navigator、screen、history以及frames。
在浏览器里的window对象会扮演着两种角色：
ECMAScript 标准里的全局对象 (Global Object)
JavaScript 用来与浏览器沟通的窗口
凡是在全局作用域内声明的变量、对象、函数等，都会自动变成全局对象的属性。通常这样的变量，我们会称它们叫做全局变量，可以通过window.xxx的方式取得它们。比如：
var a = 10;
console.log( window.a ); // 10
除此之外，在全局作用域内声明的全局变量还有一个特性，就是无法使用delete关键字来移除：
var a = 10;
console.log( window.a ); // 10
console.log(delete window.a); // false
console.log( window.a ); // 10
但若是直接通过指定window对象的属性则可以：
window.a = 10;
console.log( window.a ); // 10
console.log(delete window.a); // true
console.log( window.a ); // undefined
现在我们已经知道了全局对象是怎么回事了，那么window对象扮演的另一个角色，用来与浏览器沟通的窗口又是什么意思呢？
浏览器内建的对话框先来个最常见的例子：alert()警告对话框：
(alert on Chrome)
我想不管是不是刚接触JavaScript的朋友，对alert应该都不陌生，alert的完整语法其实是这样：
window.alert("message");
如同我们所熟知的全局变量一样，window对象下的成员，window是可以省略不打的。
一行代码就可以生成一个对话框，很神奇吧？
而这就是浏览器环境的BOM提供给JavaScript控制的功能之一。
类似的对话框还有用来提供确定/取消的window.confirm()，以及开放式问答的window.prompt()对话框。
当然BOM 提供的API 很多，包含开启/关闭视窗，改变视窗大小，计时器与取得网址等等。这些在之后的文章当中还会再细说。
DOM 是什么");DOM(Document Object Model，文件对象模型)，是一个将HTML文件以树状的结构来表示的模型，而组合起来的树状图，我们称之为DOM Tree。
简单来说，我们把HTML每个节点的关系连接起来倒着看，就好像是一棵树一样。假设我们有一个基本的HTML如下：
米淇淋的个人博客
这是主题
这是一个简单的段落
在最根部的地方，就是document，就是BOM图中window下面的那个。
往下可以延伸出一个个的HTML 标签，一个节点就是一个标签，往下又可以再延伸出文本节点与属性的节点。
而DOM API 就是定义了让JavaScript 可以存取、改变HTML 结构、样式和内容的方法，甚至是对节点绑定的事件。
JavaScript 就是通过DOM 提供的API 来对HTML 做存取与操作。
DOM 与 BOM 的区别前面介绍BOM时，我们已经知道DOM的document其实也就是window对象的子对象之一。
而 DOM 与 BOM 最大的区别在于：
BOM: JavaScript 与浏览器沟通的窗口，不涉及网页内容。
DOM: JavaScript 用来控制网页的节点与内容的标准。
BOM完全依赖于浏览器厂商实作本身无标准规范，而DOM有着W3C 所制定的标准来规范。
想要通过DOM API 取得节点，JavaScript 可以这样写：
// 根据传入的值，找到 DOM 中 id 为 "xxx" 的元素。
document.getElementById("xxx");
// 针对给定的 tag 名称，返回所有符合条件的 NodeList 对象(节点的集合)
document.getElementsByTagName("xxx");
// 针对给定的 class 名称，返回所有符合条件的 NodeList 对象。
document.getElementsByClassName("xxx");
// 针对给定的 Selector 条件，返回第一个 或 所有符合条件的 NodeList。
document.querySelector("xxx");
document.querySelectorAll("xxx");
而透过DOM API选取出来的节点，我们可以通过操作textContent属性来变更它的文字。
假设有一个HTML 节点：
<h1 id="greet">h1>
再来我们就可以先通过document.querySelector()方法来取得节点，然后修改textContent属性：
<script>
document.querySelector("#greet").textContent = "Hello World!"
script>
JS Bin on jsbin.com
看到这里，恭喜你已经可以通过JavaScript 在网页上输出"Hello World!" 啦！
在后续的内容中，我们会继续来介绍各种操作网页的DOM/BOM API。
毕竟对前端工程师来说，搞懂怎么与浏览器打交道、怎么操作网页内容，就是做好WebUI最重要的基础。
如果觉得文章对你有些许帮助，欢迎在我的GitHub博客点赞和关注，感激不尽！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/7358.html
摘要：讲作用域链首先要从作用域讲起，下面是百度百科里对作用域的定义作用域在许多程序设计语言中非常重要。原文出处谈谈语法里一些难点问题二 3) 作用域链相关的问题 作用域链是javascript语言里非常红的概念，很多学习和使用javascript语言的程序员都知道作用域链是理解javascript里很重要的一些概念的关键，这些概念包括this指针，闭包等等，它非常红的另一个重要原因就...
摘要：由于表达式偏啰嗦，于是最近便开始采用来减轻负担。规范是这么说的在规范，有如下描述搬译一下操作符产生式按如下流程解释令为解释执行的结果。而如果把换成操作符写成，她的就不会减了，因为操作符不会对求值。 由于JS表达式偏啰嗦，于是最近便开始采用Coffeescript来减轻负担。举个栗子，当我想取屋子里的第一条dog时，首先要判断house对象是否存在，然后再判断house.dogs是否存在...
摘要：引子前不久我建立的技术群里一位问了一个这样的问题，她贴出的代码如下所示执行结果如下所示第一个第二个这是一个令人诧异的结果，为什么第一个弹出框显示的是，而不是呢这种疑惑的原理我描述如下一个页面里直接定义在标签下的变量是全局变量即属于对象的变量 1) 引子 前不久我建立的技术群里一位MM问了一个这样的问题，她贴出的代码如下所示： var a = 1; function hehe...
摘要：作用域的概念所谓作用域，作用就是指读，写等操作，而域便是指空间，范围等中的域有是全局的域，相应地里面的变量就是全局变量，函数就是全局函数如果有多个包住的域的话，函数会自上而下执行，比如写了两的时候便会从上到下先执行第一个再执行第二个的代码比 作用 域的概念 所谓作用域，作用就是指读，写等操作，而域便是指空间，范围等 js中的域有 1.script script是全局的域，相应地里面的变...
阅读 1182·2021-11-24 11:16
阅读 1548·2021-11-24 09:38
阅读 2381·2021-07-28 12:32
阅读 2211·2019-08-30 11:22
阅读 1324·2019-08-30 11:01
阅读 465·2019-08-29 16:24
阅读 3360·2019-08-29 12:52
阅读 1523·2019-08-29 12:15
