我们知道，XHTML要求标签必须闭合，嵌套必须正确。而标签的嵌套，就产生了父子关系（或者说，祖先-后代关系）。而DOM，提供了大量的API，让我们可以轻松操作DOM树。后面我会开一篇文章专门讲JS DOM。
使用DOM，我们能动态修改页面内容，调整样式等等，这也是JS多样化的一个体现。
BOM
BOM，浏览器对象模型（brower object model）
和DOM类似，只不过主体变成了浏览器。浏览器同样提供了大量的API，其中部分对JS开放，为我们提供了操作浏览器窗口的方法。
常见用处：
复制代码 代码如下:
1.弹出新浏览器窗口的能力；
2.移动、关闭和更改浏览器窗口大小的能力；
3.可提供WEB浏览器详细信息的导航对象；
4.可提供浏览器载入页面详细信息的本地对象；
5.可提供用户屏幕分辨率详细信息的屏幕对象；
6.支持Cookies；
7.Internet Explorer对BOM进行扩展以包括ActiveX对象类，可以通过JavaScript来实现ActiveX对象。
ECMAScript core
也叫JS core，随便怎么叫，意思一样，都是表示JS这门语言的核心组成，包括变量定义，垃圾回收，语法，作用域等等。和上面提到的DOM和BOM不同，它们只要求我们能使用这些API，而ECMAScript core则是这门语言的精髓所在，需要不断钻研。下一章将进一步讲JS的语法。
JavaScript的使用
行内式
行内式即写在标签中的JavaScrip，例如我们在HTML中写入：
复制代码 代码如下:
<button>点击</button>
当我们点击按钮时，将会弹框显示"be clicked"。
但注意，强烈不建议这么做，因为这样会给维护带来巨大的麻烦，每次需要更改事件我们都需要先找到该元素，然后修改其javascript内容，而且这些javascript代码也无法复用。
另外，写在标签中的事件需要带'on'，而且标签内只能通过事件引入js，而不能写简单的js表达式
内嵌式
内嵌式即在html的script标签中写js代码，做法是在HTML中新增一个script标签，然后在标签中间插入你的任意js代码，如下：
复制代码 代码如下:
<html>
<body>
<button>点击</button>
</body>
<script>
<span>var btn = document.getElementById("btn");</span><pre> btn.onclick = function() {
alert("be clicked");
}
</script></html>
用内嵌式的话，就比行内式自由很多，可以写更多的代码，也可以避免引号的转义问题，维护也变得更轻松。但问题也是存在的，这些代码只能适用于这个页面，而无法被其他页面使用。
外联式
外联式把以上两种形式的缺点全部解决了。做法如下：
先新建一个文件，把后缀改为.js。例如，我们新建一个click.js文件，然后把刚才写的内嵌式里面的js代码拷贝进去（注意不包括script标签）
复制代码 代码如下:
var btn = document.getElementById("btn");
btn.onclick = function() {
alert("be clicked");
}
然后在HTML中通过script标签引入
复制代码 代码如下:
<html>
<body>
<button>点击</button>
</body>
<script src="https://www.jb51.net/click.js"></script>
</html>
这样的好处在于同样的js代码可以被多个HTML页面共享，坏处是增加了文件数，增大了请求所需时间，所以应增强代码的复用性，并且最后要合并js文件（把不同的js文件合并成一个js文件）
您可能感兴趣的文章: