Web APIs
1.获取元素
1.1根据ID获取
document.getElementById('id')
1.2根据标签名获取元素
- document.getElementsByTagName('标签名')
- element.getElementsByTagName('标签名')
1.3H5新增获取元素方式
- document.getElementsByClassName('类名')
- document.querySelector('选择器')
- document.querySelectorAll ('选择器')
1.4获取特殊元素
- 获取body 元素 document.body
- 获取html 元素 document.documentElement
2.改变元素内容
-
element.innerText
-
element.innerHTML
区别：1.innerText 不识别html标签 非标准 去除空格和换行
2.innerHTML 识别html标签 W3C标准 保留空格和换行的
3.开关灯
<button id="btn">开关灯</button>
<script>
var btn = document.getElementById('btn');
var flag = 0;
btn.onclick = function() {
if (flag == 0) {
document.body.style.backgroundColor = 'black';
flag = 1;
} else {
document.body.style.backgroundColor = '#fff';
flag = 0;
}
}
</script>
4.排他思想
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 1. 获取所有按钮元素
var btns = document.getElementsByTagName('button');
// btns得到的是伪数组 里面的每一个元素 btns[i]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// (1) 我们先把所有的按钮背景颜色去掉 干掉所有人
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// (2) 然后才让当前的元素背景颜色为pink 留下我自己
this.style.backgroundColor = 'pink';
}
}
//2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
</script>
5.自定义属性操作
-
获取属性值：element.getAttribute('属性')
-
设置属性值：element.setAttribute('属性', '值')
div.setAttribute('class', 'footer'); // class 特殊 这里面写的就是class 不是className
-
移除属性值：removeAttribute('属性')
h5新增的获取自定义属性的方法：
element.dateset.index
element.dataset['index']
如果自定义属性里面有多个'-'连接的单词，我们用驼峰命名法
6.节点操作
6.1父级节点
node.parentNode
得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
6.2子级节点
-
所有子节点： parentNode.childNodes 所有的子节点 包含 元素节点 文本节点等等
-
子元素节点：parentNode.children
1.第一个子元素节点：parentNode.firstElementChild
2.最后一个子元素节点：parentNode.lastElementChild
3.实际开发写法：parentNode.children[ol.children.length - 1] 如：ol.children[0]
4.下一个兄弟元素节点：nextElementSibling
5.上一个兄弟元素节点：previousElementSibling
6.3创建节点
var li = document.createElement('li')
6.4添加节点
后面追加元素：node.appendChild(child) node 父级 child 是子级
前面追加元素：node.insertBefore(child, 指定元素)
<ul>
<li>123</li>
<li>456</li>
</ul>
<script>
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[1]);
</script>
6.5删除节点
node.removeChild(child)
6.6复制节点
node.cloneNode()
括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
括号为true 深拷贝 复制标签复制里面的内容
7.创建元素的三种方式
- document.write
- innerHTML
- document.createElement()
区别：
- document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘
- innerHTML 不会导致页面重绘，创建多个元素效率更高，结构稍复杂
- createElement()创建多个元素效率稍低，结构更清晰
8.事件高级
8.1事件监听addEventListener()
同一个元素同一个事件可以添加多个侦听器
eventTarget.addEventListener(type,listener[useCapture])
1.eventTarget 目标对象，不需要带on
2.listener 函数
3.useCapture 可选参数，默认false。
false或不写，冒泡阶段
true捕获阶段
8.2删除事件
eventTarget.removeEventListener(type,listener[useCapture])
8.3DOM事件流三个阶段
- 捕获阶段
- 当前事件阶段
- 冒泡阶段
8.4事件对象的兼容性处理
e = e || window.event;
8.5返回触发事件对象e.target
#### e.target 和 this 的区别
- e.target 是事件触发的元素
- this 是事件绑定的元素
8.6阻止默认行为
-
e.preventDefault()
-
return false
后面代码不执行，写在最下面
8.7阻止事件冒泡
e.stopPropagation()
8.8事件委托的原理
给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。
9.常用鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
| onmouseenter | 鼠标经过触发（不会产生冒泡） |
| onmouseleave | 鼠标离开触发（不会产生冒泡） |
| contextmenu | 禁止鼠标右键菜单 |
| selectstart | 禁止鼠标选中 |
9.1案例：禁止选中文字和禁止右键菜单
- 禁止鼠标右键菜单contextmenu
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
- 禁止选中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
9.2鼠标事件对象
| 鼠标事件对象 | 说明 |
|---|---|
| e.clientX | 鼠标相对于浏览器窗口可视区的x坐标 |
| e.clientY | 鼠标相对于浏览器窗口可视区的y坐标 |
| e.pageX | 鼠标相对于文档页面的x坐标 |
| e.pageY | 鼠标相对于文档页面的y坐标 |
| e.screenX | 鼠标相对于电脑屏幕的x坐标 |
| e.screenY | 鼠标相对于电脑屏幕的y坐标 |
10.常用键盘事件
10.1键盘事件
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按键被松开始触发 |
| onkeydown | 某个键盘按键被按下时触发 |
| inkeypress | 某个键盘按键被按下时触发，区分大小写(不识别功能键，比如ctrl,shift,箭头等) |
注：1.keydown，keypress在文本框里的特点：两个事件触发的时候，文字还没有落入文本框中
2.keyup：事件触发的时候，文本已落入文本框
3.三个事件的执行顺序是：keydown--keypress--keyup
10.2键盘事件对象
| 键盘事件对象 | 说明 |
|---|---|
| keyCode | 返回该键的ASCII值 |
11.BOM
BOM比DOM更大，包含DOM
顶级对象是window
11.1window对象的常见事件
1.窗口加载事件
- 第一种：
window.onload = function() { }或者
window.addEventListener('load', function() { }）
- 第二种：
document.addEventListener('DOMContentLoaded', function() { }）
注意：
- load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等
- DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
2.调整窗口大小事件
window.addEventListener('resize', function() { }）
注意
- 只要窗口大小发生像素变化，就会触发这个事件
- 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度
11.2定时器
1.setTimeout() 炸弹定时器
开启定时器
setTimeout(调用函数, 延时时间)
案例 5秒后自动关闭广告
<body>
<img src="images/ad.jpg" alt="" class="ad">
<script>
// 获取要操作的元素
var ad = document.querySelector('.ad');
// 开启定时器
setTimeout(function() {
ad.style.display = 'none';
}, 5000);
</script>
</body>
停止定时器
clearTimeout(timeoutID)
2.setInterval()闹钟定时器
开启定时器
setInterval(调用函数, 延时时间)
案例 倒计时
<style>
div {
margin: 200px;
}
span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
</style>
div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
// 1. 获取元素（时分秒盒子）
var hour = document.querySelector('.hour'); // 小时的黑色盒子
var minute = document.querySelector('.minute'); // 分钟的黑色盒子
var second = document.querySelector('.second'); // 秒数的黑色盒子
var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数
countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白
// 2. 开启定时器
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
var m = parseInt(times / 60 % 60); // 分
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60); // 当前的秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
停止定时器
clearInterval(intervalID)
11.3.this指向问题
- 普通函数中this指向window
- 对象中的this指向的是当前这个对象
- 事件中的this指向的是事件源
- 构造函数中的this指向的是new出来的那个实列对象
- 定时器中的this指向的是window
注：this始终指向的是它的调用者
11.4location对象
| location对象属性 | 返回值 |
|---|---|
| location.href | 获取完整URL |
| location.search | 获取URL参数 |
案例：获取URL参数
<script>
var url = 'https://www.itcast.cn/index.html?username=klxin&age=16' // location.href
var params = new URLSearchParams('?username=klxin&age=16')
console.log(params.get('username'))
console.log(params.get('age'))
</script>
location对象的常见方法
| location对象的常见方法 | 返回值 |
|---|---|
| location.assign() | 和href一样，可以跳转页面 |
| location.replace() | 替换当前页面，因为不记录历史，所以不能后退页面 |
| location.reload() | 重新加载页面，相当于刷新，如果参数为true强制刷新ctrl+f5 |
11.5navigator对象
navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。
下面前端代码可以判断用户那个终端打开页面，实现跳转
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = ""; //手机
} else {
window.location.href = ""; //电脑
}
11.6history对象
-
history.back()
-
history.forward()
-
history.go(参数) 前进后退功能
参数1，前进1个页面
参数-1，后退一个页面
参数0，刷新
11.7刷新页面
- location.reload(true)
- location.href = location.href
- history.go(0)
12.元素偏移量 offset系列
| offset系列属性 | 作用 |
|---|---|
| element.offsetParent | 返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body |
| element.offsetTop | 返回元素相对带有定位父元素上方的偏移(不带单位) |
| element.offsetLeft | 返回元素相对带有定位父元素左边的偏移(不带单位) |
| element.offsetWidth | 返回自身包括padding，边框，内容区的宽度，返回数值不带单位 |
| element.offsetHeight | 返回自身包括padding，边框，内容区的高度，返回数值不带单位 |
注：offset获取元素大小位置；style改变元素值
13.元素可视区 client 系列
| client系列属性 | 作用 |
|---|---|
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返回自身包括padding，内容区的宽度，不含边框，返回数值不带单位 |
| element.clientHeight | 返回自身包括padding，内容区的高度，不含边框，返回数值不带单位 |
14.元素滚动 scroll系列
| scroll系列属性 | 作用 |
|---|---|
| element.scrollTop | 返回被卷去的上侧距离，返回数值不带单位 |
| element.scrollLeft | 返回被卷去的左侧距离，返回数值不带单位 |
| element.scrollWidth | 返回自身实际宽度，不含边框，返回数值不带单位 |
| element.scrollHeight | 返回自身实际高度，不含边框，返回数值不带单位 |
15.触屏事件
15.1常见的触屏事件
| 触屏touch事件 | 说明 |
|---|---|
| touchstart | 手指触摸到一个DOM元素时触发 |
| touchmove | 手指在一个DOM元素上滑动时触发 |
| touchend | 手指从一个DOM元素上移动时触发 |
15.2触摸事件对象
| 触摸列表 | 说明 |
|---|---|
| touches | 正在触摸屏幕的所有手指的一个列表 |
| targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
| changedTouches | 手指状态发生了改变的列表，从无到有，从有到无变化 |
16.classList属性
1.添加类
element.classList.add（’类名’）
是在后面追加类名不会覆盖以前的类名 注意前面不需要加.
div.classList.add('three');
2.移除类
element.classList.remove（’类名’）;
div.classList.remove('one');
3.切换类
element.classList.toggle（’类名’）;
document.body.classList.toggle('bg');
17.click 延时解决方案
有300ms的延时（区分是否是双击）
解决方案：
1.禁用缩放
<meta name="viewport" content="user-scalable=no">
2.touchstart代替click
3.使用插件。fastclick插件解决300ms延时
<script src="fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
</script>
18.本地存储
18.1window.sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
- 以键值对的形式存储使用
- 容量约为5M
存储数据：
sessionStorage.setItem(key, value)
获取数据：
sessionStorage.getItem(key)
删除数据：
sessionStorage.removeItem(key)
清空数据：
sessionStorage.clear()
18.2window.localStorage
- 声明周期永久生效，除非手动删除 否则关闭页面也会存在
- 可以多窗口（页面）共享（同一浏览器可以共享）
- 以键值对的形式存储使用
- 容量大约为20M
注意点1： 本地存储 localStorage 里面只能存储字符串格式 ，因此需要把对象转换为字符串 JSON.stringify(data)。
注意点2： 获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse() 我们才能使用里面的数据。
存储数据：
localStorage.setItem(key, value)
获取数据：
localStorage.getItem(key)
删除数据：
localStorage.removeItem(key)
清空数据：
localStorage.clear()
案例记住用户名
<input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
<script>
var username = document.querySelector('#username');
var remember = document.querySelector('#remember');
if (localStorage.getItem('username')) {
username.value = localStorage.getItem('username');
remember.checked = true;
}
remember.addEventListener('change', function() {
if (this.checked) {
localStorage.setItem('username', username.value)
} else {
localStorage.removeItem('username');
}
})
</script>
