JavaScript_DOM

学习路线：JavaScript_DOM->事件绑定(onclick,onfocus,onblur)->
事件绑定(onmouseout,onmouseover)
->事件绑定(onsubmit)表单提交
->提交表单与验证表单案例

概述

简单说就是用来操作HTML的方法，详情看官方文档。

对于我们只需要会使用下面的这个Element对象就可以了。

获取 Element对象

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。

Document 对象中提供了以下获取 Element 元素对象的函数

• getElementById()：根据id属性值获取，返回单个Element对象
• getElementsByTagName()：根据标签名称获取，返回Element对象数组
• getElementsByName()：根据name属性值获取，返回Element对象数组
• getElementsByClassName()：根据class属性值获取，返回Element对象数组

代码演示：

下面有提前准备好的页面：

 
div1
   
div2
 
 电影 旅游 游戏

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

    
div1
   
div2
 
 电影 旅游 游戏

运行结果：

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

 
div1
   
div2
 
 电影 旅游 游戏

运行结果：

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

 
div1
   
div2
 
 电影 旅游 游戏

运行结果：

4. 获取所有的满足 class='d' 条件的元素对象getElementsByClassName()

 
div1
   
div2
 
 电影 旅游 游戏

运行结果：

小案例

获取被选中的复选框对象

 电影 旅游 游戏

运行结果

设置div中的内容

1
2

运行结果