admin管理员组文章数量:1587995
@[TOC](JS Web APIs (DOM BOM)学习笔记)
1、Web APIs和JS基础关联性
2、DOM
文档对象模型(Document Object Model),处理HTML或者XML的标准编程接口
1) DOM树
- 文档:一个页面就是一个文档,DOM中使用document表示
- 元素:页面中所有的标签都是元素,DOM中使用elment表示
- 节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示
DOM把以上内容都看作是对象
2) 获取元素
//1、根据ID获取getElementById()
<div id='time'>2019-9-9</div>
var element = document.getElementById('time'); //返回的是单个元素
console.log(element)
//console.dir()打印返回的元素对象,dir是目录的意思
//2、根据标签名获取getElementsByTageName()
//返回的是元素对象的集合,以伪数组的形式存储的
var lis = document.getElementsByTageName('li');
console.log(lis[0])
//3、指定父元素再获取子元素element.getElementsByTageName('标签名');
<ol>
<li>li1</lis>
</ol>
var ol = document.getElementsByTagName('ol');
console.log(ol[0].getElementsByTageName('li')); //记得是伪数组里的第0个
H5新增获取元素
//1、getElementsByClassName() 根据类名获取
//2、querySelector()返回指定选择器的第一个元素对象
var firstBox = document.querySelector('.box'); //.是类选择器
var firstBox = document.querySelector('#box'); //#是id选择器
var firstBox = document.querySelector('li'); //标签不用加前缀
//3、querySelectorALL() 返回指定选择器的所有元素
//性质同querySelector
3) 获取特殊元素
//1.获取body元素
var bodyEle = document.body;
//2.获取html元素
var htmlEle = document.documentElement;
4) 事件基础
简单理解:触发–响应机制
事件由三部分组成:
- 事件源:事件被出发的对象
- 事件类型:如何触发 什么事件 如鼠标点击(onclick)、鼠标经过
- 事件处理程序:通过一个函数赋值的方式完成
<button id="btn">button</button>
var btn = document.getElementById('btn'); //事件源
//事件类型和事件处理程序
btn.onclick = function(){
alert('hello');
}
鼠标事件 | 触发条件 |
---|---|
onclick | 鼠标点击触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
onfocus | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
5) 操作元素
改变元素内容
element.innerText()
div.innerText('<strong>今天是</strong> 2019');/不识别html标签,非W3C标准
从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉
element.innerHTML()
div.innerHTML('<strong>今天是</strong> 2019');/识别html标签,W3C标准
起始位置到终止位置全部内容,包括html标签,同时保留空格和换行
改变元素属性
zxy.onclick = function(){
img.src = 'images/zxy.jpg';
}
表单属性设置
利用DOM可以操作如下表单元素属性:
type、value、checked、selected、disabled
样式属性设置
可以通过JS修改元素的大小、颜色、位置等样式
//1.element.style 行内样式操作
div.onclick = function(){
this.style.backgroundColor = 'purple';
}
//2.element.className类名样式操作
div.onclick = function(){
this.className = 'change';
}
排他思想
如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循坏的排他思想
- 所有元素全部清除样式(干掉其他人)
- 给当前元素设置样式(留下我自己)
获取元素属性
1.element.属性
2.element.getAttribute('属性') //可以获取自定义属性
设置元素属性
1.element.属性 = ‘值’
2.element.settAttribute('属性',‘值’) //可以设置自定义属性
H5自定义属性
- H5规定自定义属性data-开头作为属性名并且赋值
获取H5自定义属性
- 兼容性获取 element.getAttribute(‘data-index’);
- H5新增element.dataset.index 或者 element.dataset[‘index’]
- 如果自定义属性有多个-链接的单词,我们获取的时候采取驼峰命名法
<div data-list-name='1'></div>
div.dataset.listName
dive.dataset['listName']
6) 节点操作
节点概述
一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。
- 元素节点 nodeType为1
- 属性节点 nodeType为2
- 文本节点 nodeType为3(文本节点包含文字、空格、换行等)
实际开发中,节点操作主要操作的是元素节点
节点层级
最常见的是父子兄层级。
- 父节点 parentNode
<div class="box">
<span class="code">x</span>
<script>
var code = document.querySelector('.code');
//得到的是最近的父级节点,找不到则返回null
var box = code.parentNode;
</script>
- 子节点 childNodes、children
1)childNodes
获取所有的子节点,包含元素节点、文本节点(换行、空格)等
如果只想获得里面的元素节点,则需要专门处理,所以不提倡使用
var ul = document.querySelector('ul');
for(var i = 0; i < ul.childNodes.length; i++){
if(ul.childNodes[i].nodeType == 1){
console.log(ul.childNodes[i]);
}
}
2)children
parentNode.children是一个只读属性,返回所有的子元素节点,只返回元素节点,其余节点不返回
属性名 | 说明 |
---|---|
firstChild | 获取第一个子节点,不管是文本节点还是元素节点 |
firstElementChild | 获取第一个子元素节点 |
lastChild | 获取最后一个子节点,不管是文本节点还是元素节点 |
lastElementChild | 获取最后一个子元素节点 |
- 兄弟节点 nextSibling
属性名 | 说明 |
---|---|
nextSibling | 下一个兄弟节点,不管是文本节点还是元素节点 |
nextElementSibling | 下一个喜兄弟元素节点 |
previousSibling | 上一个兄弟节点,不管是文本节点还是元素节点 |
previousSibling | 上一个兄弟元素节点 |
创建节点
//1.创建元素节点
var li = document.creatElement('li')
//2.添加元素节点
node.appendChild(child)//追加元素,相当于push
node.insertBefore(child,指定元素)
删除节点
node.removeChild(child)
删除指定子节点,返回值为删除的子节点
复制节点
node.cloneNode()
- 如果括号参数为空或为false,则为浅拷贝,只复制标签不复制内容
- 括号为true则深拷贝,复制内容
三种创建元素方式区别
- document.write() 创建元素,再调用会导致页面重绘(创建一个新页面,只有write里的内容)
- document.innerHTML 创建多个元素时效率更高(使用数组,不要拼接字符串),结构稍微复杂
- document.creatElement() 创建多个元素效率稍微低一点,但是结构更清晰
3、事件高级
1) 注册事件
传统注册事件
- 利用on开头的事件,如onclick
- 特点:注册事件的唯一性(同一个元素同一个事件只能设置一个处理函数)
方法监听注册方式
- w3c标准
- addEventListener()是一个方法
- IE9之前使用attachEvent()代替
- 特点:同一个元素同一个事件可以注册多个事件
eventTarget.addEvenrtListener(type, listener[,useCaptrue])
改方法接受三个参数:
- type:事件类型字符串,比如click、mouseover,注意这里不要带on
- listner:事件处理函数,事件发生时,会调用该监听函数
- userCapture:可选参数,是一个布尔值,默认是false
attachEvent事件监听方式(非标准,不提倡)
eventTraget.attachEvent(eventNameWithOn, callback)
该方法接受两个参数:
- eventNameWithOn:事件类型字符串,比如onclick、onmouseover,这里要带on
- callback:事件处理函数,当目标触发事件时回调函数被调用
2) 删除事件
传统方式解绑
eventTarget.onclick = null;
方法监听解绑方式
eventTarget.removeEventListener('click',fn); //与添加时写法一致
3) DOM事件流
事件流描述的是从页面中接收事件的顺序,事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。
DOM事件流分为3个阶段:
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
比如我们给一个div注册了点击事件:
- dom事件流 三个阶段
- JS代码中只能执行捕获或者冒泡其中的一个阶段
- onclick和attachEvent只能得到冒泡阶段
- 如果addEventListener第三个参数是true,那么则处于捕获阶段 document -> html -> body -> father -> son
- 如果addEventListener第三个参数是false或省略,那么则处于冒泡阶段 son -> father -> body -> html -> document
4) 事件对象
div.onclick = function(event){}
- event就是一个事件对象,写到侦听函数的小括号里,当作形参来看
- 事件对象只有有了对象才会存在,它是系统自动创建的,不需要传参
- 事件对象是事件一系列相关数据的集合,比如鼠标点击里包含了鼠标相关的信息如鼠标坐标,键盘事件里包含键盘事件的信息比如按下了哪个键
- 这个事件对象可以自己命名,比如event、evt、e
事件对象常见的属性和方法
事件对象属性方法 | 说明 |
---|---|
e.target | 返回触发事件的对象(标准) |
e.srcElement | 返回触发事件的对象(非标准) |
e.type | 返回事件的类型 比如click moueseover 不带on |
e.cancelBubble | 该属性阻止冒泡(非标准) |
e.returnValue | 该属性阻止默认事件(默认行为)(非标准) 比如不让链接跳转 |
e.preventDefault() | 该方法阻止默认事件(默认行为)(标准)比如不让链接跳转 |
e.stopPropagation() | 阻止冒泡 标准 |
e.target和this区别
- e.target返回的是触发事件的对象(元素) this返回的是绑定事件的对象(元素)
- 区别:e.target点击了哪个元素就返回哪个元素,this哪个元素绑定了这个点击事件,那么就返回谁
- currentTarget与this非常相似(区别在于有兼容性问题且不如this短)
5) 事件委托
事件委托也称事件代理,再JQuery里陈伟事件委派
事件委托的原理
不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置的每个子节点。
6) 常用的鼠标事件
- 禁止鼠标右键菜单contextmenu
contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu',function(e){
e.preventDefault();
}
2.禁止鼠标选中selectstart
document.addEventListener('selectstart',function(e){
e.preventDefault();
}
鼠标事件对象
鼠标事件对象 | 说明 |
---|---|
e.clientX | 返回鼠标相对于浏览器窗口可视区的X坐标 |
e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 |
e.pageX | 返回鼠标相对于文档页面的X坐标 |
e.pageY | 返回鼠标相对于文档页面的Y坐标 |
e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
键盘事件对象
键盘事件 | 触发条件 |
---|---|
keyup | 按键弹起的时候触发 |
keydown | 按键按下的时候触发 |
keypress | 按键按下的时候触发 不识别功能键(ctrl shift 箭头等) |
键盘事件对象属性 | 说明 |
---|---|
keyCode | 返回该键的ASCII值 |
注意:keydown和keyup不区分字母大小写,keypress区分大小写。
实际开发中更多使用keydown和keyup,它能识别所有的键(包括功能键)
Keypress不识别功能键,但keyCode属性能区分大小写,返回不同的ASCII值
4、BOM
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。
BOM由一些列相关的对象构成,并且每个对象都提供了很多方法与属性。
BOM缺乏标准,由厂商定义。
1) BOM的构成
BOM比DOM更高级,BOM包含了DOM
- window对象是浏览器的顶级对象,它具有双重角色
- 它是JS访问浏览器的一个接口
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用的时候可以省略window,前面学习的对话框都属于window对象方法,如alert()、prompt()等
2) window对象常见事件
窗口加载事件
- load事件
window.onload = function(){}
或者
window.addEventListener("load",function(){});
window.onload是窗口(页面)加载事件,当文档内容完成加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。
2.DOMContentLoaded事件
document.addEventListener('DOMContentLoaded',function(){});
DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。
如果页面的图片很多的话,从用户访问到onload触发可能需要较长时间,交互效果就不能实现,必然影响用户的体验,此时用DOMContentLoaded事件比较合适。
调整窗口大小载事件
window.onresize = function()
或者
window.addEventListener('resize',function(){});
获取窗口宽高:
window.innerWidth和window.innerHeight属性
3) 定时器
1.setTimeout定时器
//写法一,直接写函数
setTimeout(funtion(){
console.log("时间到了")
},2000);
//写法二,写函数名
function callback(){
console.log("爆炸了");
}
setTimeout(callback,3000);
//页面中可能会有很多的定时器,所以一般需要标识符
var timer1 = setTimeout(函数,时间);
setTimeout()这个调用函数我们称为回调函数callback
普通函数是按照代码顺序直接调用
而这个函数需要等待时间,因此称为回调函数
触发事件里的函数也是回调函数
- 停止setTimeout()定时器
window.clearTimeout(timeoutID);
- setInterval定时器
window.setIntervbal(函数,时间);
每隔多少时间就调用一次
- 停止setInterval()定时器
window.clearInterval()
- this指向(谁调用指向谁)
- 全局作用域或者普通函数中的this指向全局对象window(定时器里面的this指向window)
- 方法调用中谁调用this指向谁
- 构造函数中this指向构造函数的实例
4) JS执行机制
JS是单线程
JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们堆某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。
同步和异步
HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程。于是,JS中出现了同步和异步。
同步:
前一个任务结束后执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。
异步:
在做一件事情的同时,可以去处理其他事情。
同步任务:
同步任务都在主线程上执行,形成一个执行栈.
异步任务:
JS的异步是通过回调函数实现的。
一般而言,异步任务有以下三种类型:
- 普通事件,如click、resize等
- 资源加载,如load、error等
- 定时器,包括setInterval、setTimeout等
异步任务添加到任务队列(消息队列)里
JS执行机制
- 先执行执行栈中的同步任务
- 异步任务(回调函数)放入任务队列中
- 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
5) localtion对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。
URL
统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
location对象属性
location对象属性 | 返回值 |
---|---|
location.href | 获取或者设置整个URL |
location.host | 返回主机(域名) |
location.port | 返回端口号,如果未写返回空字符串 |
location.pathname | 返回路径 |
location.hash | 返回片段 #后面的内容,常见于链接 锚点 |
location对象方法
location对象方法 | 返回值 |
---|---|
location.assign() | 跟href一样,可以跳转页面(也称为重定向页面),能够后退页面 |
location.replace() | 替换当前页面,因为不记录历史,所以不能后退页面 |
location.reload() | 重新加载页面,相当于刷新按钮或者f5,如果参数为true强制刷新(ctrl+f5) |
6) navigator对象
navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。
下面前端代码可以判断用户用哪个终端打开页面,实现跳转
if((navigator.userAgent.match(/(phone|pad|pod|iPhong|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOs|Symbian|Windows Phone)/i))){
window.location.href = ""; //手机
}else{
window.location.href = ""'; //电脑
}
7) history对象
history对象方法 | 作用 |
---|---|
back() | 可实现后退功能 |
forward() | 可实现前进功能 |
go(参数) | 前进后退功能,参数1是前进1个页面,-1是后退1个页面 |
5、动画
1) 节流阀
防止轮播图按钮连续点击造成播放过快。
节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发。
核心实现思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数。
开始设置一个变量var flag = true;
if(flag){flag=false;do something} 关闭水龙头
利用回调函数动画执行完毕,flag = true打开水龙头
可以使用逻辑中断 flag && callback() (等同于于上面if的写法)
6、本地存储
本地存储特性
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大,sessionStorage约5M、localStorage约20M
- 只能存储字符串,可以将对象JSON.stringify()编码后存储
1) window.sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
- 以键值对的形式存储使用
存储数据
sessionStorage.setItem(key,value);
获取数据
sessionStorage.getItem(key);
删除数据
sessionStorage.removeItem(key);
清空所有数据
session.clear(); //不写参数
2) window.localStorage
- 生命周期永久有效,除非手动删除否则关闭页面也会存在
- 可以多窗口(页面)共享(同一浏览器可以共享)
- 以键值对的形式存储使用
使用方法与sessionStorage一致
localStorage.setItem(key,value);
localStorage.getItem(key);
localStorage.removeItem(key);
localStorage.clear();
版权声明:本文标题:JS Web APIs (DOM BOM)学习笔记 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1728025329a1142612.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论