前段时间在学习Vue的双向绑定原理及实现时，简单的知道Object.defineProperty()有很大的用处。这个方法会直接在一个对象上定义一个新属性，或者修改一个对象现有的属性，并返回这个对象。感觉他非常强大，但并不知道其中原委。回过头来重新补一下这方面的基础知识。

ES5和ES6致力于为开发者提供JS已有却不可调用的功能。例如在ES5出现以前，JS环境中的对象包含许多不可枚举和不可写的属性，但开发者不能定义自己的不可枚举或不可写属性，于是ES5引入了Object.defineProperty()方法来支持开发者去做JS引擎早就可以实现的事情。ES6添加了一些内建对象，赋予开发者更多访问JS引擎的能力。代理(Proxy)是一种可以拦截并改变底层JS引擎操作的包装器，在新语言中通过它暴露内部运作的对象，从而让开发者可以创建内建的对象。本文将详细介绍代理(Proxy)和反射(Reflection)。

在很多场景下我们需要通过JavaScript来获取视口或DOM元素的大小、位置以及滚动高度。最常见的一个效果，导航吸顶的一个效果。那么今天就来学习这方面相关的知识。

经过《前端路由一探》的学习，简单的了解了Web路由方面的知识。另外在学习HTML5 History API时，知道可以通过这个API来实现Web页面的跳转，而且浏览器不需要刷新。那么今天我们来看如何使用JavaScript写Web路由。从网上找了两个示例，第一个是@KrasimirTsonev用100行代码写的一个示例，另一个是@Joakim Carlstein用20行代码写的一个示例。首先来看第一个示例。

JavaScript知识一直都是自己的短板，近一年多来一直在致力于增加这方面的能力，也在W3cplus梳理了一些有关于自己学习JavaScript的笔记。加上最近学习Vue相关的技能，越发自己在JavaScript方面的能力还欠缺很多，所以这段时间一直在补习JavaScript中DOM相关的知识。希望对于初学者有所帮助。

通过上一节的学习，对JavaScript中的DOM有了一定的认识。虽然对DOM中相关的知识点有一定的概念，但还是缺乏对DOM的实际操作。如果你仔细阅读过上一篇文章的话，你应该会发现，当时也提到了一些DOM操作相关的东西，比如，DOM的增、删、改和查等。那么今天我们就来看看这些方面的东西。

DOM是JavaScript中重要部分之一，在DOM中有一个动态集合。这个动态集合包含节点的集合（NodeList）、元素属性的集合（NamedNodeMap）和HTML元素的集合（HTMLCollection）。这三个对象都是类数组（Array-like），具有像数组一样的特性。更为重要的是，它们都是动态的，是有有生命有呼吸的对象，会实时更新查询DOM结构。今天我们学习的目标就是深究这三个动态集合之间的用法和联系以及区别。

在《DOM的操作》一节中知道querySelectorAll()和getElementsByTagName()两个方法都是用来查找DOM元素的。通过上一节的学习，知道querySelectorAll()方法将获取到NodeList对象，getElementsByTagName()方法获取到的是HTMLCollection对象。虽然他们获取的都是DOM动态集合，但两者还是略有差异的。今天我们就来看这两者之间的区别。

这几天看@Anton Kosykh写的使用ResizeObserver实现响应式Vue的组件，让我刷新了对响应式组件的认识，也在这里第一次接触到ResizeObserver这个词。个人有一个习惯，对于任何新东西，我都充满好奇，有一股探知欲，要了解其中的原委。今天这篇文章就是自己对ResizeObserver的探知。

DOM是Document Object Model的简称，是网站具有交互性的重要组成部分。它是一个接口，允许编程语言操作网站的内容、结构和样式。JavaScript是浏览器中连接到DOM的客户端脚本语言。欲要更好的操作好Web网站，我们就很有必要的理解DOM。而且这也是学习JavaScript很重要的部分之一。接下来我们将从以下几个部分来展开对DOM的理解和学习。