网站建设模板哪里有,it运维专员,湖南人文科技学院学费,英语培训打开网页时#xff0c;浏览器会检索网页的 HTML 文本并对其进行解析#xff0c;就像第 12 章中的解析器解析程序一样。浏览器会建立一个文档结构模型#xff0c;并使用该模型在屏幕上绘制页面。这种文档表示法是 JavaScript 程序在沙盒中的玩具之一。它是一种可以读取或修改… 打开网页时浏览器会检索网页的 HTML 文本并对其进行解析就像第 12 章中的解析器解析程序一样。浏览器会建立一个文档结构模型并使用该模型在屏幕上绘制页面。这种文档表示法是 JavaScript 程序在沙盒中的玩具之一。它是一种可以读取或修改的数据结构。它就像一个实时数据结构当它被修改时屏幕上的页面也会随之更新以反映变化。
文件结构 你可以把 HTML 文档想象成一组嵌套的方框。body和/body等标签包含其他标签而这些标签又包含其他标签或文本。下面是上一章的示例文档 该页面的结构如下 浏览器用来表示文档的数据结构就是这种形状。每个方框都有一个对象我们可以通过与该对象交互来了解它所代表的 HTML 标记以及它包含的方框和文本。这种表示方法称为文档对象模型简称 DOM。 通过全局绑定文档我们可以访问这些对象。它的 documentElement 属性指的是代表 html 标记的对象。由于每个 HTML 文档都有 head 和 body因此它也有指向这些元素的 head 和 body 属性。
树 回想一下第 12 章中的语法树。它们的结构与浏览器文档的结构极为相似。每个节点都可以指向其他节点子节点而子节点又可以有自己的子节点。这种形状是典型的嵌套结构其中的元素可以包含与自身相似的子元素。 当数据结构具有分支结构、无循环节点不得直接或间接包含自身和单一、定义明确的根时我们就称其为树。在 DOM 中document.documentElement 就是根节点。树在计算机科学中经常出现。除了表示 HTML 文档或程序等递归结构外树还经常用于维护分类数据集因为在树中查找或插入元素通常比在平面数组中更有效率。 典型的树状结构有不同类型的节点。Egg 语言的语法树有标识符、值和应用节点。应用程序节点可能有子节点而标识符和值是叶子或者说是没有子节点的节点。DOM 也是如此。代表 HTML 标记的元素节点决定了文档的结构。这些节点可以有子节点。document.body 就是这样一个节点。其中一些子节点可以是叶子节点如文本片段或注释节点。 每个 DOM 节点对象都有一个 nodeType 属性其中包含一个标识节点类型的代码数字。元素的代码为 1也定义为常量属性 Node.ELEMENT_NODE。文本节点代表文档中的一段文本代码为 3Node.TEXT_NODE。注释的代码为 8Node.COMMENT_NODE。
另一种可视化文档树的方法如下 叶子是文本节点箭头表示节点之间的父子关系。
标准 使用隐晦的数字代码来表示节点类型并不像 JavaScript 所做的那样。在本章后面的内容中我们将看到 DOM 界面的其他部分也让人感觉繁琐和陌生。这是因为 DOM 界面并不只是为 JavaScript 设计的。相反它试图成为一个语言中立的界面可以在其他系统中使用不仅适用于 HTML也适用于 XML后者是一种具有类似 HTML 语法的通用数据格式。这是令人遗憾的。标准往往是有用的。但在这种情况下其优势跨语言一致性并不那么引人注目。与跨语言的熟悉界面相比拥有一个与你正在使用的语言适当整合的界面会为你节省更多的时间。以 DOM 中元素节点所具有的 childNodes 属性为例就可以说明这种整合不佳的情况。该属性包含一个类似数组的对象具有长度属性和用数字标注的属性用于访问子节点。但它是 NodeList 类型的一个实例而不是一个真正的数组因此它没有 slice 和 map 等方法。 还有一些问题是由于设计不当造成的。例如创建一个新节点后无法立即为其添加子节点或属性。相反您必须首先创建它然后使用副作用逐个添加子节点和属性。与 DOM 进行大量交互的代码往往会变得冗长、重复和难看。但这些缺陷并不是致命的。由于 JavaScript 允许我们创建自己的抽象因此可以设计出更好的方法来表达我们正在执行的操作。许多用于浏览器编程的库都带有这样的工具。
在树上移动
DOM 节点包含大量指向附近其他节点的链接。下图对此进行了说明 虽然图中只显示了每种类型的一个链接但每个节点都有一个 parentNode 属性指向它所属的节点如果有的话。同样每个元素节点节点类型 1都有一个子节点childNodes属性指向一个包含其子节点的数组对象。 理论上只需使用这些父节点和子节点链接你就可以在树中任意移动。但 JavaScript 还提供了一些额外的便利链接。firstChild 和 lastChild 属性指向第一个和最后一个子元素如果节点没有子元素则其值为空。同样previousSibling 和 nextSibling 属性指向相邻节点即在节点本身之前或之后出现的具有相同父节点的节点。对于第一个子节点previousSibling 的值为空而对于最后一个子节点nextSibling 的值为空。 还有一个 children 属性它与 childNodes 类似但只包含元素类型 1的子节点不包含其他类型的子节点。当你对文本节点不感兴趣时这可能会很有用。 在处理像这样的嵌套数据结构时递归函数通常很有用。下面的函数会扫描文档查找包含给定字符串的文本节点找到后返回 true 文本节点的 nodeValue 属性包含它所代表的文本字符串。
查找元素 在父节点、子节点和同级节点之间浏览这些链接通常很有用。但是如果我们想找到文档中的一个特定节点那么从 document.body 开始并沿着固定的属性路径找到它就不是一个好主意了。这样做会在我们的程序中加入对文档精确结构的假设--而这种结构可能是你以后想要改变的。另一个复杂因素是即使在节点之间的空白处也会创建文本节点。示例文档的 body 标记不仅有三个子节点h1 和两个 p 元素而且有七个这三个子节点加上它们之前、之后和之间的空格。 如果我们想获取该文档中链接的 href 属性就不能说 “获取文档 body 第六个子元素的第二个子元素 ”这样的话。如果我们能说 “获取文档中的第一个链接 ”就更好了。我们可以这样做。 所有元素节点都有一个 getElementsByTagName 方法该方法会收集所有带有给定标记名的元素这些元素都是该节点的后代直接或间接子节点并以数组对象的形式返回。
要查找特定的单个节点可以给它一个 id 属性然后使用 document.getElementById 代替。 第三个类似的方法是 getElementsByClassName与 getElementsByTagName 一样它也是通过搜索元素节点的内容检索所有在其 class 属性中包含给定字符串的元素。
改变文档 DOM 数据结构的几乎所有内容都可以更改。文档树的形状可以通过改变父子关系来修改。节点有一个 remove 方法可以将节点从当前父节点中移除。要为元素节点添加子节点我们可以使用 appendChild将其放在子节点列表的末尾或 insertBefore将作为第一个参数的节点插入到作为第二个参数的节点之前。 一个节点在文档中只能存在于一个位置。因此在段落一前面插入段落三将首先从文档末尾移除该段落然后在段落一前面插入该段落结果是三/一/二。所有在某处插入节点的操作都会产生副作用导致节点从其当前位置如果有的话移除。 replaceChild 方法用于用另一个节点替换一个子节点。它需要两个节点作为参数一个新节点和要替换的节点。被替换的节点必须是调用该方法的元素的子节点。请注意replaceChild 和 insertBefore 方法的第一个参数都是新节点。
创建节点 假设我们要编写一个脚本用图片 alt 属性中的文本替换文档中的所有图片img 标记。这不仅需要删除图像还需要添加一个新的文本节点来替换它们。 如果给定一个字符串createTextNode 将为我们提供一个文本节点我们可以将其插入文档使其显示在屏幕上。遍历图像的循环从列表末尾开始。这是必要的因为由 getElementsByTagName 等方法或 childNodes 等属性返回的节点列表是实时的。也就是说它会随着文档的变化而更新。如果我们从头开始移除第一张图片会导致列表丢失第一个元素这样当循环第二次重复时当 i 为 1 时循环就会停止因为此时集合的长度也是 1。如果你想要一个实体的节点集合而不是一个活的节点集合你可以通过调用 Array.from 将集合转换为一个真正的数组。 要创建元素节点可以使用 document.createElement 方法。该方法接收一个标记名并返回一个给定类型的新空节点。
下面的示例定义了一个实用程序 elt它可以创建一个元素节点并将其余参数视为该节点的子节点。该函数用于为引文添加属性。 属性 某些元素属性如链接的 href可以通过元素 DOM 对象上的同名属性进行访问。大多数常用的标准属性都是如此。HTML 允许在节点上设置任何属性。这非常有用因为它可以在文档中存储额外的信息。要读取或更改自定义属性这些属性不能作为常规对象属性使用必须使用 getAttribute 和 setAttribute 方法。 建议在此类编造的属性名称前加上 data- 字样以确保它们不会与任何其他属性冲突。 有一个常用的属性--class是 JavaScript 语言中的一个关键字。由于历史原因一些旧的 JavaScript 实现无法处理与关键字匹配的属性名称用于访问该属性的属性称为 className。您也可以使用 getAttribute 和 setAttribute 方法访问它的真名 “class”。
布局 你可能已经注意到不同类型的元素的布局方式是不同的。有些元素例如段落p或标题h1占据文档的整个宽度并且呈现在单独的行上。这些称为块级元素。其他元素例如链接a或strong元素则与周围文本在同一行呈现。这些称为行内元素。对于任何给定的文档浏览器能够计算出一个布局该布局为每个元素基于其类型和内容分配大小和位置。然后这个布局用于实际绘制文档。 可以通过JavaScript访问元素的大小和位置。offsetWidth和offsetHeight属性给出元素在像素中占据的空间。像素是浏览器中的基本测量单位。它通常对应于屏幕上可以绘制的最小点但在现代显示器上由于可以绘制非常小的点这可能不再成立并且浏览器像素可能跨越多个显示点。
类似地clientWidth和clientHeight给出元素内部空间的大小忽略边框宽度。 要找到元素在屏幕上的精确位置最有效的方法是使用 getBoundingClientRect 方法。该方法会返回一个包含顶部、底部、左侧和右侧属性的对象表示元素两侧相对于屏幕左上方的像素位置。如果需要相对于整个文档的像素位置则必须添加当前的滚动位置这可以在 pageXOffset 和 pageYOffset 绑定中找到。 排版文档是一项相当繁重的工作。为了提高速度每次更改文档时浏览器引擎都不会立即重新布局而是尽可能等待一段时间后再重新布局。当更改文档的 JavaScript 程序运行完毕后浏览器必须计算出新的布局才能将更改后的文档绘制到屏幕上。当程序通过读取偏移高度offsetHeight等属性或调用 getBoundingClientRect 来询问某些内容的位置或大小时提供这些信息也需要计算布局。如果程序在读取 DOM 布局信息和更改 DOM 之间反复交替就必须进行大量的布局计算因此运行速度会非常慢。下面的代码就是一个例子。它包含两个不同的程序分别建立一行 2000 像素宽的 X 字符并测量每个程序所需的时间。 样式 我们看到不同的 HTML 元素以不同的方式绘制。有些元素以块级方式显示而其他元素则是行内显示。有些元素还添加了样式——例如strong 使其内容变为粗体而 a 标签则使文本变为蓝色并加下划线。img 标签显示图像的方式或 a 标签在点击时跟随链接的方式与元素类型密切相关。但是我们可以更改与元素关联的样式例如文本颜色或下划线。以下是一个使用 style 属性的示例 一个样式属性可以包含一个或多个声明即一个属性如颜色后面跟一个冒号和一个值如绿色。如果有多个声明必须用分号隔开如 文档的很多方面都会受到样式的影响。例如显示属性可以控制一个元素是显示为块元素还是内联元素。 由于块元素不会与周围的文本同列显示因此块标签将在自己的行中结束。最后一个标签是完全不显示--display: none 可以防止元素显示在屏幕上。这是一种隐藏元素的方法。这通常比将元素从文档中完全删除要好因为这样可以方便以后再次显示。 JavaScript 代码可以通过元素的样式属性直接操作元素的样式。该属性包含一个对象该对象具有所有可能的样式属性。这些属性的值都是字符串我们可以通过写入字符串来改变元素样式的某个特定方面。 有些样式属性名包含连字符如 font-family。由于在 JavaScript 中使用此类属性名比较麻烦必须使用 style[“font-family”]因此样式对象中的此类属性名都去掉了连字符并将后面的字母大写style.fontFamily。
级联样式 HTML 的样式系统称为 CSS即级联样式表。样式表是文档中元素样式的一组规则。它可以在 style 标签中给出。 名称中的“层叠”指的是多个此类规则被组合在一起以产生元素的最终样式。在这个例子中strong 标签的默认样式使其字体加粗被 style 标签中的规则覆盖该规则添加了字体样式和颜色。当多个规则为同一属性定义值时最近读取的规则具有更高的优先级并胜出就近原则。例如如果 style 标签中的规则包含 font-weight: normal与默认的 font-weight 规则相矛盾那么文本将是正常的而不是粗体。直接应用于节点的 style 属性中的样式具有最高优先级并始终胜出。
在 CSS 规则中可以定位除标签名以外的其他内容。针对 .abc 的规则适用于所有类属性中包含“abc”的元素。针对 #xyz 的规则适用于 id 属性为“xyz”的元素在文档中应是唯一的。 优先级规则优先考虑最近定义的规则仅在规则具有相同的特异性时适用。规则的特异性是衡量它描述匹配元素的精确程度取决于所需元素方面的数量和种类标签、类或 ID。例如针对 p.a 的规则比针对 p 或仅 .a 的规则更具特异性因此会优先于它们。表示法 p a {…} 将指定的样式应用于所有直接子元素为 p 标签的 a 标签。同样p a {…} 将应用于所有位于 p 标签内部的 a 标签无论它们是直接子元素还是间接子元素。
查询选择器 在本书中我们不会经常使用样式表。了解样式表对在浏览器中编程很有帮助但它们非常复杂需要单独写一本书。我介绍选择器语法--样式表中用于确定一组样式适用于哪些元素的符号--的主要原因是我们可以使用相同的迷你语言作为查找 DOM 元素的有效方法。
querySelectorAll 方法既定义在文档对象上也定义在元素节点上它接收一个选择器字符串并返回一个包含所有匹配元素的 NodeList。 与 getElementsByTagName 等方法不同querySelectorAll 返回的对象不是实时对象。当你更改文档时它不会改变。不过它仍然不是一个真正的数组所以如果你想把它当作一个数组就需要调用 Array.from。querySelector 方法没有 All 部分的工作方式与此类似。如果你想要特定的单个元素这个方法就很有用。它只会返回第一个匹配的元素如果没有匹配的元素则返回空值。
定位和动画 position 样式属性以一种强大的方式影响布局。它的默认值为static这意味着元素位于文档中的正常位置。当设置为relative时元素仍占用文档中的空间但现在可以使用top和left样式属性将其相对于正常位置移动。当 position 设置为absolute位置时该元素将从文档的正常流程中移除也就是说它不再占用空间并可能与其他元素重叠。它的top和left属性可用于将其相对于position属性不是static的最近包围元素的左上角进行绝对定位如果没有这样的包围元素则可将其相对于文档进行绝对定位。
我们可以用它来创建动画。下面的文档显示了一幅在椭圆形中移动的猫的图片 我们的图片在页面上居中位置为相对位置。我们将反复更新图片的顶部和左侧样式以移动图片。只要浏览器准备好重新绘制屏幕脚本就会使用 requestAnimationFrame 调度 animate 函数运行。动画函数本身会再次调用 requestAnimationFrame 来安排下一次更新。当浏览器窗口或标签页处于活动状态时这将导致更新以大约每秒 60 次的速度进行从而产生好看的动画。 如果我们只是循环更新 DOM页面就会冻结屏幕上也不会显示任何内容。浏览器不会在 JavaScript 程序运行时更新显示内容也不允许与页面进行任何交互。这就是我们需要 requestAnimationFrame 的原因--它让浏览器知道我们暂时完成了任务它可以继续做浏览器要做的事情例如更新屏幕和响应用户操作。 动画函数的参数是当前时间。为确保猫每毫秒的运动稳定它将角度变化的速度建立在当前时间与函数上次运行时间之差的基础上。如果每步只移动固定的角度那么当同一台电脑上运行的另一项繁重任务导致函数无法运行几分之一秒时运动就会出现停顿。 圆周运动是通过三角函数 Math.cos 和 Math.sin 完成的。对于不熟悉这两个函数的读者我将简要介绍它们因为我们在本书中偶尔会用到它们。 Math.cos 和 Math.sin 可用于查找位于半径为 1 的点00周围圆上的点。这两个函数都将其参数解释为圆上的位置0 表示圆最右边的点顺时针方向直到 2π约 6.28绕完整个圆为止。Math.cos 可以告诉您给定位置对应点的 x 坐标Math.sin 可以得出 y 坐标。位置或角度大于 2π 或小于 0 都是有效的--旋转重复进行因此 a2π 指的是与 a 相同的角度。这种测量角度的单位称为弧度--一整圈是 2π 弧度类似于用度数测量时的 360 度。常数 π 在 JavaScript 中可以用 Math.PI 表示。 猫动画代码为动画的当前角度保留了一个计数器 angle并在每次调用 animate 函数时递增。然后它就可以使用这个角度来计算图像元素的当前位置。顶部样式用 Math.sin 计算然后乘以 20即我们椭圆的垂直半径。左侧样式基于 Math.cos 并乘以 200因此椭圆的宽度远大于高度。 请注意样式通常需要单位。在这种情况下我们必须在数字后面加上 “px”告诉浏览器我们是以像素为单位而不是厘米、ems 或其他单位。这一点很容易忘记。使用不带单位的数字会导致您的样式被忽略除非该数字为 0这意味着无论使用什么单位都是一样的。
总结 JavaScript 程序可以通过一个名为 DOM 的数据结构来检查和干扰浏览器正在显示的文档。这个数据结构代表了浏览器的文档模型JavaScript 程序可以通过修改它来改变可见文档。 DOM 的组织结构就像一棵树其中的元素根据文档的结构分层排列。代表元素的对象具有父节点parentNode和子节点childNodes等属性可用于在树中导航。 文档的显示方式可以受到样式的影响既可以直接将样式附加到节点上也可以定义与某些节点匹配的规则。有许多不同的样式属性如颜色或显示。JavaScript 代码可以直接通过元素的样式属性来操作元素的样式。
