javascript基础从小白到高手系列二百九十八:DOM

文档对象模型(DOM,Document Object Model)是 HTML 和 XML 文档的编程接口。DOM 表示 由多层节点构成的文档,通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早 期的动态 HTML(DHTML,Dynamic HTML),DOM 现在是真正跨平台、语言无关的表示和操作网页 的方式。

DOM Level 1 在 1998 年成为 W3C 推荐标准,提供了基本文档结构和查询的接口。本章之所以介绍 DOM,主要因为它与浏览器中的 HTML 网页相关,并且在 JavaScript 中提供了 DOM API。

节点层级

任何 HTML 或 XML 文档都可以用 DOM 表示为一个由节点构成的层级结构。节点分很多类型,每 种类型对应着文档中不同的信息和(或)标记,也都有自己不同的特性、数据和方法,而且与其他类型 有某种关系。这些关系构成了层级,让标记可以表示为一个以特定节点为根的树形结构。以下面的 HTML 为例:

   <html>
      <head>
        <title>Sample Page</title>
      </head>
      <body>
        <p>Hello World!</p>
      </body>
    </html>

如果表示为层级结构,则如图 14-1 所示。

其中,document 节点表示每个文档的根节点。在这里,根节点的唯一子节点是元素,我们称之 为文档元素(documentElement)。文档元素是文档最外层的元素,所有其他元素都存在于这个元素之 内。每个文档只能有一个文档元素。在 HTML 页面中,文档元素始终是元素。在 XML 文档中, 则没有这样预定义的元素,任何元素都可能成为文档元素。
HTML 中的每段标记都可以表示为这个树形结构中的一个节点。元素节点表示 HTML 元素,属性 节点表示属性,文档类型节点表示文档类型,注释节点表示注释。DOM 中总共有 12 种节点类型,这些 类型都继承一种基本类型。

Node类型

DOM Level 1 描述了名为 Node 的接口,这个接口是所有 DOM 节点类型都必须实现的。Node 接口 在 JavaScript 中被实现为 Node 类型,在除 IE 之外的所有浏览器中都可以直接访问这个类型。在 JavaScript 中,所有节点类型都继承 Node 类型,因此所有类型都共享相同的基本属性和方法。
每个节点都有 nodeType 属性,表示该节点的类型。节点类型由定义在 Node 类型上的 12 个数值 常量表示:
 Node.ELEMENT_NODE(1)
 Node.ATTRIBUTE_NODE(2)
 Node.TEXT_NODE(3)
 Node.CDATA_SECTION_NODE(4)

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: HTML DOM,即HTML文档对象模型,是一种用于访问和操作HTML文档中元素的标准方法。在JavaScript中,可以使用DOM来查找、修改、添加和删除HTML元素。在本教程中,我们将学习如何使用DOM来操作HTML文档的元素。 ### 回答2: JavaScript学习手册十四:HTML DOM——文档元素的操作(二)介绍了文档元素的一些高级操作,包括插入和删除节点、替换节点、复制节点等。下面我将详细介绍这些操作的用法和注意事项。 首先是插入节点,包括appendChild()和insertBefore()方法。appendChild()方法可以将一个节点追加到某个元素的子节点列表的末尾,而insertBefore()方法可将一个节点插入到元素的指定位置。这两个方法都可以接收字符串、元素、文本节点等参数,可以将它们转换为节点后插入。需要注意的是,插入节点后必须重新获取元素才能正确地操作修改后的DOM树。 接下来是删除节点,包括removeChild()和replaceChild()方法。removeChild()方法可以移除指定节点,replaceChild()方法则可将指定节点替换为另一个节点。调用这两个方法也需要重新获取元素。 另外,还有cloneNode()和hasChildNodes()方法。cloneNode()方法可以复制一个节点,包括节点的属性、事件、插入的子节点等,但不包括子节点的引用和事件处理程序。hasChildNodes()方法可判断节点是否包含子节点。 需要注意的是,在使用这些高级DOM操作时,应尽可能减少DOM的操作次数。因为频繁操作DOM可能会导致性能问题,因此应该尽可能缓存和重用DOM元素,同时避免频繁更新DOM。此外,在修改DOM树时,应当小心操作,避免影响网页布局和用户体验。 总之,JavaScript学习手册十四:HTML DOM——文档元素的操作(二)提供了一些高级操作DOM树的方法,可以方便地插入、删除、替换和复制节点。合理地使用这些方法,可以为网页的构建、交互和流畅度提供帮助。 ### 回答3: HTML DOMJavaScript操作HTML和XML的接口,它将HTML和XML文档表示为具有层次结构的节点树,通过对节点树进行操作,可以实现对文档元素的增删改查。之前我们已经学习了文档元素的遍历和属性的操作,本篇文章将进一步介绍如何对文档元素进行插入、替换和移除操作。 文档元素的插入操作,可以通过createElement()方法创建一个元素节点,然后通过appendChild()将该节点插入到指定的父节点下。还可以使用insertBefore()方法在指定位置插入节点,该方法需要指定要插入的节点和插入位置的参考节点。同时还可以使用insertAdjacentHTML()方法直接插入HTML代码并将其转换为节点。 文档元素的替换操作,可以通过replaceChild()方法实现,该方法需要指定要替换的节点和替换后的新节点。替换操作可以用于更新页面中的元素,比如将旧的图片替换成新的图片等。 文档元素的移除操作,可以通过removeChild()方法实现,该方法需要指定要移除的节点,并将其从父元素节点中删除。还可以使用remove()方法直接将元素节点从页面中删除。 在进行文档元素操作时,需要注意避免对页面结构造成破坏,比如插入重复的元素或删除父元素节点等操作。另外,DOM操作可能会影响页面的性能,因此在实际应用中需要谨慎处理。 总的来说,HTML DOM提供了丰富的接口,可以实现对文档元素的灵活操作,帮助我们更好地控制和管理页面内容。对于Web前端开发者而言,熟练掌握HTML DOM操作技巧是非常重要的一项技能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值