javascript和web开发：使用文档对象模型

本文将向您介绍JavaScript使用的文档框架。有了这个抽象文档对象模型的工作知识，您可以编写在任何网页上工作的JavaScript。...

本文将向您介绍JavaScript使用的文档框架。有了这个抽象文档对象模型的工作知识，您可以编写在任何网页上工作的JavaScript。

介绍

网页和JavaScript是如何协同工作的，它们是如何相互通信的？答案在于理解文档对象模型是如何工作的。

dom的目的

DOM组织web页面的内容，并为其提供路线图。模型由节点组成。节点被安排成一个层次结构，最好将其视为一个树结构。我们应该能够接受任何HTML并以这种方式表示它。

例如，此段落的文本是文档对象模型中的一个节点。段落是另一个节点，也是文本节点的父节点。文档本身最终是两者的父节点。

我们可以编写JavaScript，通过标识节点在网页上执行操作。因为每一部分内容都是一个节点，所以我们可以编写与我们想要更改的任何实体相关的JavaScript。您会注意到这与CSS的工作原理类似：它通过使用HTML元素的id和类属性将样式或视觉外观应用于内容，就像JavaScript控制行为一样。

需要注意的是，CSS和JavaScript不是在DOM中找到的，而是在DOM之外。它们都操纵DOM的内容，而不是驻留在DOM中。

重用代码

为什么网页的源代码是这样管理的？主要原因有两个：

将JavaScript存储在单独的文件中可以更容易地重用代码。当JavaScript以内联方式编写时，必须将其复制到与之关联的内容旁边，才能在其他地方使用相同的功能。
通过从内容（HTML）中删除网页（JavaScript）的功能，分离到外部文件的JavaScript使源代码更具可读性。

dom的节点

您创建和控制的节点仅限于HTML规范和浏览器支持的节点。这就是HTML5引入新的顶级元素非常重要的原因之一。

出于我们的目的，最重要的节点类型包括：

元素
属性
正文

尽管该规范实际上总共列出了12个。

使用脚本在dom中创建节点

为了进行简单的演示，我们将使用JavaScript创建一个特定的元素。

在这里，我们将通过使用JS创建web最基本、最常见的web页面对象之一，即标题，向您展示JS的强大功能。

按照这个例子，创建一个完整的虚拟服务器是不值得的，所以使用一个在线沙盒。你会想要一个轻量级的游乐场来进行类似JSBin的实验。JSBin非常棒，因为它是多窗格的，并且包括一种可以同时查看和操作所有内容的方法：HTML、JS、CSS和网页预览。

（Codepen与此类似，并且为了本例的缘故，它也同样适用。）

JSBin还可以为JS草稿行动态创建URL，以便以后共享。这是我为这个例子生成的一个。

我复制并评论了以下片段，以在正文中生成一个新的H1标题：

HTML代码段
JavaScript Snippet //declare a new variable to hold a new h1 elementvar newHeading = document.createElement("h1");//add the text node to the documentvar h1Text = document.createTextNode("Heading Level 1");//make it a child node of the new headingnewHeading.appendChild(h1Text);//append this as a child of element defined as "bt"document.getElementById("bt").appendChild(newHeading);

它创建一个新的H1元素，其内容直接从属于开始标记。

请注意，左侧窗格中的源HTML没有更改。在本例中，该代码相当容易阅读。在高级Javascript中，事情会变得复杂得多。

关于javascript的词汇结构

上面的片段有一些解释。

varcreates a variable, which stores an arbitrary value for your code to use.
=is an assignment operator. Here it operates with the varterm and the new variable's name (e.g., newHeading) to form a complete declaration.
object.methodis an invocation that uses "dot" syntax to separate objects, like the document, from the methods being used in regard to them, as in getElementById.
- 编程中的“对象”概念值得大量讨论，不在本文讨论范围之内。只需说它们是应用程序的重要组件。
- 方法是您所期望的：可以应用于对象的特定过程或计划的操作。

我们为您提供了大量学习JavaScript的优秀资源。查看我们的编程部分了解更多信息。