JS Web API
API的概念
API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。
Web APIs的概念
Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM 和 DOM）
API和Web API总结
- API是为程序员提供的一个接口，帮助我们实现某种功能。
- Web API 主要针对浏览器提供的接口，主要针对浏览器做交互效果。
- Web API一般都有输入和输出（函数的传参和返回值），WebAPI很多都是方法（函数）
- 学习API可以结合前面学习内置对象方法的思路学习
DOM介绍
文档对象模型（Document Object Model，简称DOM）,是处理可扩展标记语言的标准编程接口。
DOM树
DOM数 又称为文档数模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。
- 文档：一个页面就是一个文档，DOM中使用document表示
- 节点：网页中的所用内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
- 标签节点：网页中的所有标签，通常成为元素节点，又简称为“元素”，使用element表示
获取元素
根据ID获取
语法：docuemnt.getElementById(“id”)
作用：根据ID获取元素对象
参数id值，区分大小写的字符串
返回值：元素对象 或 null
<div id=one></div>
<script>
var one = document.getElementById("one");
one.style.backgroundColor="red"
one.style.width="100px"
one.style.height="100px"
</script>根据标签名获取元素
语法：document.getElementsByTagName(“标签名”)
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）
<div></div>
<div></div>
<div></div>
<script>
var one = document.getElementsByTagName("div");
//控制台查看返回数组
console.log(one)
//循环输出
for(var i = 0; i<one.length; i++ ){
one[i].style.width='100px';
one[i].style.height="100px"
one[i].style.backgroundColor="red"
}H5新增获取元素方式
- document.getElementsByClassName(“类名”)//根据类名返回数组对象集合
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<script>
var one = document.getElementsByClassName("one")
console.log(one)
</script>- document.querySelector(“选择器”)//根据指定选择器返回第一个元素对象
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<script>
var one = document.querySelector(".one")
console.log(one)
</script>- document.querySelectorAll(“选择器”)//根据指定选择器返回
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<script>
var one = document.querySelectorAll(".one")
console.log(one)
</script>获取特殊元素（body，html）
获取body元素
document.body
document.body.style.backgroundColor="red"获取html元素
document.documentElement
document.documentElement.style.color="red"事件基础
事件三要素
- 事件源（谁）：触发时间的元素
- 事件类型（什么事件）：例如click点击事件
- 事件处理程序（做什么）：事件触发后要执行的代码
<button>点击事件</button>
<script>
var btn = document.querySelector("button")
btn.onclick = function(){
alert("我在这")
}
</script>常见的鼠标事件
事件 | 说明 |
onClick | 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 |
onfocus | 获得鼠标焦点 |
onblur | 失去鼠标焦点 |
onMouseOut | 当鼠标离开某对象范围时触发的事件 |
onDblClick | 鼠标双击事件 |
onMouseDown | 鼠标上的按钮被按下了 |
onMouseUp | 鼠标按下后，松开时激发的事件 |
onMouseOver | 当鼠标移动到某对象范围的上方时触发的事件 |
onMouseMove | 鼠标移动时触发的事件 |
键盘事件
事件 | 说明 |
onkeydown | 按下键盘时运行脚本 |
onkeypress | 按下并松开时运行脚本 |
onkeyup | 事件会在键盘按键被松开时发生 |
操作元素
改变元素内容
element.innerText
从起始位置到终止位置的内容，但去除html标签
<button>点击事件</button>
<script>
var btn = document.querySelector("button")
btn.onclick = function(){
btn.innerText="<strong>我变粗了</strong>"
}element.innerHTML
从起始到终止位置的全部内容，包括html标签<button>点击事件</button>
<script>
var btn = document.querySelector("button")
btn.onclick = function(){
btn.innerHTML="<strong>我变粗了</strong>"
}区别
- 获取内容时
- innerText会去除空格和换行，innerHTML会保存
- 设置内容时的区别
- innerText不识别HTML，innerHTML会识别
案例：点击获取当前时间
<button>点击</button>
<div>显示时间</div>
<script>
var btn = document.querySelector("button")
var time = document.querySelector("div")
btn.onclick = function(){
time.innerHTML= getDate();
}
function getDate(){
var date= new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var dates = date.getDate();
var day = date.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
return `今天是：${year} 年 ${month} 月 ${dates} 日 ${arr[day]}`
}
</script>常用的元素的属性操作
- inneText、innerHTML
- src‘、href
- id、alt、title
表单属性操作
type、value、checked、selected、disabled
获取元素的值
元素对象.属性名
设置属性的值
元素对象.属性名 = 值
表单元素中有一些属性如disabled、checked、selected，元素对象的这些属性的值是布尔型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
width: 800px;
}
th,
td {
border: 1px solid #000;
padding: 15px;
/* width: 100px; */
text-align: center;
}
.active {
background: rgb(240, 111, 111);
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th><input id='all' type="checkbox"></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class='cbox' type="checkbox"></td>
<td>1</td>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td><input class='cbox' type="checkbox"></td>
<td>2</td>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td><input class='cbox' type="checkbox"></td>
<td>3</td>
<td>小明</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
<script>
var trs = document.querySelectorAll('tbody tr');
var all = document.querySelector("#all")
var cbox = document.getElementsByClassName("cbox")
// 全选
all.onclick = function () {
for (var i = 0; i < cbox.length; i++) {
cbox[i].checked = this.checked;
}
}
//反选
for(var i = 0; i < trs.length; i++){
trs[i].onclick= function(){
var flag = 1;
for(var i = 0; i<trs.length; i++){
if(!cbox[i].checked){
flag = 0;
break
}
}
all.checked=flag
}
}
//悬浮背景
for (var j = 0; j< trs.length; j++) {
trs[j].onmouseover = function () {
this.className = 'active'
}
trs[j].onmouseout = function () {
this.className = ''
}
}
// for (var i = 0; i < trs.length; i++) {
// if (i % 2 == 0) {
// trs[i].style.background = ' yellow'
// } else {
// trs[i].style.background = 'purple'
// }
// }
</script>
</html>样式属性操作
element.style 行内样式操作
element.className 类名样式操作
自定义属性操作
- element.属性 获取内置属性值
element.getAttribute(‘属性’) 获取自定义的属性值
<body>
<div id="demo" index="1" class="nav"></div>
</body>
<script>
var div = document.querySelector("div")
console.log(div.id)
console.log(div.getAttribute('id'))
console.log(div.getAttribute('index'))
</script>设置属性值
- element.属性 = ‘值’ 设置内置属性值
- element.setAttribute(‘属性’,‘值’)
var div = document.querySelector("div")
div.setAttribute('class','hello')
div.setAttribute('index',2)移出属性
- element.removeAttribute(‘属性’)
div.removeAttribute('index')计数器案例
<script>
var btn = document.querySelector("button");
var flag = 0
btn.onclick = function () {
if (flag == 0) {
document.body.style.background = '#000'
flag = 1
} else if (flag == 1) {
document.body.style.background = '#fff'
flag = 0
}
}
</script>全选与反选案例
<script>
var all = document.querySelector('.all');
var box = document.querySelectorAll('tbody input');
//全选
all.onclick = function(){
//设置点击事件
for(var i = 0; i < box.length; i++){
box[i].checked = this.checked
//循环，为每一个 input 设置选中属性
}
}
//反选
for(var i = 0; i < box.length; i++){
//循环出所有的 input 标签
box[i].onclick = function(){
//设置点击事件，当点击一个 input 时 判断其他 input 标签状态
var flag = 1;
//设置旗帜变量，如果为 1 则反选
for(var i = 0; i < box.length; i++){
if(!box[i].checked){
//如果 tbody 中的 input 有一个没有被选中，执行判断语句
flag = 0;
break;
}
}
all.checked=flag //结果
}
}
</script>nav案例
<script>
var lis = document.querySelectorAll('li');
//获取全部 li 标签
var divs = document.querySelectorAll('div');
//获取全部 div 标签
for (var i = 0; i < lis.length; i++) {
//循环 li 标签
lis[i].setAttribute('index', i);
//为每一个 li 标签设置 index 属性
lis[i].onclick = function () {
//设置点击事件
for (var i = 0; i < lis.length; i++) {
//清除所有样式
lis[i].className = ''
}
this.className = 'active';
//设置点击样式
var index = this.getAttribute('index');
//获取 index 属性
for(var i = 0; i<divs.length; i++){
//循环 div 标签
divs[i].style.display = 'none';
//设置所有 div 隐藏
}
divs[index].style.display = 'block';
//设置索引值为 index 的 div 的样式为 显示
}
}
</script>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
