WEB API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
DOM：是W3C组织推荐的处理可扩展标记语言的标准编程接口。DOM可以改变网页的内容、结构和样式。
文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中所有标签都是元素，DOM中使用element表示
节点：网页中所有内容都是节点，DOM中使用node表示
获取元素：
- 根据ID获取，使用getElementById(’’)
- 根据标签，使用getElementsByTagName(’’),返回是获取过来元素对象的集合以伪数组的形式存储的，页面中只有一个，或者没有元素，返回的还是伪数组的形式
- 根据类名，getElementsByClassName(’’);
- 根据指定选择器返回第一个元素对象：querySelector(’’);
- 根据指定选择器返回： querySelectorAll(‘选择器’);
- 获取body: document.body
- 获取html：document.documentElement;
<body>
<div class='div'></div>
<script>
console.log(document.querySelector('div'));
console.log(document.querySelector('.div'));
</script>
</body>
其中script标签需要放到body其余标签的下面，否则无法获取到元素。
console.dir 可以打印返回的元素对象，更好的查看里面的属性和方法。
事件基础:事件有三部分组成 ： 事件源 事件类型 事件处理程序 也称为事件三要素
（1）事件源 事件被触发的对象 谁
（2）事件类型 如何触发 什么事件 鼠标点击(onclick) 还是鼠标经过 还是键盘按下
（3）事件处理程序 通过一个函数表达式的方式完成
执行事件的步骤：1、获取事件源 2、注册事件（绑定事件） 3、添加事件处理程序（采用函数赋值形式）
btn.onclick = function(){
alert(’’);
}
常见的鼠标事件
- onclick：鼠标点击左键触发
- onmouseover：鼠标经过触发
- onmouseout：鼠标离开触发
- onfocus：获得鼠标焦点触发
- onblur：失去鼠标焦点触发
- onmousemove：鼠标移动时触发
- onmouseup：鼠标弹起触发
- onmousedown：鼠标按下触发
改变元素内容（可以获取元素里面的内容)：
- element.innerText : 不识别标签，非标准，去除空格和换行
- element.innerHTML ： 识别标签，W3C标准，保留空格和换行
样式属性操作：
- element.style : 行内样式操作
- element.className : 可以通过修改元素的className更改元素的样式，适合于样式较多或者功能复杂的情况。
类名样式操作,会直接覆盖类名。this.className = ‘change’;
如果想要保留原先的类名，可以：this.className = ‘this.className’+’ change’;
如果想要某个表单被禁用，不能再点击disabled：this.disabled = true;
获得焦点事件 onfocus，失去焦点事件onblur
var text = document.querySelector('input');
text.onfocus = function(){
}
text.onblur = function(){
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
