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的理解和学习。

最近回过头来在学习JavaScript中的DOM知识，随着学习进度的向前推移，越发感觉DOM知识点较多。为了能更好的系统了解清楚DOM相关的知识，我打算重新将DOM的学习划入到DOM系列当中。那么今天将是这个系列的第一篇。你将了解到DOM是什么，为什么它有用，以及如何与将来在教程中所做的一切联系起来。

上一节，咱们整理了DOM系列中的第一篇，主要介绍浏览器与DOM相关的知识。从标题中我们可以看出来，今天所要学的东西包含两个部分，第一部分是DOM树，第二部分是遍历DOM。如果你和我一样对于DOM树和遍历DOM是初次接触，那个人建议您花点时间好好看看这两部分的知识。

在上一节中，我们学习了DOM树和遍历DOM相关的知识。可以通过firstChild（或firstElementChild）、lastChild（或lastElementChild）、parentNode(或parentElement)、children、previousSibling（或previousElementSibling）、nextSibling(或nextElementSibling)获取到你想要的DOM元素。如果你够仔细的话，可以看到他们之前都是存在相互关系的，要么是兄弟关系，要么是父子关系。

经过前几篇文章的学习，对DOM有一定的了解。但这仅仅是DOM一些基础性的知识，如果要对DOM更了解，需要更深入地了解DOM节点。在这一节中，咱们将围绕DOM的节点属性、标签和内容来展开。这样我们就可以更进一步的了解它们是什么？以及它们最常的属性。

这两天一直在看DOM元素的attribute和property，简单让人晕。从直译上，我一开始都理解为“属性”，而且对于我这样的新手，将两者混淆在一起，傻傻的分不清楚。后来经过大大们的指点，知道两者是不同的东西，但两者之间又有紧密的联系。为了能更清晰的整明白两者的关系与不同，所以把自己理解和搜集的资料理了一下，希望对新手有所帮助。

通过前面的学习，我们都知道，DOM并不一定要由存在于HTML中的元素组成。我们仅需要使用几行JavaScript代码就可以将HTML元素添加到你的DOM中。而且你也有能力移动周围的元素，甚至删除它们。除了这一切之外，我们还可以动态地创建和修改DOM中的元素，而且这一DOM操作也是很重要的一个特性，同时也能满足Web网站或应用程序的一些操作。在今天的教程中，我们将继续学习DOM中的一些基础知识。在今天中，我们将研究如何创建元素、删除元素和克隆元素等。简单的说，今天的内容涉及到一些DOM的修改。