JavaScript(三)Dom查找、设置标签属性及内容、绑定事件
本章内容
一、介绍
二、dom之查找标签
- id查找
- 标签名查找
- 类名查找
- 复合查找
三、dom之设置标签的内容及属性
- 设置标签的样式
- 设置标签的内容 （innnerHTML）
- 设置class（className）
- 设置标签公用属性值（ele.attributename）
- 设置标签所有属性值（Attribute）
四、dom之绑定事件
- 介绍
- onload
- onclick
- onmouseover
- onmouseout
- onfouce
- onblur
- onkeydow
- onkeypress
- onkeyup
- 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）
