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

本章内容

一、介绍

二、dom之查找标签

id查找标签名查找类名查找复合查找

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

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

四、dom之绑定事件

介绍onloadonclickonmouseoveronmouseoutonfouceonbluronkeydowonkeypressonkeyupkeycode

 

 一、介绍

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）

 

转载于:https://www.cnblogs.com/learn-python-M/p/7680266.html

相关资源：数据结构—成绩单生成器