在图解CSS系列的《CSS 颜色》一文中介绍了CSS中颜色的使用。到目前为止，给Web元素设置颜色的方式有很多种，比如使用颜色名称定义颜色、使用#RGB（或#RRGGBB）、#RGBA（或#RRGGBBAA）、hsl()（或hsla()）、hwb()、lab()、lch()等。在CSS的颜色规范的第四版本中的第十五节中，专门介绍了在JavaScript中如何实现颜色不同空间域的转换。在Web的开发中，有的时候难免离不开使用JavaScript来操作颜色，接下来在这篇文章中，我们主要和大家一起来聊聊JavaScript中颜色空间的转换应该如何实现。

React是众多主流JavaScript框架之一，如果想要较好的掌握React，那么对于JavaScript方面的知识还是非常重要的。但在很多开发者眼里反而顾此失彼，觉得掌握了JavaScript框架就可以无敌，事实上并非如此，至少Web发展至今，HTML、CSS和JavaScript还是Web三大基石。只有更好的掌握这些基础，在平时的工作中才能游刃有余。在接下来的内容中，我们就来一起探讨一下，在学习React的时候，应该具备哪些JavaScript相关的知识，这样才能更有助于我们更好的掌握React。

任何一门技术在实际中都会有一些属于自己的小技巧。同样的，在使用JavaScript时也有一些自己的小技巧，只不过很多时候有可能容易被大家忽略。而在互联网上，时不时的有很多同行朋友会总结（或收集）一些这方面的小技巧。作为一位JavaScript的菜鸟级的同学，更应该要留意这些小技巧，因为这些小技巧可以在实际业务的开发中帮助我们解决问题，而且会很容易的解决问题。在这篇文章中，会整理一些大家熟悉或不熟悉的有关于JavaScript的小技巧。

很多场景我们是需要借助JavaScript相关的API来帮助我们处理Web页面中的CSS。CSSOM（CSS Object Model）中提供了一些JavaScript的API处理CSS。除此之外，还可以通过JavaScript来操作DOM元素中的attribute、样式和类来操作CSS。由于JSX和无数JavaScript框架等概念的出现，使得JavaScript API与DOM交互变得越来越流行，但是对CSS使用类似的技术似乎变得没有那么多人关注。当然， CSS-in-JS解决方案是存在的，但是最流行的方案都是基于编译的，在生产中输出CSS时不需要任何额外的运行时。这当然对性能有好处，因为使用CSS API可能会导至额外的重游，这使得它和使用DOM API一样需要。但这并不是我们想要的。如果我告诉您，您不仅可以操作DOM元素的样式和CSS类，而且还可以创建完整的样式，就像使用HTML和JavaScript一样，那会怎么样呢？

JavaScript中的数组是其中重要的一部分，它提供了很多种操作数组的方法。当涉及到遍历一个数组、查找元素、排序或任何你想要的东西时，JavaScript都可能有一个数组方法可提供给我们使用。然而，尽管它们都很有用，但其中一些知识点仍然不那么为人所知和使用。在这篇文章中将会介绍一些方法，让你在使用数组的时候变得更轻易。甚至可以将接下来的内容当作是JavaScript数组方法的使用指南。

Web颜色是Web应用程序或页面中不可或缺的一部分，对于CSS处理颜色总是非常的简单和单一。但很多时候我们需要一些特殊的效果，比如随机色等。那么我们就需要借助JavaScript来完成。在学习如何使用JavaScript操作CSS颜色之前，我们需要对CSS如何设置颜色有一个基本的了解。CSS设置颜色模式有多种，最为常见的模型有：RGB和HSL。我们先来看一下这两种颜色模式。

作为一位Web开发人员而言，模态框（Modal）并不会陌生。就我个人而言，我更为熟悉的是怎么通过CSS来编写一个模态框以及怎么通过CSS给模态框添加一些动效。正好最近工作中也和Modal框杠上了。另外想更好的设计一个模态框用来满足业务需求的普遍性和实用性，甚至是达到可配置性。所以一直在探究模态框相关的知识，同时正好看到了@Ken Wheeler的教程，对于我这样的菜鸟，能很好的了角如何使用原生的JavaScript来构建一个可用的模态框插件，另外为以后如何使用Vue构建更为灵活的模态框组件打下坚实的基础。如果你对该文章感兴趣，或者你也正在加强JavaScript的学习和实战，欢迎继续往下阅读，或许对你有所帮助。

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

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

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