js的三部分组成：
ECMAScript
DOM: document object model 文档对象模型（提供一系列的属性和方法，让我们能操作页面中的DOM元素->简单理解为操作页面中的HTML标签）
BOM
DOM例子代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>DOM</title> </head> <body> <div class="box" id="box"> <h2>前端学习清单</h2> <ul> <li>HTML5+CSS3</li> <li> JavaScript（Es6）基础知识、核心知识、项目实战、组件封装、设计模式等 </li> <li>AJAX和HTTP</li> <li>Vue/React/小程序开发的全家桶（基础、源码、实战）</li> <li>Webpack/Node/Git等常用的工具类或者全栈化</li> </ul> </div> </body></html>
DOM
获取DOM元素
document.getElementById([ID]) 基于元素的ID获取到这个元素
document.body 获取页面中的BODY元素
document.getElementsByTagName([标签名]) 根据标签名获取到页面中（指定容器中）所有的元素标签集合
基于JS获取到的DOM元素是“对象数据类型”值，里面包含很多浏览器自带的，用来操作元素的键值对
console.dir(document.getElementById('box'));
原理如图
实例：修改盒子中文字颜色样式的三种写法，那种可以？
let box = document.getElementById('box');
box.style.color = 'red';
let boxSty = box.style;
boxSty.color = 'red';
let text = box.style.color;
text = 'red';
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>DOM</title> </head> <body> <div class="box" id="box"> <h2>前端学习清单</h2> <ul> <li>HTML5+CSS3</li> <li> JavaScript（Es6）基础知识、核心知识、项目实战、组件封装、设计模式等 </li> <li>AJAX和HTTP</li> <li>Vue/React/小程序开发的全家桶（基础、源码、实战）</li> <li>Webpack/Node/Git等常用的工具类或者全栈化</li> </ul> </div> <script> let box = document.getElementById('box'); box.style.color = 'red'; let boxSty = box.style; // => 获取的是style对应的对象 BBBFFF000 boxSty.color = 'red'; let text = box.style.color; // => 获取的是color初始值'',基本类型值，直接存储再栈内存中 text = 'red'; </script> </body></html>
实例：隔行换色实现(基本实现)
for (var i = 0; i < itemList.length; i++) {
// 每一次循环，基于变量i的值（等价于集合中对应的索引）获取到当前本轮循环要操作的那个li
var itemLi = itemList[i];
/* if else 判断语句 */
// if (i % 2 !== 0) {
// itemLi.style.color = 'green';
// } else {
// itemLi.style.color = 'red';
// }
/* 三目 判断语句 */
// itemLi.style.color = i % 2 !== 0 ? 'green' : 'red';
/* switch 判断语句 */
switch (i % 2) {
case 0:
itemLi.style.color = 'red';
break;
default:
itemLi.style.color = 'green';
}
}
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>DOM</title> </head> <body> <div class="box" id="box"> <h2>前端学习清单</h2> <ul> <li>HTML5+CSS3</li> <li> JavaScript（Es6）基础知识、核心知识、项目实战、组件封装、设计模式等 </li> <li>AJAX和HTTP</li> <li>Vue/React/小程序开发的全家桶（基础、源码、实战）</li> <li>Webpack/Node/Git等常用的工具类或者全栈化</li> </ul> </div> <script> let box = document.getElementById('box'); /* => 获取BOX盒子中所有的LI = >获取的是HTMLCollection元素集合 （他是一个类数组对象：结构和数组非常的相似，但是不是数组） */ let itemList = box.getElementsByTagName('li'); /* 获取BOX盒子中所有的H2 => 没有或者只有一项，获取到的依然是元素集合 HTMLCollection */ let title = box.getElementsByTagName('h2'); console.dir(itemList); console.dir(title); //把LI实现奇数和偶数行变色（css中：nth-child 可以搞定） //重复完成事情：分别拿到每一个LI元素对象，根据判断它是奇数行环视偶数行，给设置不同颜色 for (var i = 0; i < itemList.length; i++) { // 每一次循环，基于变量i的值（等价于集合中对应的索引）获取到当前本轮循环要操作的那个li var itemLi = itemList[i]; /* if else 判断语句 */ // if (i % 2 !== 0) { // itemLi.style.color = 'green'; // } else { // itemLi.style.color = 'red'; // } /* 三目 判断语句 */ // itemLi.style.color = i % 2 !== 0 ? 'green' : 'red'; /* switch 判断语句 */ switch (i % 2) { case 0: itemLi.style.color = 'red'; break; default: itemLi.style.color = 'green'; } } /* 第一行 奇数行 => 索引 0 索引偶数 第二行 偶数数行 => 索引 1 索引奇数 第三行 奇数行 => 索引 2 索引偶数 .... 当前行的索引是奇数代表偶数行，当前行的索引是偶数，代表的是奇数行 x%2 === 0 能被2整除的是偶数 */ </script> </body></html>
