JS学习day03--流程控制语句和DOM元素的获取

• 顺序结构：即按顺序执行代码 ;
• 条件选择结构(分支语句)：包括 if-else 以及 switch;
• 循环结构：包括 for 循环，while，do-while，for-in 等;
• 其他语句： break 和continue。

1、分支语句

1、if

if (条件) {
    如果条件为真，则执行这里
}

if (条件) {
    如果条件为真，执行这里
} else {
    如果条件为假，执行这里
}

if (条件1) {
    如果条件1成立，执行这里
} else if (条件2) {
    如果条件2成立，执行这里
} else if (条件3) {
    如果条件3成立，执行这里
} else {
    如果条件都不成立，执行这里
}

2、switch

switch (表达式) {
    case value1:
        表达式 === value1，执行这里;
        break;
    case value2:
        表达式 === value2，执行这里;
        break;
    case value3:
        表达式 === value3，执行这里;
        break;
    default:
        如果value都和表达式不全等，则执行这里
}

2、DOM元素获取

1、通过ID获取

• document.getElementById(‘ID’);

返回的是一个元素，前缀必须是document

2、通过标签名获取

• document.getElementsByTagName(标签名); 返回整个文档下面的元素
• 父级.getElementsByTagName(标签名); 返回整个文档下面的元素

返回的是一个集合（类数组、伪数组），它有长度，可以通过下标获取某一个

3、通过class获取（IE8及以下不支持）

• document.getElementsByClassName(class名)
• 父级.getElementsByClassName(class名)

返回的是一个集合（类数组、伪数组），它有长度，可以通过下标获取某一个

4、通过css选择器获取（IE8及以上支持）

• document.querySelector(‘css选择器’) 只获取一个元素
• document.querySelectorAll(‘css选择器’) 获取所有的元素，返回一个集合（类数组、伪数组）

3、循环

1、for的原理

// 循环的作用是让一段特定的代码执行指定的次数

// for (1初始循环变量; 2判断条件(如果为真执行，如果为假退出循环); 4更新循环变量) {
//     3要执行的代码
// }

// console.log(1);
// console.log(2);
// console.log(3);

for (var i = 1; i <= 3; i++) {
    console.log(i);
}

console.log(i);

// 执行过程
// 第一轮：1 2 3 4
//      var i = 1
//      i <= 3 true
//      console.log(i);  相当于打印1
//      i++                 i现在为2
// 第二轮：2 3 4
//      i <= 3  true
//      console.log(i);  相当于打印2
//      i++                 i现在为3
// 第三轮：2 3 4
//      i <= 3  true
//      console.log(i);  相当于打印3
//      i++                 i现在为4
// 第四轮：2
//      i <= 3  因为i为4，所以这里为false，则退出循环

2、while

1初始循环变量
while (2判断条件) {
    3执行代码
    4更新循环变量
}

// 打印1--3
var i = 1;
while (i <= 3) {
    console.log(i);
    i++;
}

// 第一轮：1 2 3 4
// 第二轮：2 3 4
// 第三轮：2 3 4
// 第三轮：2

3、do-while

do-while：不论条件成不成立，它至少都能执行一次

1初始循环变量
do {
    2执行代码
    3更新循环变量
} while (4判断条件)

var i = 1;
do {
    console.log(i);
    i++
} while (i <= 100);


// 条件不成立，也会执行一次
var i = 1;
do {
    console.log(i);
    i++;
} while (i >= 100);

4、for-in

// 对象的格式
{
    key1: value1,
    key2: value2,
    ...
}

// for-in格式
for(attr in 对象){
    attr就是属性名
    对象[attr]就是属性值
}

// 对象的读取方法
点的形式：对象.属性名
中括号的形式：对象['属性名']

var obj = {
    name: 'zs',
    age: 3,
    job: '前端开发'
}
console.log(obj); // 对象没有长度，没有0 1 2的下标，不能for循环

// 对象读取：
// console.log(obj.name); // 点的读取方式
// console.log(obj['name']); // 中括号的读取方式

// --------------------------
// 一次性把对象所有的值读取，要for-in
for (var attr in obj) {
    console.log(attr);
    console.log(obj[attr]);
}