DOM编程:使用代码处理网页

披露: 您的支持有助于保持网站的正常运行!我们会为此页面上推荐的某些服务收取推荐费.


文档对象模型或DOM描述HTML页面中的每个元素如何与文档本身相关.

本质上,每个上载到Web的HTML,XHTML或XML页面都将成为文档。 DOM将那些文档视为树结构。文档本身是最顶层的结构,页面上的每个元素都表示为一个对象.

这意味着每个图像,每个段落,每个标题等都是一个单独的对象,该对象与文档具有自己的关系.

通过按名称调用特定元素,Web开发人员可以修改该元素。这意味着Web开发人员可以检索和设置其属性.

DOM还使添加和删除元素或对象成为可能。最后,它允许Web开发人员捕获并响应用户或浏览器的操作,从而有效地处理事件.

DOM简史

DOM的历史可以追溯到浏览器大战和最早的脚本语言发布之日。.

一旦Netscape的Navigator和Microsoft的Internet Explorer都发布了自己的JavaScript版本,开发人员就会发现自己需要一个界面,该界面允许使用这些脚本语言来访问页面上的元素。.

自然,每个浏览器都有自己的方法,但是由于浏览器供应商试图通过添加新功能来超越彼此,这会导致许多兼容性问题。.

最终,W3C开始研究XML DOM的规范,也称为Level 1 DOM,该规范应该可以在所有浏览器之间移植。.

它也适用于可以处理XML文档的任何编程语言。该规范在1998年末被采纳为标准。当前版本是DOM 4,这是2015年的W3C建议书.

DOM的两种观点

DOM由两部分组成;核心和HTML。核心是HTML部分的基础,用于表示XML文档操作文档结构,其元素和属性所需的功能。.

HTML部分定义了特定的HTML元素及其功能。因此,DOM被视为API和对象.

DOM作为API

作为应用程序编程接口(API),它同时用于HTML和XML文档。它为我们提供了在这些文档中使用的一组标准对象,并且还充当了如何组合,访问和操纵这些对象的模型.

DOM作为对象

DOM中的对象模型是指文档和元素被定义为对象的事实。从这个意义上讲,它标识:

  • 用于表示和操作文档的接口和对象
  • 他们的行为和属性
  • 他们的关系.

DOM结构

在结构上,DOM非常类似于它所建模的文档。文档的每个元素都被视为对象或节点,以分层方式组织.

每个节点都有一个功能和一个标识,每个节点还可以具有任意数量的子节点。最常见的节点是元素,文本和属性.

元素节点

元素节点是HTML代码中的单个标记或标记对。它们可以具有子节点,可以是其他元素或文本节点.

文字节点

文本节点是HTML标记之间的实际内容。它们通常具有父节点,有时具有兄弟节点,但不能拥有自己的子节点.

属性节点

属性节点有些特殊。它们没有父节点,子节点或同级节点,但是它们表示HTML标记中定义的属性,例如a标记中的href属性或img标记中的src属性。.

可以使用document.createAttribute()创建新属性,然后可以将其分配给元素节点并设置其值。引用属性的另一种方法是直接使用getAttribute()和setAttribute()方法访问元素的属性来设置其值.

在谈论属性时,值得一提的是,大多数与HTML标签一起使用的属性都是相对简单的,包括与该标签相关联的特定属性的单个值。但是,还有一些样式属性可能会更复杂.

样式属性是在CSS的帮助下应用的。您可以使用它将样式应用于单个标签,特定类型的所有标签,也可以使用类分配样式属性.

为了使问题更加复杂,可以从任何这些来源中继承特定元素的样式。您还可以通过更改标签的样式属性或使用标签的类属性来操纵和更改这些样式.

但是,这样做会更改所有元素的样式参数,在某些情况下,这是不切实际的,特别是如果您只想更改单个样式参数.

幸运的是,样式属性不同于其他属性。它们被定义为对象,并具有每个可能参数的属性。然后可以访问,更新和操纵这些属性.

使用DOM

由于每个文档也是对象,因此它是操作文档中其他节点的起点。可以使用以下方法来访问和操纵这些子节点:

  • getElementById()
  • getElementsByTagName()
  • createElement()
  • createAttribute()
  • createTextNode().

您还可以使用以下方法动态添加,更新和删除节点:

  • insertBefore()
  • replaceChild()
  • removeChild()
  • appendChild()
  • cloneNode().

DOM直接与HTML,CSS和JavaScript绑定,因为它反映了这些标准定义的标签和属性,并充当客户端脚本的API.

资源资源

以下资源列表提供了DOM的详细概述,并且适合初学者和高级用户。还包括参考列表以及示例资源.

  • JavaScript和DOM系列:这是一个非常详细的系列教程,详细介绍了如何使用JavaScript来操作DOM。.
  • JavaScript DOM教程:一组交互式教程,教您如何从JavaScript访问和操作DOM。假定您具有JavaScript的先验知识,但是,值得一提的是,未使用任何特定的库.
  • DOM节点:DOM节点的非常全面的概述,适合希望熟悉DOM的结构以及包含哪些节点的初学者。.
  • JavaScript DOM —练习,练习,解决方案:一组涉及DOM的各种练习,范围从简单的练习到更复杂的练习.
  • W3C文档对象模型(DOM):由W3C发行的本指南提供了对DOM,历史以及其工作方式的入门级和入门级概述.
  • DOM简介:Mozilla开发人员网络发布的DOM的简要概念性介绍,解释了DOM如何提供HTML和XML文档的结构以及如何访问它.
  • W3C DOM4:W3C于2015年发布的最新DOM建议,其中包含DOM的概述和详细规范.
  • DOM参考:由Microsoft开发人员网络发布的便捷参考列表,其中包括属性,方法,事件等.

图书

如果您喜欢从书本中学习,则有很多选择。列表中的书详细介绍了DOM,它如何工作以及如何操纵文档。.

  • DOM脚本:使用JavaScript和文档对象模型进行Web设计(2005),作者杰里米·基思(Jeremy Keith):这本书为那些不是代码专家但是想要快速学习并利用JavaScript和DOM的人提供了快速便捷的参考。网站的功能。它包含大量示例,并指导读者构建多个实际项目.
  • 文档对象模型(2002),作者:乔·马里尼(Joe Marini):这本书的作者可以帮助您学习DOM的概念,设计,理论和起源。在整本书中,您将使用DOM来检查,导航和操作文档的节点和内容;然后学习构建有用的应用程序,这些应用程序可以轻松移植到任何符合DOM的实现中,而无需重新编码.
  • DOM启发:Cody Lindley撰写的《探索JavaScript和现代DOM》(2013年):借助本书,您将学习如何通过编写文档对象模型(DOM)脚本而不使用DOM库来更有效地操作HTML。通过大量易于理解的示例,作者为您提供了现代DOM概念的完整演练,以演示各种节点对象的工作方式。.

前进并遍历DOM

了解DOM是任何有抱负的Web开发人员的基本概念之一.

最好的部分是您不需要任何特殊工具即可开始使用它。您只需要一个脚本和您喜欢的浏览器。创建脚本并将其包含在网页中后,您就可以开始使用文档或窗口元素的API以各种方式操作文档.

以上资源将作为您遍历DOM的坚实起点.

进一步阅读和资源

我们有更多与编码和网站开发有关的指南,教程和信息图:

  • 撰写好的HTML:这是编写格式正确的HTML和使用HTML验证程序软件的扎实介绍.
  • CSS3 —简介,指南和资源:这是开始学习网页布局的好地方.
  • ASP.NET资源:本指南将指导您使用Microsoft的.NET框架来创建网页.

初学者HTML —终极指南

如果您真的想学习HTML,我们写了一本篇长的文章《初学者HTML —终极指南》.

这确实是最终指南;它会带您从一开始就精通.

初学者HTML-终极指南
初学者HTML —终极指南

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map