1. 循环结构
1.1 for循环
for循环：
语法：for(var 循环变量=几;循环条件;变量的变化){
循环体
}
特殊：
1、死循环：for(;;){循环体} - 两个分号一个不能少
2、循环变量处其实可以创建多个变量
3、也支持break
1.2 while
语法：
var 循环变量=几;
while(循环条件){
循环体;
循环变量变化一下;
}
2. 数组
2.1、创建数组：2种方式：
1、*直接量方式：
var arr=[]
var arr=[数据,数据,...]
2、构造函数方式：此方法还有一个坑，但是我不说
var arr=new Array()
var arr=new Array(数据,数据,...)
2.2、*访问数组：
1、获取数据
数组名[下标];
特殊：1、下标越界，获取到的是一个undefined
2、添加数据
数组名[下标]=新数据;
特殊：1、如果下标处已有元素，则为替换
2、如果下标越界，会导致你的数组变成一个稀疏数组，中间就会出现很多的undefined，而且下标也不再连续
结论：数组具有3大不限制：
1、不限制元素的长度
2、不限制元素的类型
3、不限制下标越界 - 但是这个操作并不是好事情，强烈不推荐下标越界
2.3、*数组对象 - 唯一属性
正是因为我们自己数下标容易数错，提供了一个属性：语法：数组名.length - 获取到数组的长度
三个固定套路：
1、向末尾添加元素：arr[arr.length]=新值
2、获取倒数第n个元素：arr[arr.length-n]
3、删除末尾的n个元素：arr.length-=n
2.4、*遍历数组：将数组中的每个元素都取出来 执行 相同 或 相似的操作
公式：for(var i=0;i<arr.length;i++){
arr[i];//当前次获取到的元素
}
3. 获取元素
3.1、通过ID：
语法：var elem=document.getElementById("id值");
返回：是一个DOM对象/DOM节点/DOM元素，才可以直接做操作
特殊：
1、如果id重复了，只会返回第一个
2、如果没找到，返回的是一个null
3、此方法白学，以后不准使用
3.2、*通过 标签名：
语法：var elems=document/parent.getElementsByTagName("标签名");
返回：是一个DOM集合 - 是一个类数组对象：类似数组，也可以使用下标、length、遍历
特殊：
1、一个DOM集合是不允许直接做操作的，除非加下标得到某一个 或 遍历得到所有人，才能做操作
2、如果没找到，返回的是一个空集合
3、此方法不一定非要写document,也可以写一个parent（已经找到的某个父元素）
如果是写的document，则会找到页面上所有的标签
而写的是parent，只会找到parent下面的所有的标签
3.3、*通过 class名：
语法：var elems=document/parent.getElementsByClassName("class名");
返回：是一个DOM集合 - 是一个类数组对象：类似数组，也可以使用下标、length、遍历
特殊：
1、一个DOM集合是不允许直接做操作的，除非加下标得到某一个 或 遍历得到所有人，才能做操作
2、如果没找到，返回的是一个空集合
3、此方法不一定非要写document,也可以写一个parent（已经找到的某个父元素）
如果是写的document，则会找到页面上所有的标签
而写的是parent，只会找到parent下面的所有的标签
3.4、*通过 节点之间的关系 获取元素
前提：至少先要找到一个元素，才能找关系
1、父元素：xx.parentNode - 单个元素
2、子元素：xx.children - 集合
3、第一个儿子：xx.firstElementChild - 单个元素
4、最后一个儿子：xx.lastElementChild - 单个元素
5、前一个兄弟：xx.previousElementSibling - 单个元素
6、后一个兄弟：xx.nextElementSibling - 单个元素
4. 操作元素
4.1、内容：
1、*innerHTML：用于操作双标签，能够识别标签
获取：elem.innerHTML
设置/修改：elem.innerHTML="新内容"
2、innerText：用于操作双标签，不能识别标签
获取：elem.innerText
设置/修改：elem.innerText="新内容"
3、*value：用于操作input
获取：elem.value
设置/修改：elem.value="新内容"
4.2、*属性：
获取属性值：elem.getAttribute("属性名");
设置属性值：elem.setAttribute("属性名","属性值");
简化版：
获取属性值：elem.属性名;
设置属性值：elem.属性名="属性值";
简化版注意：两个小缺点：
1、class必须写为className
2、只能操作标准属性，不能操作自定义属性
建议：开发中优先使用简化版，简化版实现不了的时候在用复杂版代替
4.3、样式：
内联样式：
优点：1、优先级最高 - 保证js用户触发一定会生效
2、不会牵一发动全身 - 只会操作当前元素
缺点：1、获取样式时，一定要保证此样式在内联样式中
获取样式：elem.style.css属性名;
设置样式：elem.style.css属性名="css属性值";
特殊：css属性名的写法，如果有横线要去掉横线，变为小驼峰命名法
原来CSS JS：
background-color backgroundColor
width width
border-top-width borderTopWidth
4.4、*绑定事件：
为什么不用以前的绑定方式了呢？
保证HTML和CSS和JS分离
语法：elem.onclick=function(){
点击后要执行什么代码
***this关键字：
单个元素绑定事件，this->这个元素
多个元素绑定事件，this->当前触发事件的元素
}
