一、HTML文档的主干是标签（tag）
二、根据文档对象模型（DOM），每个HTML标签都是一个对象。
1、嵌套的标签是闭合标签的“子标签（children）”。
2、标签内的文本也是一个对象
【实例1】document.body是表示标签的对象

  1. document.body.style.background = 'red' // 将背景设置为红色
  2. setTimeout(() => document.body.style.background = '', 3000) // 恢复回去

DOM的例子

一、简单的文档(document)

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk
</body>
</html>

二、DOM将HTML表示为标签的树形结构
image.png
1、每个树的节点都是一个对象。
2、标签被称为元素节点（或者仅仅是元素），并形成了树状结构：在根节点，和是其子项，等。
3、元素内的文本形成文本节点，被标记为#text。
（1）一个文本节点值包含一个字符串。它没有子项。
【实例1】标签里面有文本“About elk”<br />（2）注意文本节点中的特殊字符<br />①换行符：<code>↵</code>（在 JavaScript 中为 <code>\n</code>）<br />②空格：<code>␣</code><br />4、注释节点 comment node<br />【实例1】</p> <pre><code class="lang-javascript"><!DOCTYPE HTML> <html> <body> The truth about elk. <ol> <li>An elk is a smart</li> <!-- comment --> <li>...and cunning animal!</li> </ol> </body> </html> </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/355497/1614064709849-0cbb37d7-3bf4-400c-b823-726876c3825d.png#height=383&id=FxwaZ&margin=%5Bobject%20Object%5D&name=image.png&originHeight=463&originWidth=378&originalType=binary&ratio=1&size=26795&status=done&style=none&width=313" alt="image.png"><br />三、空格和换行符都是完全有效的字符，就像字母和数字。它们形成文本节点并成为DOM的一部分。<br />【实例1】上面的示例中，<head>标签中的<title>标签前面包含了一些空格，并且该文本变成了一个#text节点（它只包含一个换行符和一些空格）。<br />1、有两个顶级排除项<br />（1）由于历史原因，<head>之前的空格和换行符均被忽略。<br />（2）如果我们在</body>之后放置一些东西，那么它会被自动移动到body内，并处于body中的最下方，因为HTML规范要求所有内容必须位于<body>内。所以</body>之后不能有空格。<br />2、没有空格的文本节点<br />【实例1】</p> <pre><code class="lang-javascript"><!DOCTYPE HTML> <html><head><title>About elk</title></head><body>The truth about elk.</body></html> </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/355497/1614062418059-9f6603c6-2352-4105-a1cd-fa2be8e6d24d.png#height=197&id=eMSFY&margin=%5Bobject%20Object%5D&name=image.png&originHeight=197&originWidth=377&originalType=binary&ratio=1&size=10328&status=done&style=none&width=377" alt="image.png"><br />3、字符串开头/结尾处的空格，以及只有空格的文本节点，通常会被浏览器工具隐藏<br />四、如果一些内容存在于HTML中，那么它也必须在DOM树中。<br />1、注释，是DOM的一部分。<br />2、<!DOCTYPE…>指令也是一个DOM节点。<br />3、表示整个文档的document对象，形式上也是一个DOM节点。<br />五、一共有12种节点类型。常用的有4种：<br />1、Document类型（document节点）——DOM的“入口点”<br />2、Element节点（元素节点）——HTML标签，树构建块<br />3、Text类型（文本节点）——包含文本<br />4、Comment类型（注释节点）——有时我们可以将一些信息放入其中，它不会显示，但JS可以从DOM中读取它。<br />【示例2】DOM 文件对象模型，提供了树状结构的表示方法，以下描述正确的是：<br />A. Document 不是一個 document node，是一种节点格式<br />B. 不是所有的 HTML elements 都是 element nodes<br />C. 所有的 comments 都是 document node<br />D. 在 HTML element 內的 text 內容也是 text node<br />答案：D<br />解析：第一题：document可以说是一种节点格式，但节点树的根节点也叫document，所以第一题的说法太绝对，是错的。 <br />第二题：所有的HTML elements（元素节点，其实就是HTML标签）都是element。<br />第三题：comments属于注释节点 <a name="zB2uU"></a></p> <h1 id="9hqoxo"><a name="9hqoxo" class="reference-link"></a><span class="header-link octicon octicon-link"></span>自动修正</h1><p>一、如果浏览器遇到格式不正确的HTML，它会在形成DOM时自动更正它。<br />【实例1】顶级标签总是<html>。即使它不存在于文档中，它也会出现在DOM中，因为浏览器会创建它。对于<body>也一样。<br />【实例2】如果一个HTML文件中只有一个单词’Hello’，浏览器则会把它包装到<html>和<body>中，并且会添加所需的<head>，DOM将会变成下面这样<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/355497/1614064436759-45f73a1c-13e4-4e61-b5c8-b4f46efeb102.png#height=138&id=lVd2F&margin=%5Bobject%20Object%5D&name=image.png&originHeight=138&originWidth=379&originalType=binary&ratio=1&size=5962&status=done&style=none&width=379" alt="image.png"><br />二、在生成DOM时，浏览器会自动处理文档中的错误，关闭标签等。<br />【实例1】一个没有关闭标签的文档</p> <pre><code class="lang-javascript"><p>hello <li>Mom <li>and <li>Dad </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/355497/1614064533495-5dfcab69-ec64-4816-9cb4-9841f2205ddc.png#height=268&id=IP8rA&margin=%5Bobject%20Object%5D&name=image.png&originHeight=347&originWidth=380&originalType=binary&ratio=1&size=15667&status=done&style=none&width=294" alt="image.png"><br />三、表格永远有<tbody><br />1、按照DOM规范，它们必须具有<tbody>，但HTML文本却（官方的）忽略了它。<br />2、浏览器在创建DOM时，自动地创建了<tbody><br />【实例1】</p> <pre><code class="lang-javascript"><table id="table"><tr><td>1</td></tr></table> </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/355497/1614064636156-5fd36f1c-c12f-4c75-b9ba-5b646674d968.png#height=166&id=cXilE&margin=%5Bobject%20Object%5D&name=image.png&originHeight=166&originWidth=377&originalType=binary&ratio=1&size=6618&status=done&style=none&width=377" alt="image.png"></p>