Java Script:DOM操作
1.webapi
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
web API特指浏览器提供的API
2.DOM概念
是W3C组织推荐的处理可扩展标志语言的标准编程接口（其实就是处理html的接口）
3.获取元素的方式
除了根据id获取元素、通过选择器的querySelector获取元素是非伪数组，其他都是伪数组，伪数组需要通过索引加下标的方式访问
伪数组定义：和数组类似，可以通过下标方式取出内容，也可以通过for循环遍历，但是不能用数组方法
顶层对象：document
1、根据id获取元素（非伪数组）
var div1 = document.getElementById("box1"); //只能拿到一个，多个id,只能拿到第一个
2、通过类名获取元素（伪数组）
var p1Arr = document.getElementsByClassName("p1");
3、通过标签名获取元素（伪数组）
var tag1 = document.getElementsByTagName("div");
4、通过name名获取元素（ 伪数组）
var userList = document.getElementsByName("user");
5、通过选择器的querySelector获取元素（非伪数组）
querySlector():获取指定选择器的第一个元素，参数就是选择器的名称
var div1 = document.querySelector(".box1");
6、通过选择器的querySelectorAll获取元素 （伪数组）
querySelectorAll():获取指定选择器的所有的元素，参数就是选择器的名称
var boxList = document.querySelectorAll(".box1");
4.事件
（1）事件三要素
事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)
（2）事件的基本使用
鼠标单击事件：onclick 浏览器加载完成事件：onload
（3）事件触发的多种写法
HTML内部书写所有
HTML行内触发方法
HTML外部书写
5.非表单元素的属性操作
href、title、id、src、className width height等等
1.添加src属性值显示图片
imgBox.src = "images/jie.jpg";
2.改变图片大小
imgBox.width = 750;
imgBox.height = 500;
3.通过style改变宽高
imgBox.style.width = 750 + "px";
imgBox.style.height = 500 + "px";
//通过样式属性设置宽高、位置的属性类型是字符串，需要加上px
凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可
4.通过类名改变宽度
imgBox.className = "imgCl";
//className 会覆盖之前设置好的类名！
5.隐藏元素
（1）src=""
（2）display=none; 不占位置的
（3）visibility="hidden”
6.this的指向问题
- 普通函数中，this指向window
- 事件函数中，this指向事件源
- 对象函数中，this指向当前的对象
- 构造函数中，this指向实例化对象
- 定时器里面this指向window (setInterval和setTimeout)
6.表单元素属性操作
value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性checked 复选框选中属性
selected 下拉菜单选中属性
checked
7.文本内容属性
innerText和innerHTML的区别：
共同点：都会覆盖原有内容，如果都想要，将”=”换成”+=”
不同点：
innerText主要是设置文本的,设置标签内容,是没有标签的效果的，保持原样输出
innerHTML是可以设置文本内容,会解析富文本