JavaScript(三)Dom查找、设置标签属性及内容、绑定事件

本章内容

一、介绍

二、dom之查找标签

1. id查找
2. 标签名查找
3. 类名查找
4. 复合查找

三、dom之设置标签的内容及属性

1. 设置标签的样式
2. 设置标签的内容 （innnerHTML）
3. 设置class（className）
4. 设置标签公用属性值（ele.attributename）
5. 设置标签所有属性值（Attribute）

四、dom之绑定事件

1. 介绍
2. onload
3. onclick
4. onmouseover
5. onmouseout
6. onfouce
7. onblur
8. onkeydow
9. onkeypress
10. onkeyup
11. keycode

 一、介绍

• dom即是Html的一个编程接口
• 需要把dom编码写在<script>标签内
• 通过获取dom来进行对标签的属性、样式、内容进行设置

二、dom之查找

1、Id查找

• 语法：dcument.getElementById('id')
• 返回值：dom对象
• *当没有id不存在时返回null
• *存在两个或多个同名的id值取第一个id

2、标签查找

• 语法：documnet.getElementsByTagName('tag')
• 返回值：一个对所有tag标签引用的dom对象的集合

3、类查找

• 语法：documnet.getElementsByClassName('classname')
• 返回值：一个对拥有classname属性引用的dom对象的集合

4、复合超找

• 某一个dom对象（是一个对象不是数组），再次进行dom超找。
• 如:document.getElementById('id').getElementsByTagName('li')

三、dom之设置标签的内容及属性

1、设置标签的样式

语法：ele.style.styleName=styleValue

作用：ele的样式

*之前css中的样式属性名‘-’现在都要用驼峰形式来命名

2、设置标签的内容 （innnerHTML）

语法：ele.innerHTML=value

作用：设置ele的内容，内容可以是一个html

语法 ret=ele.innerHTML

作用获取ele的内容

返回值：ele开始和结束标签之间的html

3、设置class（className）

语法：ele.className=value

功能：重写class值设置成value

*之前class的值会被覆盖

语法：ret=ele.className

作用：获取ele的class值

返回值：ele的class值

4、设置标签公用属性值（ele.attributename）

5、设置标签所有属性值（Attribute）