Web-API-DOM的获取元素-事件概述-事件三要素-执行事件的步骤-常见鼠标事件-操作元素-改变元素内容-常用元素的属性操作-常用元素的属性操作-样式属性操作

2. 获取元素
   2.2 根据ID获取
   用getElementById()方法可以获取带有ID元素对象
   document.getElementById(‘id’);
   console.dir()可以打印我们获取的元素对象,更好的查看对象里面的属性和方法

   2.3 根据标签名获取
   getElementsByTagName()方法可以返回指定标签名的对象的集合
   document.getElementsByTagName(‘标签名’);
   因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历
   得到元素对象是动态的
   如果获取不到元素,则返回为空的伪数组(因为获取不到对象)
   还可以获取某个元素(父元素)内部所有指定标签名的子元素
   element.getElementsByTagName(‘标签名’);
   注意:父元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己

   2.4 通过HTML5新增方法获取

   1. document.getElementsByClassName(‘类名’); 根据类名获得某些元素集合
   2. document.querySelector(‘选择器’); 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
   3. document.querySelectorAll(‘选择器’)返回指定选择器的所有元素对象集合
      注意:querySelector和querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’#nav’);

   2.5 特殊元素获取(body,html)
   获取body元素

   1. document.body
      获取html元素
   2. document.documentElement

3. 事件基础
   3.1 事件概述
   javascript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为
   简单理解: 触发—响应机制
   网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个
   事件，然后去执行某些操作。
   3.2 事件三要素

4. 事件源 （谁）

5. 事件类型 （什么事件）

6. 事件处理程序 （做啥）
   3.3 执行事件的步骤

7. 获取事件源

8. 注册事件（绑定事件）

9. 添加事件处理程序（采取函数赋值形式）
   3.3 常见鼠标事件
   鼠标事件 触发条件
   onclick 鼠标点击左键触发
   onmouseover 鼠标经过触发
   onmouseout 鼠标离开触发
   onfocus 获得鼠标焦点触发
   onblur 失去鼠标焦点触发
   onmousemove 鼠标移动触发
   onmouseup 鼠标弹起触发
   onmousedown 鼠标按下触发

10. 操作元素
    JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内
    容 、属性等。注意以下都是属性
    4.1 改变元素内容
    element.innerText
    从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉
    element.innerHTML
    起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行
    4.2 常用元素的属性操作

11. innerText、innerHTML 改变元素内容

12. src、href

13. id、alt、title
    4.3 表单元素的属性操作
    利用 DOM 可以操作如下表单元素的属性：
    type、value、checked、selected、disabled
    4.4 样式属性操作
    我们可以通过 JS 修改元素的大小、颜色、位置等样式。

14. element.style 行内样式操作

15. element.className 类名样式操作
    注意：
    1.JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
    2.JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

16. 如果样式修改较多，可以采取操作类名方式更改元素样式。

17. class因为是个保留字，因此使用className来操作元素类名属性

18. className 会直接更改元素的类名，会覆盖原先的类名。