`

DOM 基础

    博客分类:
  • DOM
阅读更多

What is the DOM?

With JavaScript you can restructure an entire HTML document. You can add, remove, change, or reorder items on a page.

To change anything on a page, JavaScript needs access to all elements in the HTML document. This access, along with methods and properties to add, move, change, or remove HTML elements, is given through the Document Object Model (DOM).

In 1998, W3C published the Level 1 DOM specification. This specification allowed access to and manipulation of every single element in an HTML page.

All browsers have implemented this recommendation, and therefore, incompatibility problems in the DOM have almost disappeared.

The DOM can be used by JavaScript to read and change HTML, XHTML, and XML documents.

The DOM is separated into different parts (Core, XML, and HTML) and different levels (DOM Level 1/2/3):

  • Core DOM - defines a standard set of objects for any structured document
  • XML DOM - defines a standard set of objects for XML documents
  • HTML DOM - defines a standard set of objects for HTML documents


Everything in an HTML document is a node.

Nodes

According to the DOM, everything in an HTML document is a node.

The DOM says that:

  • The entire document is a document node
  • Every HTML tag is an element node
  • The texts contained in the HTML elements are text nodes
  • Every HTML attribute is an attribute node
  • Comments are comment nodes

 Node Hierarchy

Nodes have a hierarchical relationship to each other.

All nodes in an HTML document form a document tree (or node tree). The tree starts at the document node and continues to branch out until it has reached all text nodes at the lowest level of the tree.

The following figure represents a document tree (node tree):

DOM HTML tree

 

分享到:
评论

相关推荐

    DOM基础及DOM操作HTML

    **DOM基础** DOM,全称为Document Object Model,中文译为文档对象模型,是W3C组织制定的一个标准,用于表示XML或HTML文档的一种结构化表示方式。DOM将整个文档视为一个由节点组成的树形结构,其中每个节点代表文档...

    DOM基础(ppt).pdf

    标题《DOM基础》和描述《JavaScript DOM基础》表明这是一份关于JavaScript文档对象模型(Document Object Model,简称DOM)的入门级教学内容。DOM是编程语言中一个用于HTML和XML文档的API,它提供了一种方式,使得...

    JvavScript之dom基础(源代码)

    JvavScript之dom基础(源代码)JvavScript之dom基础(源代码)JvavScript之dom基础(源代码)JvavScript之dom基础(源代码)JvavScript之dom基础(源代码)JvavScript之dom基础(源代码)JvavScript之dom基础(源...

    HTML DOM基础教程(网页形式)

    DOM 首页 DOM 简介 DOM 节点 DOM 节点树 DOM 节点访问 DOM 节点信息 DOM How To DOM 参考 DOM 总结 DOM 实例 DOM 实例 DOM 对象 DOM Window DOM Navigator DOM Screen DOM History DOM Location DOM ...

    html.rar_dom基础学习

    DOM基础学习主要包括以下几个方面: 1. **DOM结构**:DOM将HTML文档解析为一棵由节点组成的树,其中每个元素、属性和文本都对应一个节点。根节点是`<html>`,下面包含`<head>`和`<body>`两个子节点。元素节点有子...

    XML DOM基础教程(免费资源)

    这个“XML DOM基础教程”显然是为了帮助初学者理解和掌握XML与DOM的核心概念。 XML的主要用途是存储和传输结构化数据。它与HTML不同,HTML主要用于显示数据,而XML则专注于数据的结构和意义。XML文档由一系列元素...

    DOM基础.pdf

    文档对象模型(DOM,Document Object Model)是Web开发...以上是DOM基础中涉及到的关键知识点,它们构成了网页动态交互和内容管理的基础。通过深入理解和应用这些知识点,可以有效地控制网页元素的动态行为和样式表现。

    05-DOM基础.pptx

    总的来说,DOM基础是JavaScript中进行动态网页开发的关键技能,通过熟练掌握DOM节点的操作和元素属性的控制,开发者可以实现丰富的交互效果和动态内容更新,提升用户体验。对于想要深入学习JavaScript和Web开发的人...

    DOM基础.doc

    【DOM基础】 DOM,全称为Document Object Model,是一种基于标准的、与语言无关的、平台无关的接口,用于访问和操作HTML、XML文档。它将网页内容抽象为一棵树形结构,允许开发者通过JavaScript或其他编程语言来遍历...

    Ajax完全自学手册-DOM基础及高级DOM技术(word版,附源码)

    **Ajax完全自学手册-DOM基础及高级DOM技术** 在Web开发中,DOM(Document Object Model)扮演着核心角色,它是HTML和XML文档的结构化表示,允许编程语言与页面内容进行交互。本手册深入浅出地讲解了DOM的基础概念...

    DOM基础

    **DOM基础** DOM,全称为Document Object Model,是HTML和XML文档的标准模型。它提供了一个结构化的表示方式,使得程序可以方便地访问和操作文档内容、结构以及样式。DOM将HTML或XML文档解析为一个由节点组成的树形...

    DOM基础和基本API.txt

    ### DOM基础和基本API知识点详解 #### 一、什么是DOM? DOM(Document Object Model)是一种文档对象模型,它是W3C组织推荐的标准之一,用于表示和处理结构化的文档(如HTML或XML)。DOM提供了一种方式,使得程序...

    JavaScript高级程序设计 学习笔记之DOM基础(五)

    这篇学习笔记主要围绕DOM基础展开,涵盖了JavaScript操作DOM的各种方法和技术。 在JavaScript中,DOM被视为一个树形结构,其中每个节点代表了页面上的一个元素、属性或文本。DOM的基础主要包括以下几个方面: 1. *...

    XML&DOM基础教程.CHM

    XML&DOM基础教程.CHM

    DOM基础教程之使用DOM

    文档对象模型(DOM,Document Object Model)是一个跨平台和语言独立的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM将HTML或XML文档表示为树结构,每个节点代表文档中的一个部分(例如一个...

    dom基础_day3.zip

    DOM Day 3的学习重点可能涵盖DOM的基本概念、操作DOM节点、事件处理以及DOM遍历等方面。 一、DOM基本概念 DOM是“文档对象模型”的缩写,它将HTML或XML文档解析为一个由节点组成的树形结构。每个节点代表文档的一...

    JavaScript学习笔记之DOM基础操作实例小结

    在给定的文件内容中,我们看到了对JavaScript基础操作的介绍,特别是在DOM操作方面的实例小结。 ### 一、子节点 在DOM中,每个节点可以有零个或多个子节点。子节点包括元素节点、文本节点等。通过`childNodes`属性...

    dom教程 dom文档对象实例教程

    1. **DOM基础**:解释DOM是什么,它是如何工作的,以及它在Web开发中的角色。 2. **节点与节点类型**:包括元素节点、属性节点、文本节点等,以及它们之间的关系和遍历方法。 3. **选择节点**:如何使用`...

    DOM基础及php读取xml内容操作的方法_.docx

    每个元素、属性、文本等都是一个节点,通过DOM API,我们可以对这些节点进行操作,实现对XML文档的增删改查。在PHP中,DOM扩展提供了DOMDocument和DOMElement等类,使得我们可以方便地处理XML数据。 在上述文档中,...

Global site tag (gtag.js) - Google Analytics