BOM（全）

操作DOM
一.获取Element对象
1. HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。
Document 对象中提供了以下获取 Element 元素对象的函数
getElementById() ：根据id属性值获取，返回单个Element对象
getElementsByTagName() ：根据标签名称获取，返回Element对象数组

getElementsByName() ：根据name属性值获取，返回Element对象数组
getElementsByClassName() ：根据class属性值获取，返回Element对象数组

1.根据 id 属性值获取上面的 img 元素对象，返回单个对象

2.根据标签名称获取所有的 div 元素对象

3.获取所有的满足 name = 'hobby' 条件的元素对象

4.获取所有的满足 class='cls' 条件的元素对象

二.获取HTML属性对象并操作

三.遍历DOM数组
在上面的例子中，都是使用getElementById获取一个DOM对象进行操作。 但在实际开发中，经常会同时操作多个DOM对象，此时，可以使用循环来遍历DOM数组。

四.获取DOM对象的时机
1. 要特别注意一点，javaScript代码要写在body的最后。因为，必须要保证html代码全部加载完毕之后，才执行javaScript代码，才能获取DOM对象。
2. 如果一定要将javaScript代码放在html之前那么要做如下写法：

六，事件监听
要想知道什么是事件监听，首先先聊聊什么是事件？
HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的 按钮被点击 、 鼠标移动到元素之上 、 按下键盘按键 等都是事件。
事件监听是JavaScript 可以在事件被侦测到时==执行一段逻辑代码。==例如下图当我们点击 实现页面开
灯效果，就需要通过 js 代码实现替换图片
再比如下图输入框，当我们输入了用户名 光标离开 输入框，就需要通过 js 代码对输入的内容进行校验，没通过校验就在输入框后提示 用户名格式有误!

1 事件绑定
JavaScript 提供了两种事件绑定方式：
方式一：通过 HTML标签中的事件属性进行绑定
如下面代码，有一个按钮元素，我们是在该标签上定义 事件属性 ，在事件属性中绑定函数。
onclick 就是 单击事件 的事件属性。 onclick='on（）' 表示该点击事件绑定了一个名为 on()
的函数

方式二：通过 DOM 元素属性绑定
如下面代码是按钮标签，在该标签上我们并没有使用 事件属性 ，绑定事件的操作需要在 js 代码中
实现

2 常见事件
上面案例中使用到了 onclick 事件属性，那都有哪些事件属性供我们使用呢？下面就给大家列举一些比
较常用的事件属性

onfocus 获得焦点事件。
如下图，当点击了输入框后，输入框就获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。

onblur 失去焦点事件。
如下图，当点击了输入框后，输入框就获得了焦点；再点击页面其他位置，那输入框就失去焦点了。下图示例是将输入的文本转换为大写。

onmouseout 鼠标移出事件。
onmouseover 鼠标移入事件。
如下图，当鼠标移入到 苹果 图片上时，苹果图片变大；当鼠标移出 苹果图片时，苹果图片变小。