这是我参与「第五届青训营 」伴学笔记创作活动的第1天
这是我第二次参加青训营的活动了，上一次参加是在暑假的前端专场，当时确实是认识到了前端需要学习的东西还有很多，技术方向也很多。But,很多技术在课后没有太多的时间去深入和实践，导致基础还是没有真正的上去，所以这次还是报了基础班，既然选择了，就做好并坚持下去！
前端工程师定义： 使用web技术栈解决多端图形用户界面交互的工程师
前端技术栈： HTML(内容),CSS(样式),JavaScript(行为)与服务器端通过网络协议实现
前端需要关注： 功能，美观，安全，兼容，无障碍，性能，体验
不太熟悉的标签:
定义列表标签：<dl>,标题：<dt>,内容：<dd>
文本输入提示标签：
长文本(块级)引用：
<blockquote>
短引用：<cite>（文章或者标题）,<p>（具体内容）
代码引用：<code>,<pre>
强调标签：<strong>（情景），<em>（语气）
语义化：
HTML中的元素、属性以及属性值都拥有某些含义
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提高无障碍性
下面就本节课不太熟悉的DOM树进行深入学习：
DOM（Document Object Model）即文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。
- 元素（element）：文档中的所有标签都是元素，元素可以看成是对象
- 节点（node）：文档中都有的内容都是节点：标签，属性，文本
- 文档（document）：一个页面就是一个文档
这三者的关系是：文档包含节点，节点包含元素
- Document 文档
一个页面就是一个文档，一个html文件或XML文件就是一个文档
html与Xml的区别： html 用来展示信息，展示数据的 xml 更侧重于存储数据
- Object 对象
把所有的事物都当作一个对象，html文件是一个对象，html文件中的标签也是对象
- Model 模型
文档（页面）中有一个根（root），这个根标签包含head标签与body标签，head标签中又包含meta与title标签，body标签中包含div、p、header、main等等标签，其中main下面又有article、aside等等标签，article标签中又有其它的标签等等，这就组成了树状结构图，也叫DOM树。这就形成了一个模型。看下图的关系。
DOM的作用：
<div>我是div元素</div>
<p id="p">我是p元素</p>
访
var div = document.getElementsByTagName('div')
var p = document.getElementById('p')
增
// 创建一个a元素
var a = document.createElement('a')
// 添加到body
document.body.append(a)
删
// 移除body中的div子节点
document.body.removeChild(div)
改
div.innerHTML = '我修改了div的文本内容'
