《JavaScript DOM 编程艺术》读书笔记之DOM基础

这篇文章主要了《JavaScript DOM 编程艺术》中关于DOM基础的知识。对于初学者来说，这是一个很好的入门指南。

DOM，即文档对象模型，是HTML和XML文档的编程接口。在DOM中，每一个元素都被视为一个节点，这些节点共同构成了文档的结构。这些节点包括元素节点、文本节点和属性节点。元素节点是DOM中的原子单位，如、

和

等。它们可以包含其他的元素。而文本节点则总是被包含在元素节点的内部。属性节点则用于对元素进行更具体的描述，例如每个元素都有一个title属性。

在JavaScript中，我们可以通过几种方法来获取元素，如getElementById、getElementsByTagName和getElementsByClassName。其中，getElementsByTagName可以接收一个通配符作为参数，这意味着文档中的每个元素都会在这个函数返回的数组中占据一席之地。我们还可以结合getElementById和getElementsByTagName来获取信息。例如，我们可以先通过getElementById获取一个特定的元素，然后通过getElementsByTagName在其下寻找更多的元素。

对于较新的浏览器，还提供了getElementsByClassName方法。但如果某些浏览器不支持这个方法，我们可以通过已有的DOM方法来实现自己的getElementsByClassName函数。这个函数接受两个参数：一个表示DOM树中的搜索起点，另一个是要搜索的类名。通过这种方式，我们可以方便地获取到具有特定类名的所有元素。

我们还可以使用getAttribute和setAttribute函数来获取和设置元素的属性。getAttribute函数接受一个参数——你打算查询的属性的名字。而setAttribute函数则允许我们对属性节点的值进行修改。这样，我们就可以在JavaScript中动态地操作DOM元素的属性了。

《JavaScript DOM 编程艺术》为我们提供了一种理解和操作DOM的方式，使我们能够在JavaScript中更方便地操作HTML和XML文档。如果你是初学者或者想要进一步提高你的JavaScript技能，这本书是一个很好的选择。通过学习和实践这本书中的内容，你将能够更深入地理解DOM，并在JavaScript开发中更加得心应手。在网页开发中，我们经常使用 `setAttribute` 方法对文档进行修改，以改变元素的属性或行为。当我们在浏览器中通过“view source”（查看源代码）功能时，会发现所显示的源代码中并未反映出这些修改后的属性值。这种看似矛盾的现象，实则揭示了DOM（文档对象模型）的工作机制。

DOM是一个特殊的接口，它让我们能够通过编程方式动态地访问和更新网页内容、结构和样式。在浏览器加载网页时，它会首先加载文档的静态内容，这些内容构成了我们看到的网页基础结构。之后，DOM会根据用户的交互行为或脚本代码进行动态刷新，这种刷新不会改变文档的静态内容。也就是说，虽然我们可以通过 `setAttribute` 修改元素的属性，但这些改动并不会反映在文档的源代码中。这是因为源代码是静态的，而DOM则是动态的。这种动态的特性正是DOM的强大之处，它使得我们能够在不刷新浏览器的情况下，对页面内容进行实时的修改和更新。

这就像我们手上的一本精装书。书的内容（即网页的静态内容）在印刷时就已确定，无法更改。但当我们阅读时，可以通过手中的笔（即DOM）在书页上添加笔记或修改某些内容。这些修改在我们的阅读过程中是可见的，但并不会改变书的原始内容。即使我们以后再次打开这本书，这些修改也不会出现在书中。这就是DOM的工作方式——先加载静态内容，再根据需要动态更新。这正是DOM的强大之处，它为我们提供了丰富的交互性和灵活性，使得网页开发更加灵活和高效。同时这种设计也使得我们可以充分利用浏览器对页面的即时更新能力而无需每次都重新加载整个页面。这也是现代web开发中不可或缺的一部分。