JavaScript的入门2019-11-13

今天学习了JavaScript的程序结构以及DOM树的相关知识。

---

首先程序结构中，分为三种基本结构：顺序结构、分支结构、循环结构

1.顺序结构：即程序从上往下依次执行语句。

2.分支结构：分支结构主要包括条件语句（ if 语句）与分支语句（ switch 语句）。

条件语句包括：if 语句、if-else 语句、if-else if-else 语句三种

分支语句即switch语句，注意break和default的使用方式。

if-else语句：

else不是必需的，可以只使用if语句；在多个if语句连续使用的时候，每一if都会被执行检测，即使已经找到了匹配（所以它的效率比switch语句要慢很多）；

switch语句：

可以使用default语句来处理所有case之外的情况；如果找到了一个匹配，相应的代码会被执行，然后break语句会停止执行switch语句中的其他分支（比同样功能的连续多个if语句性能要好）。

3.循环结构：

for：

如果需要将一段代码运行特定的次数，那么可以使用 for 循环（这也是最常用的一种循环）。在 for 循环中，检查的条件通常是一个计数器，这个计数器用来计算循环需要运行多少次。

while：

如果不确定代码究竟要被执行多少次，可以使用 while 循环。这里的判断条件也可以使用计数器之外的形式，只要这个条件返回 true，对应的代码就会一直重复运行。

do while：

do…while 循环和 while 循环非常类似，只有一处关键的区别：在 do...while 中，即使条件返回false，被包裹在花括号之中的语句也至少会运行一次。

---

DOM概述:

DOM是JavaScript操作网页的接口，全称为 “文档对象模型 ”（Document Object Model）。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作（比如增删内容）。

DOM节点概念：

DOM的最小组成单位叫做节点（Node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。节点的类型有七种：

Document：文档节点 -> 整个文档树的顶层节点

DocumentType：doctype 标签（比如  ）

Element：元素节点 -> 网页的各种HTML标签（比如 、等）*

Attribute：属性节点 -> 网页元素的属性（比如 class="right" ）*

Text：文本节点 -> 标签之间或标签包含的文本*

Comment：注释节点 -> 网页中的注释

DocumentFragment：文档的片段

节点查询中一般使用直接查找（如document.getElementById("name")、document.querySelector("#name")、document.getElementsByClassName("departments")等等）

另外也有间接查找（如var list=document.querySelector(".departments");

获取上一个兄弟节点 list.previousElementSibling;

获取父节点list.parentElement

获取所有子节点list.children等等

）

节点操作中：可以创建节点，操作属性，操作类名，操作内容，插入节点，操作样式，替换节点，移除节点等。

---

我将这些整理成思维导图更加直观一点。