HTML - 文档对象模型

上一页
下一页

HTML 文档对象模型 (DOM)

HTML 文档对象模型（简称 HTML DOM）以分层顺序（或树状结构）表示 HTML 文档的所有元素。其中此树的每个节点都代表 HTML 文档中的一个元素。

访问和修改 HTML DOM

使用 HTML DOM 方法，我们可以访问树并修改相应 HTML 文档的结构或内容。我们还可以将事件附加到节点。

HTML DOM 树结构

例如，如果您的 HTML 文档包含诸如 <html>、<head>、<body>、<title>、<link>、<img> 和 <p> 等元素，则浏览器将创建 HTML 文档的 DOM 树，可以表示如下所示的图中 -

HTML DOM

请注意，每个 HTML 文档都包含 <html>、<head> 和 <body> 标签。根元素是 <html>，<head> 和 <body> 标签是其子元素。

什么是文档对象模型？

文档对象模型 (DOM) 是一种编程接口，充当网页和脚本或编程语言之间的桥梁。它将网页文档（如 HTML 或 XML）表示为对象的树，其中树的每个分支都以节点结尾，并且每个节点都包含对象。

单击下面给出的按钮以正确理解它。它将生成一个 DOM 树。

DOM 树示例

DOM 提供了一组方法，允许诸如 JavaScript 等编程语言访问 DOM 树。使用这些方法，您可以更改文档的结构、样式或内容。它使网页具有交互性和动态性。

DOM 不是一种编程语言，它被设计为与语言无关。大多数 Web 开发人员通过 JavaScript 使用 DOM，但是，可以为任何语言构建 DOM 的实现。

HTML DOM 与 JavaScript DOM

我们使用 HTML 来构建网页，并使用 JavaScript 使其具有交互性。但是，JavaScript 无法直接理解网页。它借助 HTML DOM。当 HTML 页面加载时，浏览器会创建页面的对象模型，然后 JavaScript 可以与之交互以操纵页面的内容、结构和样式。

JavaScript 可以借助对象模型执行以下操作 -

  • 访问和替换 HTML 元素。
  • 访问和替换 HTML 属性。
  • 更改页面中的所有 CSS 样式。
  • 响应用户事件。
  • 为网页添加动画。

下表说明了 HTML DOM 和 JavaScript DOM 之间的区别 -

HTML DOM JavaScript DOM

HTML DOM 是 HTML 的对象模型，它以树状结构表示 HTML 文档的所有元素。

HTML DOM 是 JavaScript 的 API，有助于添加、更改和替换 HTML 文档的元素、属性和事件。

DOM 方法参考

以下是重要 DOM 方法的列表 -

序号 方法和描述
1. toString()

它用于将 HTML 元素转换为字符串格式。
2. setAttribute()

此方法允许您为特定元素定义属性。
3. setAttributeNode()

此方法允许您在特定元素上定义特定属性节点。
4. scrollIntoView()

它确保可滚动容器的网页上的特定元素通过调整滚动位置变得可见。
5. querySelector()

它用于选择和访问文档中与给定 CSS 选择器匹配的第一个 HTML 元素。
6. querySelectorAll()

此方法允许您选择和访问文档中与给定 CSS 选择器匹配的所有 HTML 元素。
7. remove()

此方法可以完全从网页中删除元素。
8. removeAttribute()

此方法用于删除已在 DOM 结构中的 HTML 元素上设置的任何属性。
9. removeAttributeNode()

它允许您从元素中删除特定属性节点。
10. removeChild()

它用于从其父元素中删除选定的子元素。
11. removeEventListener()

此方法允许您删除先前分配给元素的事件侦听器。
12. replaceChild()

此方法使我们能够用另一个子元素替换父元素中的一个子元素。
13. hasAttribute()

它用于检查 HTML 元素中是否存在属性。
14. hasAttributes()

此方法检查 HTML DOM 中的元素是否具有属性。
15. hasChildNodes()

它用于检查 HTML 元素内部是否有任何子元素。
序号 方法和描述
16. getAttribute()

它返回属于 HTML 元素的指定属性的值。
17. getBoundingClientRect()

此方法用于获取元素的大小及其相对于视口的定位。
18. closest()

此方法返回当前元素（或当前元素本身）与给定 CSS 选择器匹配的最接近的祖先。如果不存在这样的祖先，则返回 null。
19. contains()

您可以使用此方法检查 DOM 元素是否在其子树中包含另一个元素。
20. click()

click() 方法在元素上激活鼠标点击。
21. normalize()

它用于通过删除任何空文本节点来组合 HTML 元素内的相邻文本节点。
22. isDefaultNamespace()

它用于检查特定的命名空间 URI 是否是文档或元素中元素的默认命名空间。
23. isEqualNode()

此方法通过比较它们的属性、类型和子节点来检查两个节点是否相等。
24. isSameNode()

它检查两个节点引用是否指向 HTML 文档中的同一节点对象。
25. isSupported()

此方法用于检查 Web 浏览器是否可以支持或处理网页上的特定功能或功能。
26. insertAdjacentElement()

此方法允许您在网页上相对于另一个元素的位置准确插入新的 HTML 元素。
27. insertBefore()

此方法允许您在父元素内添加新的子元素，指定其相对于另一个子元素的位置。
28. blur()

此方法允许您动态地从 HTML DOM 中的元素中移除焦点。
29. matches()

此方法检查元素是否与给定的 CSS 选择器匹配。
30. insertAdjacentHTML()

它可以帮助您在相对于调用此方法的元素的特定位置插入指定的 HTML 代码。
31. addEventListener()

它用于向元素注册事件处理程序。
32. cloneNode()

它复制节点，包括其属性和子节点。
33. appendChild()

此方法用于将一个新的子节点（元素）作为指定父节点的最后一个子节点添加。
34. compareDocumentPosition()

通过比较两个 DOM 元素（节点）的位置来理解文档结构，并返回一个位掩码（数值）。
35. focus()

此方法将焦点设置到特定的网页元素。
36. getAttributeNode()

用于获取属性节点对象。
37. getElementsByClassName()

此方法检索一个实时 HTMLCollection，其中包含在文档或特定元素内与指定类名匹配的元素。
38. getElementsByTagName()

检索一个实时 HTMLCollection，其中包含与指定标签名匹配的元素。
39. insertAdjacentText()

允许您在相对于调用此方法的元素的特定位置插入文本内容。
40. namedItem()

用于获取集合中第一个 ID 或名称与参数中提到的名称匹配的元素。
41. item()

返回参数中指定索引位置的 HTMLCollection 中的元素。
42. entries()

此方法检索一个迭代器，允许我们遍历对象中的所有键/值对。
43. forEach()

此方法根据插入顺序，对列表中的每个值对调用参数中提到的回调函数一次。
44. item()

此方法从参数中指定的索引处检索 NodeList 中的节点。
45. keys()

此方法检索一个迭代器，允许我们遍历 NodeList 中包含的所有键。
46. writeln()

此方法提供将 HTML 或 JavaScript 表达式直接写入文档的功能。它在每个语句后添加一个换行符。
47. write()

此方法提供将 HTML 或 JavaScript 表达式直接写入文档的功能。
48. hasFocus()

用于确定文档或文档内的任何元素是否具有焦点。
49. renameNode()

用于重命名节点。
50. open()

此方法打开文档以进行写入。
51. normalizeDocument()

此方法规范化整个 HTML 文档。
52. normalize()

它删除空文本节点，并将父节点中的相邻文本节点连接起来。
53. adoptNode()

此方法将来自另一个文档的节点采用到当前文档中。
54. addEventListener()

用于设置一个函数，每当指定的事件传递到目标时，就会调用该函数。
55. execCommand()

此方法用于在用户选择的可编辑部分上执行指定的命令。
56. createTextNode()

用于使用指定的文本创建一个文本节点。
57. createEvent()

用于创建一个事件对象，其事件类型在参数中指定。
58. createDocumentFragment()

创建一个新的空文档片段，该片段驻留在内存中。
59. createComment()

此方法用于使用给定的文本创建注释节点。
60. createAttribute()

用于使用 JavaScript 为 HTML 元素创建具有特定名称的属性，并返回 Attr 对象。
61. close()

关闭输出流。
62. getElementsByTagName()

这是一个只读方法，用于获取文档中所有具有参数中指定标签名的元素的集合。
63. getElementsByName()

此方法用于返回具有参数中指定的 name 属性的元素集合。
64. getElementsByClassName()

此方法用于获取文档中所有具有指定类名的元素的集合。
65. getElementById()

返回给定 ID 的元素。
66. createElement()

此方法根据标签名或元素名创建 HTML 元素。
67. add()

此方法将参数中指定的一个或多个标记添加到 DOMTokenList 中。
68. contains()

此方法检查列表是否包含指定的标记，并相应地返回布尔值。
69. entries()

此方法返回一个迭代器，允许遍历所有键/值对。
70. forEach()

此方法根据插入顺序，对列表中的每个值对调用参数中提到的回调函数一次。
71. item()

此方法返回参数中指定索引处的 DOMTokenList 中的标记。
72. keys()

此方法返回一个迭代器，允许您遍历标记列表中包含的所有键。
73. remove()

此方法从 DOMTokenList 中删除参数中指定的一个或多个标记。
74. replace()

此方法用参数中指定的新标记替换 DomTokenList 中现有的标记。
75. supports()

此方法检查参数中指定的标记是否在 DOMTokenList 中受支持。
76. toggle()

此方法动态地向元素的 class 属性添加或删除标记或类。
77. values()

此方法返回一个迭代器，允许我们遍历标记列表中包含的所有值。

DOM 属性参考

以下是重要的 DOM 属性列表：

序号 方法和描述
1. title

它帮助我们访问和更新存储在元素的 title 属性中的值。
2. textContent

此属性用于访问和更新 HTML 元素及其所有子元素的文本内容，作为一个字符串。
3. tagName

它以大写形式提供定义网页上元素的 HTML 标签的名称。
4. style

使用此属性，您可以获取直接为特定元素设置的 CSS 样式。
5. tabIndex

用于访问和更新元素的 tabIndex 属性的值。
6. scrollLeft

此属性用于访问和更新元素内容水平滚动的距离。
7. scrollTop

用于访问和更新元素内容垂直滚动的距离。
8. scrollWidth

此属性以像素为单位提供元素内容的总水平宽度。
9. scrollHeight

您可以使用此属性以像素为单位获取元素内容的总垂直高度。
10. id

id 属性用于设置和检索元素的 id 属性的值。
11. innerText

它允许我们检索或更改网页上 HTML 元素内的可见文本内容。
12. isContentEditable

用于检查网页元素是否可以由用户直接编辑。
13. lang

lang 属性是 HTML 元素的属性，用于指定语言代码。
14. lastChild

lastChild 属性返回一个指向特定父元素的最后一个子节点的节点。
15. lastElementChild

它返回一个包含父元素的最后一个子元素的节点。
序号 属性和描述
16. namespaceURI

元素的 namespaceURI 属性提供分配给该元素的命名空间 URI。
17. nextElementSibling

使用此属性，您可以获取特定元素序列中的下一个节点。
18. nextSibling

用于访问 DOM 树中当前节点之后的下一个节点。
19. nodeName

此属性用于根据节点的内容识别节点的类型和名称。
20. nodeType

nodeType 属性返回一个整数，表示节点的类型。
21. nodeValue

用于访问和更新节点的值。
22. offsetHeight

此属性用于获取网页上该元素的完整可见高度，包括其垂直填充和边框，以像素为单位。
23. offsetLeft

它返回从元素的左边界到其最近的定位父元素的左边界的距离（以像素为单位）。
24. offsetParent

用于查找影响另一个元素定位的最近的祖先元素。
25. offsetWidth

元素的 offsetWidth 属性提供网页上该元素的总可见宽度。
26. outerHTML

outerHTML 属性获取元素的整个 HTML 代码。
27. outerText

此属性可以访问或更新 HTML 元素的文本内容，包括其所有嵌套的文本和元素。
28. ownerDocument

它提供包含特定元素的文档节点的对象。
29. parentElement

它允许您访问 HTML 元素中特定元素的直接父元素。
30. parentNode

此属性用于访问 HTML 元素中特定节点的直接父节点。
31. classList

它充当一个活动的容器，保存分配给元素的 class 属性的 CSS 类集合。
32. childNodes

用于检索元素的所有子节点，包括元素、文本节点和注释。
33. className

您可以使用此属性访问或修改元素的 class 属性的值。
34. clientTop

用于在网页布局中获取准确的元素定位和大小计算。
35. firstElementChild

它提供给定父元素中的第一个子元素。
36. offsetTop

使用此属性，您可以获取从元素顶部边缘到其最近的定位祖先元素顶部边缘的垂直距离（以像素为单位）。
37. attributes

它返回包含 HTML 元素属性集合的“NameNodeMap”。
38. accesskey

此属性允许您为网页上的元素分配键盘快捷键。
39. firstChild

它帮助您访问 HTML DOM 中给定父元素的第一个子节点。
40. innerHTML

此属性允许我们读取元素的现有 HTML 内容并使用新的 HTML 内容更新它。
41. dir

它提供访问权限，用于设置和检索 HTML 中任何元素的 dir 属性的值。
42. contentEditable

您可以使用此属性使 HTML 元素内的文本内容可编辑。
43. clientWidth

它返回元素的宽度，包括填充，但不包括边距、边框或滚动条宽度。
44. clientLeft

此属性用于获取元素的左边框宽度，不包括左填充或边距。
45. clientHeight

用于获取元素的内部高度，包括填充，但不包括边距、边框或滚动条宽度。
46. children

此属性返回子元素的集合。
47. childElementCount

它返回指定元素的直接子元素的数量。
48. src

此属性用于 <img>、<script> 或 <iframe> 等元素，以获取或设置源 URL。
49. href

此属性用于锚 <a> 元素，以获取或设置超链接引用。
50. checked

此属性用于获取或设置复选框或单选按钮的选中状态。
51. disabled

此属性用于获取或设置输入元素的禁用状态。
52. length

它返回 HTMLCollection 中元素的数量。
53. length

此方法返回 NodeList 中项目的数量。
54. value

此属性用于设置或获取属性的值。
55. specified

它检查是否指定了提到的属性。
56. name

用于获取元素上使用属性的名称。
57. isId

此属性用于确定 HTML 属性是否为“id”属性。
58. URL

这是一个只读属性，返回文档的完整 URL，包括协议。
59. title

此属性用于设置或获取文档的标题。
60. strictErrorChecking

用于确定文档是否强制执行严格错误检查。
61. scripts

这是一个只读属性，用于将 HTML 文档中存在的所有脚本元素作为集合返回。
62. links

links 是一个只读属性，它返回与具有 href 属性的 a 和 area 元素相对应的所有链接的集合。
63. lastModified

此属性返回当前文档上次修改时的日期和时间。
64. inputEncoding

inputEncoding 属性返回一个字符串，表示文档的字符编码。
65. implementation

这将返回与当前文档关联的 DOMImplementation 对象。
66. images

这是一个只读属性，用于将 HTML 文档中存在的所有 img 元素作为集合返回。
67. head

head 属性返回 HTML head 元素。
68. forms

forms 是一个只读属性，用于将 HTML 文档中存在的所有表单元素作为集合返回。
69. embeds

这是一个只读属性，它返回 HTML 文档中存在的所有嵌入元素的集合。
70. domConfig

此属性已弃用，因此在所有新浏览器中都将返回 undefined。
71. documentURI

此属性用于设置或返回文档的位置。
72. documentMode

documentMode 属性是 IE8 属性，用于确定浏览器使用的渲染模式。
73. documentElement

它将 documentElement 作为元素对象返回。
74. doctype

此属性返回与当前 HTML 文档关联的 DTD（文档类型声明）。
75. designMode

它可以帮助我们确定整个文档是否可编辑。
76. defaultView

用于返回文档的窗口对象。
77. cookie

HTML DOM document cookie 属性用于创建、读取和删除 cookie。
78. charset

它返回 HTML 文档的字符编码。
79. applets

用于返回文档中所有 applet 元素的列表，但此属性现已弃用。
80. characterSet

此属性用于获取文档的字符编码。
81. anchors

anchors 属性是一个只读属性，列出文档中所有具有 name 属性的“a”标签。
82. baseURI

用于返回文档的基本统一资源标识符 (URI)。
83. length

此方法返回令牌列表中的令牌数。
84. value

此方法将 DOMTokenList 序列化为字符串。
85. domain

用于获取当前正在执行文档的服务器的域名。

关于 DOM 的常见问题

关于 DOM 有几个常见问题 (FAQ)，本节尝试简要回答其中一些问题。

DOM 的全称是文档对象模型。

在 JavaScript 中，DOM 用于与 HTML 网页交互并操作页面的内容、结构和样式。

不，DOM 不是一种编程语言。它是一个将网页连接到编程语言的编程接口。

DOM 接口提供各种方法和属性来交互和操作网页。一些常见的接口包括 Document、Element、Event 等等。

打印页面
上一页
下一页
广告