这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~
这是【从头学前端】系列文章的第四十篇-《DOM是什么？》
本系列文章在掘金首发，编写不易转载请获得允许
在HTML页面使用JavaScript
概述
之前我们已经学习了JavaScript基础语法和HTML、CSS基础语法，但是我们学习这两个内容的时候是分别学习的，并没有任何联系。
那有没有办法在HTML页面中引入JavaScript语言呢？答案是有的，我们可以使用<script>元素可以把JavaScript插入到HTML页面中，或包含外部的JavaScript文件。
<script>元素
HTML提供的<script>元素用于嵌入或引用可执行脚本。这通常用作嵌入或者指向JavaScript代码<script>元素也能在其他语言中使用
<script>元素拥有开始标签和闭合标签，这两个都是不允许省略的
<script>元素的常见属性
<script>元素的属性通常都是可选的**，常用的属性如下：
async属性：表示脚本会被并行请求，并尽快解析和执行。TML5新增
charset属性：表示通过src属性指定的代码的字符集，但大多数浏览器会忽略它的值。不常用
defer属性：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部文件有效。
src属性：这个属性定义引用外部脚本的URI，这可以用来代替直接在文档中嵌入脚本。指定了src属性的script元素标签内不应该再有嵌入的脚本。
type属性：该属性定义<script>元素包含或src引用的脚本语言。属性的值为MIME类型（多用途互联网邮件扩展类型）。如果没有定义这个属性，脚本会被视作JavaScript。
使用<script>元素的方式
使用<script>元素的方式有两种，具体如下：
- 内联/内嵌方式：在
<script>和</script>中间写JavaScript代码 - 外部引入方式：即在
src属性中引入JavaScript文件。
示例代码如下:
<body>
<!-- 使用内联的方式引入 -->
<script>
console.log('这是一段JavaScript代码')
</script>
<!-- 使用外部引入的方式，src='这里可以是绝对路径，也可以是相对路径；通常为相对路径' -->
<script src="01 text.js"></script>
</body>
<script>元素的位置
<script>元素既可以在<head>元素中，也可以在 <body> 元素中，具体代码如下
<head>
<script>
console.log('这是一段JavaScript代码')
</script>
</head>
<body>
<script>
console.log('这是一段JavaScript代码')
</script>
</body>
在<head>中的优势是CSS文件和JavaScript文件都放在了相同的地方，但是会造成在所有JavaScript代码被下载解释完成之前，在<body>里的页面内容将不会呈现，导致页面呈现空白。
最好的做法就是将全部的JavaScript引用放在<body>元素内容的后面
注意事项
建议：<script>元素尽量少出现，如果有多个<script>元素尽量编写在一起；因为浏览器内置集成了引擎/解释器是HTML/CSS引擎/解释器 和 JavaScript 引擎/解释器，这么做的目的是减少浏览器引擎/解释器切换，来增加访问速度
使用<script>元素的两种方式都是没有问题的，但是一般尽可能使用外部引入JavaScript代码的方式，这样做便于以后维护代码，而且如果有多个页面共同使用一个JavaScript文件的话，浏览器只需要下载一次
DOM是什么
什么是DOM
DOM是（document Object Model）的缩写，译为文档对象模型。其中
- D表示Document，就是DOM将HTML页面解析为一个文档。同时提供了document对象
- O表示Object，就是DOM将HTML页面中每个元素解析为一个对象。
- M表示Model，就是DOM中表示各个对象之间的关系。
DOM的标准
由于DOM的标准规范是由W3C组织并起草定义的，所以W3C对DOM的定义是目前最权威的解释。官方译文如下：
DOM是一个独立于任何语言和平台的接口，允许任何语言或脚本动态地访问和更新HTML文档的内容、结构和样式。该HTML页面可以进一步处理，并且该处理的结果可以被合并到所呈现的HTML页面中。
DOM的作用
DOM被设计用于解析HTML页面文档，方便JavaScript语言通过DOM访问和操作HTML页面中的内容。
DOM是由W3C组织定义标准规范，并且由各大刘览器厂商支持。严格意义上来讲，DOM并非属于JavaScript语言。
我们之所以可以在JavaScript语言中使用DOM，是因为各大刘览器将DOM的标准规范内容封装成了JavaScript语言所支持的形式。
对DOM中的对象，我们只有调用的权限，没有修改的权限，也说明了这个问题。
浏览器加载并运行HTML页面后，会创建DOM结构。由于DOM中的内容被封装成了JavaScript语言中的对象，所以我们可以使用JavaScript语言通过DOM结构来访问和操作HTML页面中的内容。
DOM树
DOM可以访问和更新HTML页面中的内容、结构和样式，是因为DOM将HTML页面解析为一个树结构。
{完}
写在最后
你如果看到这里，我感到很荣幸，如果你喜欢这篇文章，你可以为这篇文章点上一个小赞；你如果喜欢这个专栏，我会一直更新到百篇以上，可以点一下后面的链接从头学前端 - 一碗周的专栏 - 掘金 (juejin.cn)进入之后给个关注。
最后也可以给我点个关注，万分荣庆。
往期推荐
