天津中小企业网站建设,南京营销网站开发制作报价,高德地图能否上传vr全景图片,wordpress 自定义内容类型 pan文章目录 1、DOM介绍2、DOM#xff1a;获取Element对象3、DOM#xff1a;事件监听3.1、事件介绍3.2、常见事件3.3、设置事件的两种方式3.4、事件案例 1、DOM介绍 概念 Document Object Model #xff0c;文档对象模型
将标记语言的各个组成部分封装为对应的对象#xff1a… 文章目录 1、DOM介绍2、DOM获取Element对象3、DOM事件监听3.1、事件介绍3.2、常见事件3.3、设置事件的两种方式3.4、事件案例 1、DOM介绍 概念 Document Object Model 文档对象模型
将标记语言的各个组成部分封装为对应的对象
Document整个文档对象Element元素对象Attribute属性对象Text文本对象Comment注释对象 JavaScript 通过DOM就能够对HTML进行操作 改变 HTML 元素的内容改变 HTML 元素的样式CSS对 HTML DOM 事件作出反应添加和删除 HTML 元素 2、DOM获取Element对象
HTML中的Element对象可以通过Document对象获取而Document对象是通过window对象获取的。
Document对象中提供了以下获取Element元素对象的函数:
1、根据id属性值获取返回单个Element对象
img idlight srcimg/off.gif br
scriptdocument.getElementById(light).src img/on.gif;
/script2、根据标签名称获取返回Element对象数组
div小林/div br
div不想努力了/div brscript// getElementsByTagName根据标签名称获取元素数组// innerHTML表示修改标签元素中的内容let htmlDivElement document.getElementsByTagName(div);for (let element of htmlDivElement){element.innerHTML 哈哈;}
/script3、根据name属性值获取返回Element对象数组
input typecheckbox namehobby 电影
input typecheckbox namehobby 旅游
input typecheckbox namehobby 游戏scriptlet elementsByName document.getElementsByName(hobby);for (let hobbyElement of elementsByName) {hobbyElement.checked true;}
/script4、根据class属性值获取返回Element对象数组
div classclsJava/divbr
div classclsPHP/divbrscriptlet elementsByClassName document.getElementsByClassName(cls);for (let ClassNameElement of elementsByClassName) {ClassNameElement.innerHTML 嘻嘻;}
/script3、DOM事件监听
3.1、事件介绍 什么是事件 用户可以对网页的元素有各种不同的操作如单击双击鼠标移动等这些操作就称为事件。事件通常与函数配合使用这样就可以通过发生的事件来驱动JavaScript函数执行。
3.2、常见事件
事件名说明onclick鼠标单击事件onblur元素失去焦点onfocus元素获得焦点onload某个页面或图像被完成加载onsubmit当表单提交时触发该事件onkeydown某个键盘的键被按下onmouseover鼠标被移到某元素之上onmouseout鼠标从某元素移开
3.3、设置事件的两种方式 方式一命名函数 通过标签中的事件属性进行绑定
button typebutton onclick函数名()/buttonscript// 命名函数设置事件function abc(){alert(你点我了)}
/script方式二匿名函数 通过DOM元素属性绑定
input typebutton idbtnscript// 匿名函数设置失去焦点的事件document.getElementById(btn).onclick function (){alert(我被点了)}
/script3.4、事件案例 当输入用户名时显示正在输入离开时显示请输入 案例代码 用户名: input idin1 nameusernbsp;nbsp;nbsp;nbsp;nbsp;span idsp1请输入/spanscriptdocument.getElementById(in1).onfocus function (){document.getElementById(sp1).innerHTML 正在输入}document.getElementById(in1).onblur function (){document.getElementById(sp1).innerHTML 请输入}
/script
