任何开发语言都有自己的API,那么API是什么呢？
那么什么是WebAPI呢？
概念 API 应用程序编程接口，是一些预先定义的函数 WebAPI 浏览器提供的一套操作浏览器功能和页面元素的API。
接下来 我着重讲下JavaScript中的DOM和BOM
一套JavaScript动态操作网页内容的API(函数) 当页面被加载时，浏览器会创建页面的文档对象模型 生成一颗DOM树(HTML DOM模型被构造成对象的树) 文档：一个网页可以称为文档 节点：网页中的所有内容都是节点(标签、属性、文本、注释等) 元素：网页中的标签 属性：标签的属性
1.查元素 ①根据id名获取元素 如果没有这个id名 那么会得到一个null。
< div id = 'main' > < / div>
< script>
var div = document. getElementById ( 'main' ) ;
console. log ( div) ;
< / script>
②根据标签名获取元素 如果没有这个标签名 那么会得到一个空数组
< input type = 'text' / >
< script>
var inputs = document. getElementByTagName ( 'input' ) ;
for ( var i = 0 ; i < inputs. length; i++ ) {
var input = inputs[ i] ;
console. log ( input) ;
}
< / script>
③根据类名获取元素-----存在兼容性问题(IE8及以下不支持)，尽量少用
< div class = 'main' > < / div>
< script>
var mains = document. getElementByClassName ( 'main' ) ;
for ( var i = 0 ; i < mains. length; i++ ) {
var main = main[ i] ;
console. log ( main) ;
}
< / script>
④根据name属性值获取表单元素
< input type = 'text' name = 'txt' / >
< script>
var inputs = document. getElementByName ( 'txt' ) ;
for ( var i = 0 ; i < inputs. length ; i++ ) {
var input = inputs[ i] ;
console. log ( input) ;
}
< / script>
⑤根据选择器获取元素
< div class = 'box' > < / div>
< div class = 'box' > < / div>
< script>
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) ;
}
< / script>
查元素 语法 根据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 += '新内容<p>新标签</p>' ;
③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生成。 事件源：触发(被)事件的元素 事件类型：事件的触发方式(例如鼠标点击或键盘点击) 事件处理程序：事件触发后要执行的代码(函数形式) <div id ='box'></div>
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' ;
存储与事件相关的数据的对象 当用户触发事件的时候，浏览器会自动捕捉与事件相关的信息，将鼠标坐标点、键盘按键等存入一个对象中，这个对象就叫做事件对象。
var box = document. getElementById ( 'box' ) ;
box. onclick = function ( e) {
e = e || windwow. event;
console. log ( e) ;
}
var box = document. getElementById ( 'box' ) ;
box. onclick = function ( e) {
e = e || window. event;
console. log ( e. screenX, e. screenY) ;
console. log ( e. clientX, e. clientY) ;
console. log ( e. pageX, e. pageY) ;
}
function getPagePoint ( e) {
e = e || window. event;
if ( e. pageX) {
return {
pageX : e. pageX;
pageY : e. pageY;
}
} else {
return {
pageX : clientX + document. documentElement. scrollLeft;
pageY : clientY + document. documentElement. scrollTop;
}
}
}
点语法注册事件 addEventListener注册事件 removeEventListener移除事件 < input type = 'button' value = '点我' id = 'btn' ' / >
var btn = document. getElementById ( 'btn' ) ; '
btn. addEventListener ( 'click' , function ( ) {
cosole. log ( '注册事件' ) ; '
} , false ) ;
btn. removeEventListener ( 'click' , function ( ) {
console. log ( '移除事件' ) ;
} , false ) ;
attachEvent注册事件 detachEvent移除事件 < input type = 'button' value = '点我' id = 'btn' ' / >
var btn = document. getElementById ( 'btn' ) ; '
btn. attachEvent ( 'onclick' , function ( ) {
console. log ( 'IE8之前的注册事件' ) ; '
} ) ;
btn. detachEvent ( 'onclick' , function ( ) {
console. log ( 'IE8之前的移除事件' ) ;
} ) ;
注册/移除事件的方法 语法 点语法注册事件 事件源.事件类型 = 事件处理函数 addEventListener注册事件 元素.addEventListener(type,tlistener,布尔类型) 移除事件 元素.removeEventListener(type,tlistener,布尔类型) attachEvent注册事件 元素.attachEvent(type,tlistener) 移除事件 元素.detachEvent(type,tlistener)
如果一个元素的事件被触发，那么它的所有父级元素的同名事件也会被依次触发 元素→父元素→body→html→document→window 事件冒泡一直存在 当给所有的父级元素都添加同名事件就会触发 < input type = 'button' value = '按钮' id = 'btn' / >
document. getElementById ( 'btn' ) . onclick = function ( ) {
alert ( '按钮被点击了' ) ; '
} ;
document, body. onclick = function ( ) {
alert ( 'body被点击了' ) ;
} ;
document. documentElement. onclick = function ( ) {
alert ( 'html被点击了' ) ;
}
document, onclick = function ( ) {
alert ( 'document被点击了' ) ; '
} ;
window. onclick = function ( ) {
alert ( 'window被点击了' ) ; '
} ;
事件冒泡的好处
ul. onclick = function ( e) {
e = e || window. event;
var target = e. target || e. srcElement;
console. log ( target) ;
}
冒泡的影响 阻止冒泡 e. stopPropagation ( ) ;
e. cancelBubble = true ;
事件捕获 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();
常用的鼠标与键盘事件 语法 点击 onclick 双击 ondbclick 鼠标移入 onmouseover 鼠标移出 onmouseout 鼠标按下 onmousedown 鼠标弹起 onmouseup 鼠标移动 onmousemove 键盘弹起 onkeyup 键盘按下(不会过滤功能键，不区分大小写) onkeydown 键盘按下(会过滤功能键，区分大小写) onkeypress 获得焦点 onfocus 失去焦点 onblur
拖拽盒子 含义 ondragstart 拖拽开始 ondrag 拖拽中 (鼠标移动就触发) ondragend 拖拽结束(鼠标松开就触发)
拖拽盒子至容器 含义 ondragenter 拖拽进入容器 ondragleave 拖拽离开容器 ondragover 配合ondrop使用(鼠标移动就会触发 要阻止默认行为) ondrop 拖拽结束 在容器范围内松手就触发
< a href = 'javascript:void(0)' > < / a>
URL . createObjectURL ( 图片) ;
三大家族 作用 offset家族 获取元素自身的真实宽高与位置 scroll家族 获取元素内容真实宽高与位置 client家族 获取元素可视区域大小
offset家族 offset家族 作用 offsetWidth 获取元素自身的真实宽度 offsetHeight 获取元素自身的真实高度 offsetParent 获取一个元素的定位父级 offsetLeft 获取元素的左外边框到定位父级左内边框的距离 offsetTop 获取元素的上外边框到定位父级上内边框的距离
scroll家族 scroll家族 作用 scrollWidth 获取元素内容真实的宽度 scrollHeight 获取元素内容真实的高度 scrollLeft 获取元素内容左滚动出去的距离 scrollTop 获取元素内容上滚动出去的距离 onscroll 元素的滚动事件，只要滚动就会触发
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. 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;
}
}
定义了一套操作浏览器功能的API 浏览器对象模型提供了对立于内容的、可以与浏览器窗口进行互动的对象结构 BOM对象主要由五大对象组成 作用 window对象 当前浏览器窗口 location对象 包含当前页面的URL信息 history对象 主要用于记录当前窗口的历史记录 navigator对象 当前浏览器的信息 screen对象 获取用户电脑屏幕的分辨率
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 界面在关闭的那一瞬间会触发这个事件
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.forward(); 后退 history.back();
navigator对象信息查看 语法 当前浏览器版本信息 navigator.appVersion 当前浏览器的系统平台类型 navigator.platform 当前浏览器类型 navigator.userAgent
获取用户电脑屏幕的分辨率 语法 屏幕宽度 screen.width 屏幕高度 screen.height
本地存储 将数据存储到浏览器 数据的处理 语法 存数据 localStorage.setItem(‘属性名’,‘属性值’) ; 取数据 localStorage.getItem(‘属性名’) ; 删数据 localStorage.removeItem(‘属性名’); 清空数据 localStorage.clear();
★注意
相当于短命版的localStorage，其他用法完全一致 数据的处理 语法 存数据 sessionStorage.setItem(‘属性名’,‘属性值’) ; 取数据 sessionStorage.getItem(‘属性名’) ; 删数据 sessionStorage.removeItem(‘属性名’); 清空数据 sessionStorage.clear();
相同点：作用一致，都是本地存储数据，存储的数据只能是字符串类型，如果是其他数据类型则会自动调用toString()方法转为字符串 不同点:HP值不同 localStorage是永久存储，存储在硬盘中(HP值无限) sessionStorage是一次性存储，存储在内存中(HP值一条命) 获取经纬度：其实就是获取当前设备的地理位置 navigator. geolocation. getCurrentPosition ( function ( location) {
console. log ( location) ;
console. log ( location. coords. longitude) ;
console. log ( location. coords. latitude) ;
} )
含义：某一件事(某一段代码)并不是马上执行，而是隔一段时间执行 第一个参数：要执行的一段代码(函数) var timeId = null ;
timeId = setInterval ( function ( ) {
console. log ( '这段代码每隔1s执行一次' ) ;
} , 1000 )
clearInterval ( timeId) ;
第一个参数：要执行的一段代码(函数) setTimeout ( function ( ) {
console. log ( '这段代码1s后执行一次，执行完毕之后定时器自动关闭' ) ;
} , 1000 )
永久性定时器与一次性定时器 语法 创建永久定时器 setInterval(function( ){ },时间间隔); 清除定时器 clearInterval(定时器id); 创建一次性定时器 setTimeout(function( ){ },时间间隔);
★★总结★★ 定时器setTimeout与setInterval唯一的区别就是 setTimeout定时器只会执行一次 如果你想让这段代码一段时间后只执行一次，则使用setTimeout 如果你想让这段代码每隔一段时间执行一次(执行多次)，使用setInterval
本文由本人一字一句敲出来哒 希望对初学者有帮助~~~~
5006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
