08DOM相关概念叙述

何处使用script标签

<head>标签里
需要注意的是：浏览器是自上到下解析的。因此，如果涉及到包含获取页面元素的内容, 导致失败。解决方案如下：
1
2
3
4
5
6
<script>
// 表示HTML页面加载完毕后, 做什么
window.onload = function () {
// 所有的javascript代码编写在这里
}
</script>

写在<body>元素的最下方

<body>
  <!-- 将<script>元素放置在相关HTML元素的后面, 或者<body>元素内的最后 -->
  <script></script>
</body>

什么是DOM

DOM是个缩写，全称是 Document Object Model，被译为文档对象模型。

D表示Document，就是DOM将HTML页面解析为一个文档。同时提供了document对象。
O表示Object，就是DOM将HTML页面中每个元素解析为一个对象
M表示Model，就是DOM中表示各个对象之间的关系

DOM的作用

DOM被设计用于解析HTML页面文档，方便 Javascrip语言通过DOM访问和操作HTML页面中的内容。
DOM是由W3C组织定义标准规范，并且由各大浏览器厂商支持。严格意义上来讲，DOM并非属于JavaScript语言。
我们之所以可以在 Javascript语言中使用DOM，是因为各大浏览器将DOM的标准规范内容封装成了 Javascrip语言所支持的形式。
对DOM中的对象，我们只有调用的权限，没有修改的权限，也说明了这个问题。

浏览器加载并运行HTML页面后，会创建DOM结构。由于DOM中的内容被封装成了 JavaScript语言中的对象，所以我们可以使用 JavaScript语言通过DOM结构来访问和操作HTM页面中的内容

DOM树结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <h2>这是一个示例页面</h2>
    <p id="p" title="this is p.">这是一个段落内容。</p>
</body>

</html>

什么是节点

节点（Node）原本是网络术语，表示网络中的连接点。一个网络是由一些节点构成的集合。
在DOM树结构中，节点也是很重要的一个概念。简单来说，节点作为DOM树结构中的连接点，最终构成了完整的DOM树结构。

常量	值	描述
`Node.DOCUMENT_NODE`	9	文档节点，表示整个HTML页面（相当于document对象）
`Node.ELEMENT_NODE`	1	元素节点，表示HTML页面中的标签（即HTML页面的结构）
`Node.ATTRIBUTE_NODE`	2	属性节点，表示HTML页面中的开始标签包含的属性。在DOM规范里Node接口将不再实现这个元素属性
`Node.TEXT_NODE`	3	文本节点，表示HTML页面中的标签所包含的文本内容