DOM：Document Object Model - 文档对象模型，专门用于操作文档（HTML）

DOM树：DOM将HTML看做了是一个倒挂的树状结构，树根：document对象，不需要创建
   DOM将每一个【元素】、文本、属性、注释，都看为是一个DOM节点/元素/对象
   树根作用：找到任何元素，找到元素后就可以操作元素

1、查找元素：
1、通过 HTML 特性：
	id：单个元素 - 没找到返回null

	标签/class名：var elems=document/parent.getElementsByTag/ClassName("标签/class名");
		特殊：1、DOM集合 - 不允许直接做操作的，要么加下标拿到某个，要么加遍历拿到所有
		      2、parent：你之前已经找到的某个父元素
		      3、没找到：[]

2、通过 关系：至少要找到一个人，才能使用关系网
	父元素：elem.parentNode;
	子元素：elem.children; - 集合
	第一个儿子：elem.firstElementChild;
	最后一个儿子：elem.lastElementChild;
	前一个兄弟：elem.previousElementSibling;
	后一个兄弟：elem.nextElementSibling;

2、操作元素：
1、内容：innerHTML(能识别标签)/innerText(纯文本)/value(专门为input准备的)
   获取：elem.xxxx
   设置：elem.xxxx="新内容"

2、属性：
   获取属性值：elem.getAttribute("属性名") -> elem.属性名
   设置属性值：elem.setAttribute("属性名","属性值") -> elem.属性名="属性值"

   简化版有缺陷：
	1、class写为className
	2、自定义属性不能操作到

3、样式：内联样式
   获取：elem.style.css属性名
   设置：elem.style.css属性名="css属性值";

   特殊：1、css属性名有横线去掉横线变成小驼峰命名法
	 2、只能访问内联

3、绑定事件：
单个元素：elem.onclick=function(){}

多个元素：for(var i=0;i<elems.length;i++){
		elems[i].onclick=function(){}
	  }

this关键字：目前只能在【事件】中使用
	单个元素绑定事件this->这个元素：绑定事件的这个元素

	多个元素绑定事件this->当前元素：当前触发事件的元素

1、***数据类型转换
1、强制转换：3类
   1、转字符串：
	1、x.toString();//x不能是undefined和null - undefined和null不能.
        2、String(x);//万能的，任何人都可以转为字符串，不重要
	不重要的原因：
		1、页面上一切的数据都是字符串
		2、String(); 完全相当于隐式转换 - 还不如+""

   2、*转数字：
	1、*parseInt/Float(str);//专门为字符串转数字准备的
		原理：从左向右依次读取每个字符，碰到非数字字符就停止，如果一来就不认则为NaN，
		      Int不认识小数点，Float认识第一个小数点

	2、Number(x);//万能的，任何人都可以转为数字，不重要 - 完全相当于隐式转换 - 还不如-0 *1 /1

   3、转布尔：
	   Boolean(x);//万能的，任何人都可以转为布尔，不会手动使用的，还不如：!!x
	   ***只有6个会为false：0,"",undefined,null,NaN,false，其余都为true
	   在分支、循环的条件之中，以后不管代老师写的是什么，他都会悄悄的隐式转换为布尔值，你只需要考虑为true还是为false

2、隐式转换：都是出现在运算符之中

2、****运算符和表达式：
1、*算术运算符：+ - * / %
	 特殊：1、%：取余，判断奇偶性
	       2、隐式转换：默认转为数字，在运算
			true->1
			false->0
			undefined->NaN
			null->0
		        特殊：1、+运算，碰到字符串，拼接
                                      2、-*/%：字符串可以转为数字，但是纯数字组成才行，但凡包含一个非数字字符，则为NaN


2、*比较运算符：> < >= <= == != === !==
	  结果：布尔值
      隐式转换：默认，转为数字，再比较大小
	  特殊：1、如果参与比较的左右两边都是字符串，则是按位PK每个字符的十六进制unicode号（十进制ascii码）
			0-9<A-Z<a-z<汉字：常识：汉字的第一个字：一：unicode：4E00 - ascii：19968
						    最后一个字：龥：unicode：9FA5 - ascii：40869

		2、NaN参与任何比较运算结果都是false，所以没有办法用普通的比较运算判断是不是NaN
			!isNaN(x);

		3、undefined==null;//true
		   区分：undefined===null;
		   === !==：不带隐式转换的等值比较和不等比较，要求数值相同，并且数据类型也要相同

		function String(x){
			if(x===undefined){
				return "undefined";
			}else if(x===null){
				return "null";
			}else{
				return x.toString();
			}
		}


3、*逻辑运算：
	&&：全部满足，才true	
            一个不满足，则false

	||：全部不满足，才false
	    一个不满足，则true

	 !：颠倒布尔值

	特殊：短路逻辑：如果前一个条件，已经能够得出最后结论了，则不看后续
		&&短路：如果前一个条件满足，才执行后续操作，如果前一个条件不满足，则不管后续操作
		  目的：简化【简单的】分支：1、一个条件一件事满足就做，不满足就不做 if(){}	  2、操作只能有一句话
			条件&&(操作);
		  举例：原来：if(money>=500){money*=0.8};
			现在：money>=500&&(money*=0.8);

		||短路：浏览器兼容：二选一操作 
			e=e||window.event;

4、位运算：
   左移：m<<n，读作m左移了n位，翻译：m*2的n次方
   右移：m>>n，读作m右移了n位，翻译：m/2的n次方
   缺点：底数只能2

5、赋值运算：+= -= *= /= %=
   一个操作两件事，先计算，在赋值回去。

	i++;//递增：每次只会固定+1
	i+=1;//累加：每次+几由我们程序员自己决定

	i++ === i+=1 === i=i+1;

	鄙视题：++i和i++的区别：
		单独使用，放前放后无所谓，效果一样。
		但是如果参与了别的表达式，变量中的值都会+1
			前++返回的是加了过后的新值
			后++返回的是加了之前的旧值

6、三目运算：简化if...else	简化if...else if...else
   语法：
	1、条件?操作1:默认操作;

	2、条件1?操作1:条件2?操作2:条件3?操作3:默认操作;

	特殊：
	  1、只能简化简单的分支 - 操作只能有一句话
	  2、默认操作不能省略

   总结：
	if	===	&&短路
	if else ===     三目
	if else if else ===  三目

ECMAscript - 核心语法2 - 掘金 (juejin.cn)
ECAM script - 核心语法3 - 掘金 (juejin.cn)
ECMA script - 核心语法4-1 - 掘金 (juejin.cn)
ECAM script - 核心语法4-2 - 掘金 (juejin.cn)
ECMA script - 核心语法5 - 掘金 (juejin.cn)
ECMA script - 核心语法6 - 掘金 (juejin.cn)
ECMA script - 核心语法7-1 - 掘金 (juejin.cn)
ECMA script - 核心语法7-2 - 掘金 (juejin.cn)
ECMAscript 8 - 掘金 (juejin.cn)
ES5&ES6 - 掘金 (juejin.cn)