JAVAscript概述

1. ECMAScript (ES3/ 5/ 6S)

JS的核心语法，基本的JS操作可能都离不开它

```
 网景公司得JavaScript
```
```
 微软仿照的JScript
```

2. DOM（Document Object Model）

文本对象模型，操作页面文档（html）的各种元素外招公式

3. BOM（Browser Object Model）

浏览器对象模型，针对浏览器的操作等

 （比如让浏览器关闭），但浏览器本身就具有这些中的有些功能，所以有重点但用处不是太大。

一、DOM概念

DOM树：把HTML看做了是一个倒挂的树状结构，但是树根并不是你们理解的HTML，而是document对象（属性和方法）
document对象不需要程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document
有一些属性和方法等待我们去学习
注意：DOM会把页面上的所有的元素都看做是一个DOM对象、DOM节点、DOM元素 - 都是同一个意思

二、获取元素三种方法

一切的获取的作用：往往都是用于判断
一切的设置的作用：说白了就是修改

1. 通过Id

语法：var elem=document.getElementById("id值");
返回：是一个DOM对象/DOM节点/DOM元素，才可以直接做操作
特殊：
- 如果id重复了，只会返回第一个
- 如果没找到，返回的是一个null
- 编程一般吧id留给后端人员，所以此方法白学，以后尽量不准使用 2. 通过标签名
语法：var elems=document/parent.getElementsByTagName("标签名");
返回：是一个DOM集合 - 是一个类数组对象：类似数组，也可以使用下标、length、遍历
特殊：
- 一个DOM集合是不允许直接做操作的，除非加下标得到某一个或遍历得到所有人，才能做操作
- 如果没找到，返回的是一个空集合
- 此方法不一定非要写document,也可以写一个parent（已经找到的某个父元素）注意

如果是写的document，则会找到页面上所有的标签
而写的是parent，只会找到parent下面的所有的标签 3. 通过class名

语法：var elems=document/parent.getElementsByClassName("class名");
返回：是一个DOM集合 - 是一个类数组对象：类似数组，也可以使用下标、length、遍历
特殊：
- 一个DOM集合是不允许直接做操作的，除非加下标得到某一个或遍历得到所有人，才能做操作
- 如果没找到，返回的是一个空集合
- 此方法不一定非要写document,也可以写一个parent（已经找到的某个父元素）注意如果是写的document，则会找到页面上所有的标签而写的是parent，只会找到parent下面的所有的标签

三、通过节点之间的关系获取元素

前提： 至少先要找到一个元素，才能找关系（就好比要找关系，你必须要先找到一个人）

父元素：xx.parentNode - 单个元素
子元素：xx.children - 集合
第一个儿子：xx.firstElementChild - 单个元素
最后一个儿子：xx.lastElementChild - 单个元素
前一个兄弟：xx.previousElementSibling - 单个元素
后一个兄弟：xx.nextElementSibling - 单个元素

四、操作元素

操作元素：<elem 属性名="属性值" style="样式">内容

1. 内容

 1、*innerHTML：用于操作双标签，能够识别标签
 获取：elem.innerHTML;
 设置/修改：elem.innerHTML="新内容";

2、innerText：用于操作双标签，不能识别标签
 获取：elem.innerText;
 设置/修改：elem.innerText="新内容";

 3、*value：用于操作input
 获取：elem.value;
 设置/修改：elem.value="新内容";

2. 属性

获取属性值：elem.getAttribute("属性名");

设置属性值：elem.setAttribute("属性名","属性值");

简化版：
  获取属性值：elem.属性名;
  设置属性值：elem.属性名="属性值";
      
简化版注意：两个小缺点：
  1、class必须写为className
  2、只能操作标准属性，不能操作自定义属性

建议：开发中优先使用简化版，简化版实现不了的时候在用复杂版代替

3. 样式

 内联样式：
	优点：1、优先级最高 - 保证js用户触发一定会生效
	      2、不会牵一发动全身 - 只会操作当前元素
	缺点：1、获取样式时，一定要保证此样式在内联样式中

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

特殊：css属性名的写法，如果有横线要去掉横线，变为驼峰命名法（从第一个单词之后的每个单词的首字母要大写）
原来CSS				JS：
background-color		backgroundColor
width				width

4、绑定事件：

为什么不用以前的绑定方式了呢？原因：保证HTML和CSS和JS分离

语法：elem.onclick=function(){
		点击后要执行什么代码
		***this关键字：
			单个元素绑定事件，this->这个元素
			多个元素绑定事件，this->当前触发事件的元素
      }

js