多平台统一管理软件接口,如何实现多平台统一管理软件接口
306
2022-06-06
API:应用程序编程接口,是一些预先定义的函数,由某个软件开放给开发人员使用的,帮助开发者实现某种功能,开发人员无须访问源码、无须理解其内部工作机制细节,只需知道如何使用即可
简单理解: API 是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能
WebAPI:主要针对浏览器的API,在JavaScript语言中被封装成了对象,通过调用对象的属性和方法就可以使用Web API
简单理解:Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )
文档对象模型,是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口
DOM将HTML文档处理成树形(倒)结构,将html文档看作是一棵树,文档中的标签、标签的属性、标签的内容都是数的节点
DOM树最顶端是document,BOM最顶端是window
获取方式 | 用法 | 返回值 |
---|---|---|
根据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.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提供的属性实现对元素内容的操作方法:
<body> <div id="box"> The first paragraph... <p> The second paragraph... <a href="#">third</a> </p> </div> </body> <script> var box = document.getElementById('box') console.log(box.innerHTML) console.log(box.innerText) console.log(box.textContent) </script>
在DOM中,HTML属性操作是指使用JavaScript来操作一个元素的HTML属性
①操作style属性:元素对象.style.样式属性名
样式属性名对应CSS样式名,但需要去掉CSS样式名里的半字线“-”,并将半字线后面的英文的首字母大写
<body> <div id="box"></div> <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
如果有同一组元素,要某一个元素实现某种样式, 需要用到循环的排他思想算法:
自定义属性目的: 是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中
有些自定义属性很容易引起歧义,不容易判断是元素的自带属性还是自定义属性,HTML5新增了自定义属性的规范,在HTML5中规定通过“data-属性名”的方式设置自定义属性
设置属性值:
①在HTML中设置自定义属性
data-属性名=‘值'
// 在div元素上设置data-index属性 <div data-index="2"></div>
②在JavaScript中设置自定义属性
<div></div> <script> var div = document.querySelector('div'); div.dataset.index = '2'; div.setAttribute('data-name', 'andy'); </script>
获取属性值:
注意: dataset是一个集合,里面存放了所有以data开头的自定义属性,如果自定义属性里面包含有多个连字符(-)时,获取的时候采取驼峰命名法
<div getTime="20" data-index="2" data-list-name="andy"></div> <script> var div = document.querySelector('div'); console.log(div.getAttribute('data-index')); // 结果为:2 console.log(div.getAttribute('data-list-name')); // 结果为:andy // HTML5新增的获取自定义属性的方法,只能获取“data-”开头的属性 console.log(div.dataset); // DOMStringMap {index:"2",listName:"andy"} console.log(div.dataset.index); // 结果为:2 console.log(div.dataset['index']); // 结果为:2 console.log(div.dataset.listName); // 结果为:andy console.log(div.dataset['listName']); // 结果为:andy </script>
移除属性值:
element.removeAttribute(‘属性')
<div id="test" ></div> <script> var div = document.querySelector('div'); div.removeAttribute('id'); // 移除div元素的id属性 div.removeAttribute('class'); // 移除div元素的class属性 </script>
具体操作元素案例见文章: JavaScript 操作元素案例练习
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~