WebAPI详解
任何开发语言都有自己的API,那么API是什么呢？
那么什么是WebAPI呢？
概念
API
应用程序编程接口，是一些预先定义的函数
WebAPI
浏览器提供的一套操作浏览器功能和页面元素的API。
文章图片
接下来 我着重讲下JavaScript中的DOM和BOM
DOM---------文档对象模型
一套JavaScript动态操作网页内容的API(函数)
当页面被加载时，浏览器会创建页面的文档对象模型 生成一颗DOM树(HTML DOM模型被构造成对象的树)
文档：一个网页可以称为文档
节点：网页中的所有内容都是节点(标签、属性、文本、注释等)
元素：网页中的标签
属性：标签的属性
文章图片
DOM主要由两部分构成(动态操作+网页内容)
动态操作-----增删改查
㈠ 查-----查元素、查属性、查内容
1.查元素
①根据id名获取元素 如果没有这个id名 那么会得到一个null。
参数：元素id名字符串
返回值：元素对象(又称为DOM对象) / null
>
var div = document.getElementById('main');
console.log(div);
//获取到的数据类型是HTMLDIVElement，对象都有类型的
//id名具有唯一性，部分浏览器支持直接使用id名访问元素，但是不是标准方式，不推荐使用
②根据标签名获取元素 如果没有这个标签名 那么会得到一个空数组
参数：标签名字符串
返回值：标签数组(伪数组)
③根据类名获取元素-----存在兼容性问题(IE8及以下不支持)，尽量少用
参数：类名字符串
返回值：类名数组(伪数组)
>
var mains = document.getElementByClassName('main');
//获取到的是类名数组 要想获取每一个元素 需要遍历数组
for(var i = 0;
i < mains.length;
i++){
var main = main[i];
console.log(main);
}
④根据name属性值获取表单元素
name属性是表单元素特有的默认属性
参数：name属性值字符串
返回值：伪数组
⑤根据选择器获取元素
querySelector(‘选择器’);
只会找到满足条件的第一个对象 如果找不到则返回null
querySelectorAll(‘选择器’);
会找到所有满足条件的对象伪数组,如果找不到则返回空数组
>
//获取到的是满足第一个条件的对象
var box = document.querySeletor(.box);
console.log(box);
//获取的的是满足条件的所有对象的数组
var boxes = document.querySeletorAll(.box);
for(va i = 0 ;
i < boxes.length;
i++){
var box = boxes[i];
console.log(box);
}
查元素
语法
根据id名获取元素
document.getElementById(‘id名’);
根据标签名获取元素
document.getElementsByTagName(‘标签名’);
根据类名获取元素
document.getElementsByClassName ( “类名” ) ;
根据name属性值获取表单元素
document.getElementsByName(‘表单元素name属性的值’);
根据选择器获取第一个元素
querySelector(‘选择器’) ;
根据选择器获取所有元素
querySelectorAll(‘选择器’);
2.查属性
①点语法--------主要用于设置标准属性元素.属性名元素.属性名 = 属性值;
②字符串语法元素['属性名']
③attribute方法元素.setAttribute('属性名',属性值);
元素.getAttribute('属性名');
元素.removeAttribute('属性名');
④getComputedStyle(元素,null)
查属性
语法
点语法
元素.属性名
字符串语法
元素 [‘属性名’]
attribute方法
元素.getAttribute(‘属性名’);
getComputedStyle
getComputedStyle(元素,null)
3.查内容
console.log(innerText );
console.log( innerHTML);
innerHTML
innerText
获取的是元素中的内容(包含文字和标签)
只能获取文字，无法识别标签
设置时会解析标签
设置时会把标签当做文本
没有浏览器兼容问题
非W3C标准语法 部分浏览器不支持
㈡ 增-----创建元素、将元素增加到页面
1.创建元素
①document.write();
②innerHTML
var box = document.getElementById('box');
box.innerHTML += '新内容新标签
③document.createElement();
var div = document.createElement('div');
document.body.appendChild(div);
创建元素的三种方法
作用及注意点
document.write();
解析字符串识别标签，慎重使用，有可能会覆盖原本内容
innerHTML
同document.write();
创建元素过多会耗损性能 ，因为字符串具有恒定性，每一次添加都会开辟新的空间
document.createElement();
动态创建一个空对象在内存中，不会自动加到HTML中，需要手动添加属性，和需要使用appendChild手动添加到HTML中
2.增加到页面
①父元素.appendChild(子元素);
②父元素.insertBefore(子元素,指定位置的前面);
㈢ 改-------------替换子元素
父元素.replaceChild(子元素,要被替换的元素)
㈣ 删-------------移除子元素
父元素.removeChild(子元素)
网页内容
㈠ 节点
在HTML文档中，一切皆节点
节点三要素
查元素节点
查看元素节点
语法
查看元素节点类型
console.log ( 元素.nodeType );
查看元素节点名称
console.log ( 元素.nodeName );
查看元素节点值
console.log ( 元素.nodeValue );
查看属性节点
语法
查看属性节点类型
console.log ( 元素.attributes[0].nodeType );
查看属性节点名称
console.log ( 元素.attributes[0].nodeName );
查看属性节点值
console.log ( 元素.attributes[0].nodeValue );
获取子节点和子元素
语法
获取子节点
元素.childNodes
获取子元素
元素.children
获取兄弟节点和兄弟元素
语法
获取上一个节点
元素.previousSibling
获取下一个节点
元素.nextSibling
获取上一个元素
元素…nextElementSibling
获取上一个节点
元素.previousElementSibling
获取第一个子节点和第一个子元素
语法
获取第一个子节点
元素…firstChild
获取第一个子元素
元素.firstElementChild
获取最后一个节点和最后一个元素
语法
获取最后一个节点
元素.lastChild
获取最后一个元素
元素.lastElementChild
获取父节点
语法
获取父节点
元素.parentNode
★注意
★一个元素的父节点一定是一个元素，只有元素才有子节点
克隆节点
克隆节点
语法
克隆这个元素的一切内容(行内属性、子节点、内容)
元素.cloneNode(true);
克隆复制这个元素的本身(包含它的行内属性)，不包含它的内容
元素.cloneNode(false);
增加节点和移出节点
增加节点和移除节点
语法
增加节点
父节点.appendChild(子节点) ;
移除节点
父节点.removeChild(子节点);
事件
事件：触发响应机制
Event接口表示在DOM中发生的任何事件，一些是用户生成的(例如鼠标或键盘事件)，而其他由API生成。
事件三要素
事件源：触发(被)事件的元素
事件类型：事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序：事件触发后要执行的代码(函数形式)
事件的基本使用
var box = document.getElementById('box');
box.onclick = function(){
console.log('代码会在box被点击后执行');
}
属性操作
非表单元素的属性：href、title、id、src、className
innerHTML、innerText
HTML转义符
符号
转义符
‘’ (双引号)
" ;
’ (单引号)
&apos ;
<
< ;
>
> ;
空格
;
@
© ;
表单元素属性
value
用于大部分表单元素的内容获取(option除外)
type
可以获取input标签的类型(输入框或复选框等)
disabled
禁用属性
checked
复选框选中属性
selected
下拉菜单选中属性
自定义属性操作
作用
元素.setAttribute(‘属性名’,属性值);
设置标签行内属性
元素.getAttribute(‘属性名’);
获取标签行内属性
元素.removeAttribute(‘属性名’);
移出标签行内属性
样式操作
使用style方式设置的样式显示在标签内
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
类名操作
修改类名不能直接使用class属性 因为class是关键字 要使用className属性修改
修改标签的className属性相当于直接修改标签的类名
var box= document.getElementById('box');
box.className = 'clearfix';
事件对象
存储与事件相关的数据的对象
当用户触发事件的时候，浏览器会自动捕捉与事件相关的信息，将鼠标坐标点、键盘按键等存入一个对象中，这个对象就叫做事件对象。
//如何获取事件对象：给事件处理函数添加形参，一般设置为e/event。
var box = document.getElementById('box');
box.onclick = function(e){
//事件对象e有兼容性问题
e = e || windwow.event;
console.log(e);
}
var box = document.getElementById('box');
box.onclick = function(e){
e = e || window.event;
//电脑屏幕左上角距离触发事件的那一点的x值和y值
console.log(e.screenX,e.screenY);
//浏览器可视区距离触发事件那一点的x值和y值
console.log(e.clientX,e.clientY);
//页面左上角距离触发事件那一点的x值和y值
//哪怕页面滚动了还是以页面左上角开始距离触发事件那一点
console.log(e.pageX,e.pageY);
}
//pageX和pageY的兼容
//pageX/pageY坐标系相对于页面左上角，实际上就是界面滚动出去的距离+可视区域的距离
function getPagePoint(e){
e = e || window.event;
if(e.pageX){
//谷歌火狐浏览器
return {
pageX : e.pageX;
pageY : e.pageY;
}
}else {
//IE8
return {
pageX :clientX + document.documentElement.scrollLeft;
pageY : clientY + document.documentElement.scrollTop;
}
}}
注册/移除事件
点语法注册事件
addEventListener注册事件
removeEventListener移除事件
attachEvent注册事件
detachEvent移除事件
注册/移除事件的方法
语法
点语法注册事件
事件源.事件类型 = 事件处理函数
addEventListener注册事件
元素.addEventListener(type,tlistener,布尔类型)
移除事件
元素.removeEventListener(type,tlistener,布尔类型)
attachEvent注册事件
元素.attachEvent(type,tlistener)
移除事件
元素.detachEvent(type,tlistener)
事件冒泡
如果一个元素的事件被触发，那么它的所有父级元素的同名事件也会被依次触发
元素→父元素→body→html→document→window
事件冒泡一直存在 当给所有的父级元素都添加同名事件就会触发
事件冒泡的好处
//如果想给ul中的所有li添加点击事件，那么可以给父元素添加点击事件即可,然后通过e.target 就可以得知是哪个子元素触发了这个事件
ul.onclick = function(e){
e = e || window.event;
var target = e.target || e.srcElement;
//target：事件源 触发本次事件的源头
console.log(target);
}
冒泡的影响
阻止冒泡
e.stopPropagation();
//IE8不支持
e.cancelBubble = true ;
//IE8阻止冒泡的方法
事件捕获
addEventListener('click',function(){},true);
事件的三个阶段
事件捕获阶段
目标阶段
冒泡阶段
阻止事件的默认行为
e.preventDefault();
事件对象的属性和方法
语法
获取事件类型
e.type
事件对象获取当前事件的所属阶段
e.eventPhase
获取用户按键
e.charCode /e.which /e.keyCode
获取窗口位置
clientX / clientY
获取页面位置
pageX/pageY
获取触发事件的元素
e.target /e.srcElement
取消默认行为
e.preventDefault();
阻止事件传播的方式
标准方式 event.stopPropagation();
【WebAPI详解】 IE低版本 event.cancelBubble = true ;
常用的鼠标与键盘事件
常用的鼠标与键盘事件
语法
点击
onclick
双击
ondbclick
鼠标移入
onmouseover
鼠标移出
onmouseout
鼠标按下
onmousedown
鼠标弹起
onmouseup
鼠标移动
onmousemove
键盘弹起
onkeyup
键盘按下(不会过滤功能键，不区分大小写)
onkeydown
键盘按下(会过滤功能键，区分大小写)
onkeypress
获得焦点
onfocus
失去焦点
onblur
拖拽盒子
含义
ondragstart
拖拽开始
ondrag
拖拽中 (鼠标移动就触发)
ondragend
拖拽结束(鼠标松开就触发)
拖拽盒子至容器
含义
ondragenter
拖拽进入容器
ondragleave
拖拽离开容器
ondragover
配合ondrop使用(鼠标移动就会触发 要阻止默认行为)
ondrop
拖拽结束 在容器范围内松手就触发
//方法一：设置href属性为伪链接，执行js代码
URL.createObjectURL(图片);
三大家族
作用
offset家族
获取元素自身的真实宽高与位置
scroll家族
获取元素内容真实宽高与位置
client家族
获取元素可视区域大小
offset家族
offset家族
作用
offsetWidth
获取元素自身的真实宽度
offsetHeight
获取元素自身的真实高度
offsetParent
获取一个元素的定位父级
offsetLeft
获取元素的左外边框到定位父级左内边框的距离
offsetTop
获取元素的上外边框到定位父级上内边框的距离
文章图片
scroll家族
scroll家族
作用
scrollWidth
获取元素内容真实的宽度
scrollHeight
获取元素内容真实的高度
scrollLeft
获取元素内容左滚动出去的距离
scrollTop
获取元素内容上滚动出去的距离
onscroll
元素的滚动事件，只要滚动就会触发
文章图片
//获取网页滚动出去的距离
//给window注册滚动条事件没有兼容性问题
window.onscroll = function(){
console.log(document.documentElement.scrollTop);
console.log(document.documentElement.scrollLeft);
}
★如果不考虑浏览器的兼容问题 可以直接使用上面的代码获取网页滚动出去的距离
//封装浏览器兼容函数---获取网页滚动出去的距离
function getPageScroll(){
var x = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
var y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
return {
scrollLeft = x ;
scrollTop = y;
}
}
client家族
作用
clientWidth
获取可视区域的宽
clientHeight
获取可视区域的高
clientTop
上边框
clientLeft
左边框
文章图片
//获取网页可视区域的大小
//给window注册网页大小变化没有兼容性问题 监听浏览器窗口的变化
window.onsize = function(){
console.log(document,documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
★如果不考虑浏览器的兼容问题 可以直接使用上面的代码获取网页可视区域的大小
一般用于响应式布局
//封装浏览器兼容函数---获取网页可视区域大小
function getClientSize(){
var x = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;
var y = window.innerHeight || document.documentElement.clientHeight || document.body.clientHieght ||0;
return {
clientWidth = x;
cilentHeight = y;
}
}
BOM-----------浏览器对象模型
定义了一套操作浏览器功能的API
浏览器对象模型提供了对立于内容的、可以与浏览器窗口进行互动的对象结构
BOM对象主要由五大对象组成
作用
window对象
当前浏览器窗口
location对象
包含当前页面的URL信息
history对象
主要用于记录当前窗口的历史记录
navigator对象
当前浏览器的信息
screen对象
获取用户电脑屏幕的分辨率
window对象
三大特点
1.是浏览器的顶级对象(所有的全局变量、全局函数、dom对象都是window对象的属性)
2.只要是window对象的属性和方法，在使用的时候都可以省略前面的window
3.window对象有一个特殊的默认属性name(name的值一定是字符串类型)
对话框
对话框
作用
alert();
弹出框
prompt();
输入框
confirm();
确认框
两个常用方法
window.open(URL,target,feature,布尔类型);
-----------打开一个窗口
第一个参数是： 要打开的网址URL
window.close();
-----------关闭一个窗口
参数就是你想要关闭的窗口对象，如果不写，默认就是关闭自己
三个事件-----记录了浏览器窗口从打开到关闭的三个过程
window对象的三个事件
含义
window.onload
界面上所有的内容加载完毕之后才触发这个事件
window.onbeforeunload
界面在关闭之前会触发这个事件
window.onunload
界面在关闭的那一瞬间会触发这个事件
location对象
三个方法
url：全球统一的资源定位符
url = 协议名(http) + ip地址(域名) + 端口号 + 资源路径
location对象三个方法
语法
打开新网页 (可以回退)
location.assign(‘新网页的url’) ;
替换当前网页(不能回退)
location.replace(‘要替换的网页url’);
刷新当前网页
location.reload()
location对象信息查看
语法
资源定位符
location.hash
主机
location.host
主机名
location.hostname
端口号
location.port
完整的url路径
location.href
资源路径
location.pathname
url协议
location.protocol
url请求的参数
location.search
history对象
两个方法
history对象主要用于记录当前窗口的历史记录
history对象主要作用是前进和后退网页
history对象两个方法
语法
前进
history.forward();
后退
history.back();
navigator对象信息查看
语法
当前浏览器版本信息
navigator.appVersion
当前浏览器的系统平台类型
navigator.platform
当前浏览器类型
navigator.userAgent
获取用户电脑屏幕的分辨率
语法
屏幕宽度
screen.width
屏幕高度
screen.height
localStorage与sessionStorage
localStorage
本地存储 将数据存储到浏览器
数据的处理
语法
存数据
localStorage.setItem(‘属性名’,‘属性值’) ;
取数据
localStorage.getItem(‘属性名’) ;
删数据
localStorage.removeItem(‘属性名’);
清空数据
localStorage.clear();
★注意
★存储的数据只能是字符串类型，如果是其他数据类型则会自动调用toString()方法转为字符串
★永久存储，除非自己删除，否则一直存在于浏览器
★删数据是一个一个删除数据
★清空数据是一次性删除所有数据
sessionStorage
相当于短命版的localStorage，其他用法完全一致
数据的处理
语法
存数据
sessionStorage.setItem(‘属性名’,‘属性值’) ;
取数据
sessionStorage.getItem(‘属性名’) ;
删数据
sessionStorage.removeItem(‘属性名’);
清空数据
sessionStorage.clear();
localStorage与sessionStorage的区别
相同点：作用一致，都是本地存储数据，存储的数据只能是字符串类型，如果是其他数据类型则会自动调用toString()方法转为字符串
不同点:HP值不同
localStorage是永久存储，存储在硬盘中(HP值无限)
sessionStorage是一次性存储，存储在内存中(HP值一条命)
经纬度(了解即可)
获取经纬度：其实就是获取当前设备的地理位置
navigator.geolocation.getCurrentPosition(function(location){
console.log(location);
//获取经纬度
console.log(location.coords.longitude);
//获取经度
console.log(location.coords.latitude);
//获取纬度
})
定时器
含义：某一件事(某一段代码)并不是马上执行，而是隔一段时间执行
setInterval(handler,timeout);
第一个参数：要执行的一段代码(函数)
var timeId = null;
//创建定时器
timeId = setInterval(function( ){
console.log('这段代码每隔1s执行一次');
},1000)
clearInterval(timeId);
//清除定时器
setTimeout(handler,timeout);
第一个参数：要执行的一段代码(函数)
setTimeout(function(){
console.log('这段代码1s后执行一次，执行完毕之后定时器自动关闭');
},1000)
永久性定时器与一次性定时器
语法
创建永久定时器
setInterval(function( ){ },时间间隔);
清除定时器
clearInterval(定时器id);
创建一次性定时器
setTimeout(function( ){ },时间间隔);
★★总结★★
定时器setTimeout与setInterval唯一的区别就是 setTimeout定时器只会执行一次
如果你想让这段代码一段时间后只执行一次，则使用setTimeout
如果你想让这段代码每隔一段时间执行一次(执行多次)，使用setInterval
本文由本人一字一句敲出来哒 希望对初学者有帮助~~~~
推荐阅读
