操作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.获取所有的满足 classcls 条件的元素对象二.获取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 就是 单击事件 的事件属性。 onclickon 表示该点击事件绑定了一个名为 on()的函数方式二通过 DOM 元素属性绑定如下面代码是按钮标签在该标签上我们并没有使用 事件属性 绑定事件的操作需要在 js 代码中实现2 常见事件上面案例中使用到了 onclick 事件属性那都有哪些事件属性供我们使用呢下面就给大家列举一些比较常用的事件属性onfocus 获得焦点事件。如下图当点击了输入框后输入框就获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。onblur 失去焦点事件。如下图当点击了输入框后输入框就获得了焦点再点击页面其他位置那输入框就失去焦点了。下图示例是将输入的文本转换为大写。onmouseout 鼠标移出事件。onmouseover 鼠标移入事件。如下图当鼠标移入到 苹果 图片上时苹果图片变大当鼠标移出 苹果图片时苹果图片变小。