javascript dom事件模型(JavaScript WebAPI、DOM、事件和操作元素实例详解)
javascript dom事件模型
JavaScript WebAPI、DOM、事件和操作元素实例详解目录
- WebAPI
- DOM
- DOM树
- DOM获取元素方式
- document对象属性
- 事件
- 事件的使用步骤
- 事件的类型
- 操作元素
- 操作元素内容
- 操作元素属性
- 操作元素样式
- 排他思想
- H5自定义属性
- 总结
API:应用程序编程接口,是一些预先定义的函数,由某个软件开放给开发人员使用的,帮助开发者实现某种功能,开发人员无须访问源码、无须理解其内部工作机制细节,只需知道如何使用即可
简单理解: API 是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能
WebAPI:主要针对浏览器的API,在JavaScript语言中被封装成了对象,通过调用对象的属性和方法就可以使用Web API
简单理解:Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )
DOM文档对象模型,是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口
DOM树
DOM将HTML文档处理成树形(倒)结构,将html文档看作是一棵树,文档中的标签、标签的属性、标签的内容都是数的节点
DOM树最顶端是document,BOM最顶端是window
- 文档(document)一个页面当成文档
- 元素(element)页面中所有标签元素
- 节点(node)网页中的所有内容,在文档树中都是节点(如:元素节点、属性节点、文本节点、注释节点等),每个节点都是对象,都有属性和方法
DOM获取元素方式
获取方式 | 用法 | 返回值 |
---|---|---|
根据Id获取 | document.getElementById(‘id') | 返回指定id的元素对象,未找到返回null,存在多个id返回undefined |
根据标签名 | document.getElementsByTagName(‘标签名') | 返回的是指定标签的动态集合,是一个类数组对象,伪数组,但不是数组。可以通过下标索引访问 |
根据Name获取 | document.getElementByName(‘name属性值') | 返回指定name的元素对象集合 |
根据ClassName获取(html5新增) | document.getElementByClassName(‘class属性值') | 返回指定classname的元素对象集合 |
根据选择器获取(新增) | document.querySelector(‘选择器') | 获取的是给定选择器元素,只能返回给定选择器第一个元素 |
根据选择器获取(新增) | document.querySelectorAll(‘选择器') | 获取的是给定选择器元素,返回元素的集合 |
document对象属性
方法 | 作用 |
---|---|
document.body | 返回文档的body元素 |
document.title | 返回文档的title元素,表示页面的标题 |
document.documentElement | 返回文档的html元素,即HTML页面的全部信息(通过此可以将文档全部元素放进一个字符串,供别人读取分析 |
document.froms | 返回对文档中所有From对象引用,复数形式,可以返回多个表单 |
document.images | 返回对文档中所有的image对象,与上述一样 |
事件:用户进行某种操作(可被JavaScript侦测到的行为),是一种“触发-响应”的机制,是实现页面交互的方式
事件三要素:
事件源:谁触发了事件事件类型:触发了什么事件事件处理程序:事件被触发后所执行的代码(函数形式)
事件的使用步骤
<body> <button id="btn">单击</button> <script> var btn = document.getElementById('btn')// 第1步:获取事件源 // 第2步:注册事件btn.onclick btn.onclick = function () { // 第3步:添加事件处理程序(采取函数赋值形式) alert('弹出') } </script> </body>
事件名=函数名([参数])
注意:创建按钮的方式(2种)
<input type="button" value="按钮显示文字"> <button type="button">按钮显示文字</value>
事件的类型
操作元素操作元素内容
DOM提供的属性实现对元素内容的操作方法:
- innerHTML (W3C)识别html标签。在使用时会保留编写的格式以及标签样式
- innerText(非标准)不识别html标签。去掉所有格式以及标签的纯文本内容
- textContent属性在去掉标签后会保留文本格式
<body> <li id="box"> The first paragraph... <p> The second paragraph... <a href="#">third</a> </p> </li> </body> <script> var box = document.getElementById('box') console.log(box.innerHTML) console.log(box.innerText) console.log(box.textContent) </script>
操作元素属性
在DOM中,HTML属性操作是指使用JavaScript来操作一个元素的HTML属性
- 元素中:src、href等
- 表单中:id、alt、title等
操作元素样式
①操作style属性:元素对象.style.样式属性名
样式属性名对应CSS样式名,但需要去掉CSS样式名里的半字线“-”,并将半字线后面的英文的首字母大写
<body> <li id="box"></li> <script> var ele = document.querySelector('#box'); // 获取元素对象 ele.style.backgroundColor= 'red'; ele.style.width = '100px'; ele.style.height = '100px'; ele.style.transform = 'rotate(7deg)'; </script> <!-- 上述3行代码相当于在CSS中添加以下样式: --> <style> #box { background-color: red; width: 100px; height: 100px; transform: rotate(7deg); } </style> </body>
②操作className属性:元素对象.className
- 在开发中,如果样式修改较多,可以采取操作类名的方式更改元素样式
- 访问className属性的值表示获取元素的类名,为className属性赋值表示更改元素类名
- className会更改元素的类名,会覆盖原先的类名
- 如果元素有多个类名,在className中以空格分隔
排他思想
如果有同一组元素,要某一个元素实现某种样式, 需要用到循环的排他思想算法:
- 所有元素全部清除样式(干掉其他人)
- 给当前元素设置样式 (留下我自己)
- 注意顺序不能颠倒,首先干掉其他人,再设置自己
H5自定义属性
自定义属性目的: 是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中
有些自定义属性很容易引起歧义,不容易判断是元素的自带属性还是自定义属性,HTML5新增了自定义属性的规范,在HTML5中规定通过“data-属性名”的方式设置自定义属性
设置属性值:
①在HTML中设置自定义属性
data-属性名=‘值'
// 在li元素上设置data-index属性 <li data-index="2"></li>
②在JavaScript中设置自定义属性
- element.setAttribute(‘属性', 值)
- element.dataset.属性名=‘值'
<li></li> <script> var li = document.querySelector('li'); li.dataset.index = '2'; li.setAttribute('data-name', 'andy'); </script>
获取属性值:
- element.getAttribute()
- element.dataset.属性
- element.dataset[‘属性'] (有兼容性问题)
注意: dataset是一个集合,里面存放了所有以data开头的自定义属性,如果自定义属性里面包含有多个连字符(-)时,获取的时候采取驼峰命名法
<li getTime="20" data-index="2" data-list-name="andy"></li> <script> var li = document.querySelector('li'); console.log(li.getAttribute('data-index')); // 结果为:2 console.log(li.getAttribute('data-list-name')); // 结果为:andy // HTML5新增的获取自定义属性的方法,只能获取“data-”开头的属性 console.log(li.dataset); // DOMStringMap {index:"2",listName:"andy"} console.log(li.dataset.index); // 结果为:2 console.log(li.dataset['index']); // 结果为:2 console.log(li.dataset.listName); // 结果为:andy console.log(li.dataset['listName']); // 结果为:andy </script>
移除属性值:
element.removeAttribute(‘属性')
<li id="test" class="footer" ></li> <script> var li = document.querySelector('li'); li.removeAttribute('id'); // 移除li元素的id属性 li.removeAttribute('class'); // 移除li元素的class属性 </script>
具体操作元素案例见文章: JavaScript 操作元素案例练习
总结到此这篇关于JavaScript WebAPI、DOM、事件和操作元素的文章就介绍到这了,更多相关js WebAPI、DOM、事件和操作元素内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
- js 原生事件代理(如何利用原生JS实现触摸滑动监听事件)
- js事件冒泡与事件捕获(基于事件冒泡、事件捕获和事件委托详解)
- react的事件绑定(React事件绑定的方式详解)
- 常见跨浏览器事件的解决方法
- python设置按钮(Python按钮的响应事件详解)
- react事件绑定的方式和区别(react合成事件与原生事件的相关理解)
- SQLServer中使用扩展事件获取Session级别的等待信息及SQLServer 2016中Session级别等待(SQLServer中使用扩展事件获取Session级别的等待信息及SQLServer 2016中Session级别等待)
- nginx事件模型有几种(Python实现监控Nginx配置文件的不同并发送邮件报警功能示例)
- SQL Server Profile事件含义
- vue中怎么触发复选框的点击事件(vue点击弹窗自动触发点击事件的解决办法模拟场景)
- javascript动作事件有哪些(JavaScript之事件循环案例讲解)
- vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
- vue自定义组件修饰符(Vue自定义组件使用事件修饰符的踩坑记录)
- canvas跟随鼠标绘制(如何在Canvas上的图形/图像绑定事件监听的实现)
- laravel队列是如何触发的(laravel 事件/监听器实例代码)
- sql server事件跟踪器中常用的跟踪事件
- 阴阳师孟婆御魂推荐 孟婆御魂搭配毕业套(阴阳师孟婆御魂推荐)
- 袁冰妍终于接到新剧,饰演反追男主,看到合作演员 眼光果然毒辣(袁冰妍终于接到新剧)
- 记忆中的台词(记忆中的台词)
- 袁冰妍轧戏 拍《琉璃》的同时还在拍《将夜》,难怪被骂演技差(拍琉璃的同时还在拍将夜)
- 刚红就耍大牌,《琉璃》角色滤镜碎一地,心疼工作人员(琉璃角色滤镜碎一地)
- 袁冰妍郑业成这对可以处,有脸红情话他们是真的敢说(袁冰妍郑业成这对可以处)
热门推荐
- mysql集群是用什么搭建的(MySQL5.7 集群配置的步骤)
- dedecms如何更改文章发布时间(Dedecms实现自动统计当前栏目文档总数的方法)
- vue本地图片切换(vue动态加载本地图片的处理方法)
- linux部署tomcat项目(阿里云服务器linux系统搭建Tomcat部署Web项目)
- 云主机免费体验(免费云主机试用一年靠谱吗)
- 常用web服务器与简介(最流行的5大开源web服务器)
- vue可以用vite打包吗(vite+vue3+element-plus项目搭建的方法步骤)
- dedecms5.7使用教程(dedecms v5.7提示php.ini register_globals must is Off错误的解决方法)
- 织梦dedecms专题页制作详细教程(织梦Dedecms系统SEO优化之网站URL目录优化)
- tmp文档可以删除吗(tmpwatch命令清除旧文件的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9