什么是DOM?这应该是大多数初学者都会问的问题。
在W3C中是这样说的:
DOM 是 W3C(万维网联盟)的标准。
DOM 定义了访问 HTML 和 XML 文档的标准:
“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
看了这些似乎还是不太明白,事实上DOM其实就是节点,每一个HTML文档都是由不同的节点构成,就像我们这个世界一样,是由不同的原子构成的。
整个代码之上为‘document’节点,它包含了‘!doctype’节点和‘html’节点。‘html’节点还包含了元素节点,属性节点,文本节点等。
先来看看下面的代码:
将HTML代码分解为DOM节点层次图:
它的根节点是<document>,它有两个子元素节点:<!DOCTYPE>和<html>,<!DOCTYPE>是文档类型节点,<html>节点中的就是整个文档的内容。<html>节点中又包含了两个子元素节点<head>和<body>,其中<head>中包含了<meta>和<title>两种元素节点,不同的是<meta>有个属性charset,它的值是"UTF-8",说明了整个文档是用"UTF-8"来进行编码的。<body>中的<p>元素包含着文本“Dont't forget to select this fruit.”,所以它是一个文本节点,它指的是那段文本。
在大多数情况下,文本节点总是被包含在元素节点内部。但并非所有的元素节点都包含有文本节点。比如<ul>,它没有直接包含任何的文本节点,它包含着其他的元素节点<li>,<li>包含着文本节点。