Web APIs
Web APIs和JS基础关联性
API和Web API
API:应用程序编程接口
Web API:浏览器提供的一套操作浏览器功能和页面元素的API(BOM DOM)
DOM
DOM即文档对象模型,处理HTML或XML的标准编程接口。通过DOM接口可以改变样式内容结构。如可以做轮播图、倒计时…
DOM树
DOM把以上内容都看作对象。
获取元素
ID、标签名、H5新方法、特殊
getElementByld()返回一个匹配的ID元素
getElementsByTagName() 返回标签的集合
<ol id="ol">
<li>hi</li>
<li>hi</li>
</ol>
<ul>
<li>你好呀</li>
<li>你好呀</li>
<li>你好呀</li>
<li>你好呀</li>
<li>你好呀</li>
</ul>
<div id="time">2019-9-9</div>
<script>
// 因为文档页面从上往下加载,所以现有标签
// 驼峰命名法
//id是字符串 ()里面是字符串
// 返回的timer类型是对象
var timer = document.getElementById('time');
console.log(timer);//2019-9-9
console.dir(timer);//可以查看各种属性
var lis = document.getElementsByTagName('li')
console.log(lis);//返回的是 获取过来元素对象的集合 以伪数组的形式储存
console.log(typeof lis);//object
console.log(lis[0]);
// 依次打印
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 如果页面中仅有一个li返回的还是伪数组的形式
// 如果页面中没有li返回的是空的伪数组的形式
// element.getElementsByTagName('标签名')父元素必须是指定的单个元素
var ol = document.getElementById('ol')
var lis = ol.getElementsByTagName('li')
console.log(lis);
getElementsByClassName和H5新方法:
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<ul id="name">
<li>1</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var boxs = document.getElementsByClassName('box')//根据类名返回元素对象集合 伪数组形式存储
console.log(boxs);
console.log(document.querySelector('.box'));//返回指定选择器的第一个元素对象 里面要加符号
console.log(document.querySelector('#name'));//返回ul
console.log(document.querySelector('li'));
var allBoxs = document.querySelectorAll('.box')//返回指定选择器的所有元素对象的集合 为数组形式储存
console.log(allBoxs);
</script>
获取特殊元素对象:
<script>
var bodyEle = document.body;
console.dir(bodyEle);
var htmlEle = document.documentElement;
console.dir(htmlEle);
</script>
事件基础
事件三要素和执行步骤:
1.获取事件源 2.注册事件 3.事件处理程序
操作元素
js的DOM操作可以改变网页的内容、结构和样式,我们可以利用DOM操作元素改变元素里面的内容、属性等,注意以下都是属性。
改变元素内容
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>123</p>
<script>
//获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
//注册事件
btn.onclick = function fn() {
div.innerText = getDate();
}
function getDate() {
//格式化日期 年月日
var date = new Date();
var year = date.getFullYear();//返回当前日期的年
var month = date.getMonth() + 1;//返回的要少一
var dates = date.getDate();//返回几号
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是:' + year + '年' + month + '月' + dates + '日' + arr[day];
}
//我们元素可以不用添加事件,这叫做操作DOM
var p = document.querySelector('p');
p.innerText = getDate();
</script>
innerText和innerHTML的区别:
1.innerText不识别html标签 非标准 去除空格和换行
1.innerHTML识别html标签 W3C标准 保留空格和换行
两者都可以读写:
<div></div>
<p>你好
<span>我是刘德华</span>
</p>
<script>
var p = document.querySelector('p');
var div = document.querySelector('div')
console.log(p.innerHTML);
console.log(p.innerText);
div.innerText = '<em>今天</em>';//无法识别em会直接显示出来
// div.innerHTML = '<em>今天</em>';//会把今天变成斜体
</script>
修改元素属性
实例为修改图片的src属性
表单属性设置
案例,password可见隐藏,多次改变恢复的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
right: 2px;
top: 2px;
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="images/close.png" alt="" id="eye">
</label>
<input type="password" id="pwd">
</div>
<script>
//获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
//注册事件 处理程序
var flag = 0;
eye.onclick = function () {
if (flag == 0) {
pwd.type = 'text';
eye.src = 'images/open.png';
flag = 1;
} else {
pwd.type = 'password';
eye.src = 'images/close.png';
flag = 0;
}
}
</script>
</body>
</html>
修改样式属性
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
var box = document.querySelector('div');
box.onclick = function () {
//注意style里的属性和css里的写法不一样,是驼峰命名法
this.style.backgroundColor = 'blue';
this.style.width = '250px';
}
</script>
</body>
修改完样式属性后新的样式是以行内样式插入的
循环精灵图
适用于精灵图中的小图标排列有规律的情况
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.box {
width: 250px;
margin: 100px auto;
}
.box li {
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background: url(images/sprite.png) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 1. 获取元素 所有的小li
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
// 让索引号 乘以 44 就是每个li 的背景y坐标 index就是我们的y坐标
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
//注意写法 0后面有空格和负号
}
</script