One doc tagged with "dom"

什么是 DOM，有哪些特点？和 HTML、JavaScript 有什么关系？这个 2 分钟的动画视频带你了解 DOM。

浏览器提供了一系列的 DOM API 接口，用于创建、选择、修改 DOM 中的元素，处理 DOM 事件等。我们分别来看一下这些接口的使用方法和步骤。

我们常用的、给页面元素添加动画的方式之一是，使用 CSS Keyframes，通过百分比来控制属性值的变化，从而产生动画效果，但是这样有个缺点，就是 keyframes 是静态的，里边的属性值不能动态的设置，并且也没有办法暂停或改变动画的执行过程。

Web components 是原生的组件化开发技术，它可以让我们创建自定义的 HTML 元素，并且功能和样式都会封装在组件内部，不影响其它的元素。Web Components 与现有的 React 和 Vue 等库不冲突，而是相辅相成的。

BOM，全称是 Browser Object Model，浏览器对象模型。它不是官方的命名，也没有统一的标准，只是对浏览器提供的 API 的统称。BOM 提供的 API 都放到了 window 全局对象中，它代表当前浏览器窗口。 而 DOM 也属于 BOM 的一部分，因为 window 也包括 document 对象。

有时候经常会好奇那些可视化拖拽的工具，还有拖放文件上传是怎么实现的，是不是得监听鼠标点击，移动和释放事件，然后同时计算新位置的坐标？其实不用那么麻烦，浏览器提供了内置的 Drag & Drop API，能很方便的实现拖拽功能。

无论是在面试中，或者优化网站性能上，了解浏览器的工作原理都是非常重要的，这个视频将宏观的介绍：从输入一个 URL，到页面加载完成的所有步骤。