webAPIs笔记

创建节点 document.createElement(节点);
- 使用方式：必须使用document调用
- 返回值：是一个元素，可以按照元素的方式来操作
- 创建出来的元素默认不再页面中
添加节点 node（父节点）.appendChild(child) node父级 child是子级，在后面追加元素
- 父元素.appendChild（目标元素）
- 插入位置：把目标元素插入到父元素的最后一个子节点的位置上
node.insertBefore(child,指定元素)插入到指定元素的前面。
- 插入位置：插入到参考位置的前面
步骤，创建元素，添加元素

（5）挪动节点

var ul = document.quertSelector('ul');

var olLi2 = document.querySelector('ol li:nth-chid(2)');

ul.appendChild(olLi2 );

appendChild、insertBefore 如果操作的是页面上已经存在的元素，会把当前元素从原来的位置上剪切到新的位置

6.4 删除节点

node（父元素）.removeChild(child); //返回被删除的节点

被删除的元素.remove()——自杀；不用写参数

给a标签不添加href就没有默认样式

a标签的href的属性值设置为javascript：；在点击时就不会有默认跳转操作

6.5 复制节点

node.cloneNode(); 先克隆后添加。

如果括号为空或者里面是false，浅拷贝，只复制标签不复制里面的内容；括号里为true，深拷贝，复制内容和标签。

数组里可以存放任意类型的数据，包括对象

6.6 三种创建元素方式的区别

（1）document.write()（了解）

如果页面文档流加载完毕，再调用这句话会导致页面重绘

（2）innerHTML创建元素

var inner = document.querySelector('inner');

inner.innerHTML = '<a > 123< /a>'

(3)document.creatElement（）创建元素

区别

innerHTML创建多个元素效率更高（不要直接多次赋值（如果给元素的innerHTML赋值，会执行字符串的赋值（只消耗内存，不消耗时间）和重绘页面两步，重绘页面非常消耗时间，导致加载时间过长），采取数组形式，只赋一次值，结构稍微复杂

var array = [];

for (var i = 0; i < 1000; i++) {

array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');

}

document.body.innerHTML = array.join('');

createElement（）创建多个元素效率稍微低一点点，但是结构更清晰。

7 DOM重点核心

1 创建

2 增

3 删

4 改

5 查

6 属性操作

7 事件操作

8 注册事件

8.1 注册事件的两种方式

（1）传统方式，以on开头（特点是注册事件的唯一性：同一元素同一个事件只能添加同一个处理函数）

（2）方法侦听注册方式addEventListener

eventTarget(目标对象).addEventListener(type,listener[,useCapture])

type：事件类型字符串，而且必须带引号，不带on

listener（侦听器）：事件处理函数

useCapture：可选参数，是一个布尔值，

注意：先绑定的先触发。

（3）事件侦听兼容（非标准，了解不提倡）

8.2 删除事件（解绑事件）

（1）传统方式的解绑

事件源.事件类型 = null；

（2）事件侦听解绑

①注册事件：eventTarget.addEventListenenr('click',fn) //里面的fn不需要加小括号调用

function fn() {

alert(11);

}

②移除事件：eventTarget.removeEventListener('click',fn); //移除

把函数给变量，不加（）只给函数名，相当于不调用，只是把函数体给前面的事件源.事件类型

匿名函数无法解绑，所以需要要上述的方法，使用命名函数给为事件方法命名。如果使用添加事件监听的方式绑定事件，后面要解绑，必须要使用有名称的函数作为事件处理程序

8.3 DOM事件流

事件的传播的过程：

（1）为了浏览器代码执行更符合人类的逻辑顺序，所有有了三个阶段

（2）捕获阶段

点击了下层元素后，会依次从上层到下层触发同名事件。

（3）冒泡阶段

当点击了下层元素事件，会把上层元素同名事件依次触发。

（4）注意

js代码中只能执行捕获或冒泡中的一个阶段
- onclick和attachEvent（ie）只能得到冒泡阶段
捕获阶段，如果addEventListener第三个参数（是否在捕获阶段触发）是true，那么处于捕获阶段
- document>>html>>body>>father
冒泡阶段，如果addEventListener第三个参数是false或者不写，那么处于冒泡阶段
- father >> body>>html>>document
一般开发中只关注冒泡，很少使用事件捕获
有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleaver

8.4 事件对象

（1）概述：事件对象包含了事件触发的时候的事件相关信息

div.oncilck = function(event) {};

event就是一个事件对象，写在我们侦听函数的小括号里，当形参看
事件对象只是有了事件才会存在，他是系统给我们自动创建的，不需要我们传递参数。
在事件触发时，浏览器会自动调用事件函数，浏览器会传入一个实参，这个实参就是事件对象。（通过arguments可以查看）
事件对象是我们事件发生时候和一系列相关数据的集合，跟事件相关的，比如点击里面就包含了鼠标的相关信息，鼠标坐标等，如果是键盘事件里面就包含了键盘事件的信息，比如，判断用户按下了哪个键，如果没有事件，他就不存在
这个事件对象我们可以自己命名
事件对象也有兼容性问题，ie678通过window.event。e = e || window.event（兼容处理）

（2）事件对象

e.target 返回的是触发事件的对象（元素）遵循冒泡或捕获条件，this返回的是绑定事件的对象（元素）ie678中是e.srcElement;
（了解）跟this相似，e.currentTarget ie678不兼容
e.type返回事件的类型
e.preventDefault（dom标准写法）阻止事件不跳转，让链接不跳转，或者让提交按钮不提交。
e.returnValue
- 注意：虽然return方便，但其后代码不执行，且只有传统浏览器有用。returnValue = false；
- return false也可以阻止默认行为，且没有兼容性问题
e.stopPropagation();阻止冒泡，dom推荐的标准
- ie678中是e.cancelBubble = true;

8.5 事件委托（代理、委派）

（1）原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其上层节点上，然后利用冒泡原理影响设置每个下层节点

优点：减少绑定事件的次数

提高事件的执行效率

可以为预设的元素预定事件，只要结构正确就可以为未来元素设置事件

理解:事件源和事件类型,事件处理程序,虽然常常绑定在一起,但其实是剥离开的三部分,具体关系是,根据事件类型,事件源触发事件处理程序(事件源调用事件处理函数),所以在事件委托中,父节点作为事件源绑定事件处理程序,其子节点会遵循事件冒泡,触发事件类型对应的事件处理程序（此时绑定起来的三要素中事件源就成了子节点）,而不是触发父节点的事件。

9 常用鼠标属性

9.1 常用鼠标事件

（1）禁止鼠标右键菜单

contextmenu右键菜单——e.preventDefault();

e.preventDefault()阻止浏览器的默认设置

（2）禁止鼠标选中selectstart——e.preventDefault();

（3）mousemove鼠标移动事件

① 只要我们鼠标移动1px就会触发这个事件

js代码的执行速度大于UI渲染的速度，所以画面有点延迟

9.2 鼠标事件对象

（1）clientX和clientY鼠标在可视区的XY轴坐标

（2）pageX和pageY鼠标在文档中的XY坐标，事件对象常常是鼠标所以用到e.,表示事件对象的属性。

（3）screenX和screenY鼠标相对于电脑屏幕的坐标

9.3 常用键盘事件

（1）onkeyup和onkeydown和onkeypress按键弹起或按下时触发

9.4 键盘事件对象

（1）键盘事件对象中的keyCode可以得到对应的ASCII码值

我们的keyup和keydown事件不区分字母大小写，a和A得到的都是65
我们的keypress事件区分大小写

10 BOM概述

10.1 什么是BOM

BOM是包含DOM

10.2 BOM的构成

因为window有name的特殊属性，所以声明变量不用name
全局变量可以看作是window的变量
window是所有事物的顶级
window对象的属性也可以看作为全局变量

10.3 window常见的事件

（1）窗口加载事件（当文档内容完全加载完成会触发事件）

window.onload = function() {}; //传统类型

window.addEventListener('事件类型',function(){}) //侦听类型

（2）DOMContentLoaded仅当DOM加载完成时，不包括图片，样式，flash等

load等页面内容全部加载完毕，包含页面dom元素图片 flash css等等
DOMContentLoaded是DOM加载完毕，不包含图片flash css等就可以执行，速度比load更快一点

（3）unload关闭窗口时触发

（4）调整窗口的大小

window.addEventListener('resize',function(){})

只要浏览器窗口大小发生变化，就会触发该事件

innerWidth窗口的宽度

10.4 定时器

10.4.1 setTimeout延时定时器

语法规范：window.setTimeout(调用函数，延时时间)

这个window在调用的时候可以省略
返回值：当时定时器的编号：（如果该定时器后期要被清除，需要记住编号）
这个延时时间单位时毫秒，但是可以省略，省略默认是0
调用这个函数可以直接写函数，也可以写函数名。
页面中可能有很多的定时器，用不同变量接受定时器返回的值，后续也方便清除。

回调函数:

10.4.2 停止定时器

window.clearTimeout(定时器的名字/timeoutID)只停止最新赋值的变量

10.4.3 setInterval（回调函数，间隔的时间毫秒）间接定时器

重复调用一个函数，每隔一段时间调用一次。

与setTimeout的区别

10.4.4 清除间接定时器

定时器里的this指向的是window

clearInterval（定时器编号）；清除定时器只是让以后不执行，当前次数执行还会继续

11 this的指向问题

（1）全局作用域，定时器或者普通（独立，没有被上一级的对象调用）函数中this指向全局对象window。

（2）方法调用中谁调用就指向谁（指向调用对象）。

（3）构造函数中this指向构造函数的实例（指向new创建的新对象：new关键词会改变this的指向，构造函数var a = new fn（）中a 调用了fn（），new关键词相当于将声明的构造函数复制一份使其指向a）。

谁最终调用函数this就指向谁（this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的）*

12 同步和异步

区别：这条流水线各个流程的执行顺序不同。

（1）同步任务

把所有同步任务，放在主线程上执行，形成一个执行栈

（2）异步任务

JS的异步是通过回调函数实现的.

一般而言,异步任务有以下三种类型:

普通事件,如click,resize等
资源加载,如load,error等
定时器,包括setInterval,setTimeout等

（3）执行机制

先执行执行栈的同步任务，

异步任务放在任务队列（消息队列）

一旦执行栈中的同步任务执行完毕，系统会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

*创建定时器是同步任务，而定时器中的回调函数是异步任务

13 location对象

13.1 URL

13.2 location的属性

遇到汉字，会把汉字转换为转义符

13.3 location的方法

（1）location.assign('需要跳转的地址')；和href一样记录浏览历史，有后退功能

（2）location.replace('需要跳转的地址');不记录浏览历史（历史记录被替换掉，只保存当前网址），无后退功能

（3）location.reload();重新加载页面。里面的参数true代表强制刷新，不使用缓存刷新，从服务器重新加载，

location.href = location.href ;也可以实现刷新。

13.4 navigator对象

navigator对象包含有关浏览器的信息，最常用的是userAgent

13.4 history对象

和我们浏览器的页面跳转轨迹进行交互，

forward前进，history.forward();

back后退

go（前进和后退的步数，前进正值，后退负值）

go（0）表示刷新

一般不用，有时在oa系统用

14 网页特效

14.1 offset（偏移量）

动态的得到改元素的位置（偏移）、大小等

（1）offsetTop和offsetLeft

得到的是元素的偏移位置（顶部和左侧距离offsetParent的距离），返回不带单位的数值

他以带有定位的父亲为准，如果没有父亲或者父亲没有定位以body为准

（2）offsetWidth和offsetHeight

得到盒子的大小，包含padding + border + 宽高

（3）offsetParent

返回最近的带有定位的父亲（一个元素），否则返回的是body

parentNode的区别：返回的是最近一级的父亲，不管有没有定位。

（4）offset和style的区别

offset：

offset可以得到任意样式表中的样式值
offset系列获得的数值是没有单位的
offsetWidth包含padding + border + width
offsetWidth等属性是只读属性，只能获取不能赋值

style：

style只能得到行内样式中的样式值
style.width系列获得的带有单位的字符串
style.width值包含 width
style.width等属性是读写属性，可以获取可以赋值
window.pageXoffset页面被卷去的（偏移的）宽
window.pageYoffset页面被卷去的（偏移的）高

(mousemove鼠标移动事件，mouseout鼠标离开mousedown鼠标按下事件，mouseup鼠标弹起事件)

事件对象e表示执行当前事件的对象

鼠标移动过快无法正常触发事件bug原因：由于js解析速度大于ui渲染速度，当鼠标移动过快时，盒子和鼠标分离，导致鼠标弹起时，盒子内事件不触发

14.2 元素可视区client系列

14.3 scroll（滚动条）系列属性

scrollHeight/Width得到的是盒子的实际大小，包括超出的内容。
scroll事件，滚动事件。当我们滚动条发生变化会触发的事件。
被卷去的距离，代表滚出去的上、左距离。
内容超出了父亲，父亲的scrollWidth/Height的大小为内容实际宽度/高度
内容没有超出父级。父级的scrollWidth/Height的大小为父级内部空间的大小
页面被卷去距离，window.pageX/YOffset也可以实现，为了兼容。

DTD === <!DOCTYPE html>;

14.4 offset、client、scroll异同

（1）offset

当前标签自身的大小和位置

offsetW/H返回自身包括padding、边框、内容区

（2）client

当前标签容纳范围的大小和位置

offsetW/H返回自身不包括边框，只有内容区

（3）scroll

单签标签内容的大小和位置

offsetW/H返回真实自身不包括边框，只有内容区

14.5 mouseover（在...之上，盘旋）和 mouseenter(进入)事件区别

当鼠标移动到元素上的时候就会触发mouseover事件

mouse鼠标经过自身盒子会触发，mouseenter经过子盒子不会触发，mouseover还会触发子盒子

之所以这样，mouseenter不会冒泡，对应的mouseleave也不会冒泡

15 flexible.js源码分析

15.1 立即执行函数

（1）需要调用，但只需要（），立马能够自己执行的函数

（2）写法（可以传递参数进去，可以匿名也可以命名）

（function() {}）(); 或者 (function() {} ());

第二个括号可以看作是调用函数

有多个立即执行函数时需要用；分割开

（3）立即执行函数最大的作用就是独立创建了一个作用域，里面的所有的变量都是局部变量，不会引起命名冲突。

15.2 源码分析之核心原理

（1）物理像素比 dpr

vardpr = document.devicePixelRatio || 1; //根据设备的物理像素比设置，没有则为1

(2)pageshow事件

是我们重新加载页面触发的事件

e.persisted返回的是true就是说如果这个页面是从缓存取过来的页面，也需要重新计算一下rem大小。

16 用js实现动画函数封装

16.1 核心原理，通过定时器setInterval不断的移动盒子

（一秒超过24帧，基本就是连续的动画）

16.2 动画函数的简单封装

function animate （obj，target）{}；obj目标对象，target目标位置。

为什么点击次数多了，次数就变快了:

第一次点击按钮，调用了第一次animate函数，创建了1个定时器，每30ms让对象向右运动1px，之后点击会不断的叠加，使多个定时器作用到一个标签，移动距离变大

16.3 缓动动画

缓动动画公式：（目标值 - 现在的位置） / 10；

offsetLeft等属性无法获取对象的小数，只能获取到整数

给对象赋值小数，依旧只能赋值整数，小数会被取整

16.4 动画函数增加回调函数

回调函数写到定时器结束里面

函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行之后，再执行传进去的函数，这个过程就称为回调

17 移动端触屏事件

17.1 触屏事件

pc端没有用

（1）触屏对象

touches 正在触发屏幕的所有列表

targetTouches 正在触发当前DOM元素上的元素列表，比前一个更常用

如果侦听的是一个DOM元素，他们两个都是一样的

changedTouches 手指状态发生改变的列表，从无到有或者从有到无（当手指离开时，仍有列表）

e.preventDefault();阻止屏幕默认拖动移动

18 移动端轮播图

18.1 检测过渡完成事件

transitionend

页面切换时，ui不渲染，只执行js代码，导致无法判定过渡完成事件，只执行index++，所以将 index==3，修改为index>=3

18.2 classList属性

返回元素的类名列表

以及在元素中移除及切换类。

div.classList.add添加，是在后面追加类名，并不覆盖之前的类名，注意前面不加.

div.classList.remove('类名');删除类名

div.classList.toggle切换类名，自动判断有无类名，有移除，无添加

div.classList.replace('需要替换的类名'，‘新类名’)

div.classList.contains('类名');判断是否包含。

Math.abs()；取绝对值

18.3 click300毫秒的延迟效果

原因时移动端屏幕双击会缩放页面，第一次点击后，会在300ms内等待第二次点击，

解决方案

（1）user-scalable = no

（2）利用touch事件解决

（3）fastclick插件

（4）swiper插件

参数更改

spaceBetween，图片间距

19 本地存储

19.1 特征

（1）数据存储在用户浏览器中

（2）设置、读取方便、甚至页面刷新不丢失数据

（3）容量较大，sessionStorage约5M，localStorage约20M

（4）只能存储字符串，可以将对象JSON.stringify()编码后存储

19.2 window.sessionStorage

（1）生命周期为关闭浏览器窗口

（2）在同一个窗口（页面）数据可以共享

（3）以键值对的形式存在

存：sessionStorage.setItem(key,value)
获取：sessionStorage.getItem(key)
删除：sessionStorage.removeItem(key)
清除：sessionStorage.clear();清除所有，慎用

19.3 localStorage

（1）生命周期永久生效，除非手动删除，否则关闭页面也会存在

（2）可以多窗口（页面）共享（同一浏览器可以共享）（以后再搞）

（3）以键值对的形式储存使用

无法直接存储对象，只能存储字符串

19.4 change事件，表单元素改变状态触发

触发条件：表单元素的值被修改了，并且失去焦点

半自动学习机丶

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
webAPIs笔记

1 自定义属性1.1 获取自定义属性我们程序员自己添加的属性就是自定义属性（1）element.属性获取内置属性值（元素本身自带的属性）（2）element.getAttribute('属性');主要获得自定义的属性（标准）标签被翻译成DOM对象标签的特征被翻译成DOM的属性标签的官方行内属性，被翻译成DOM对象的属性标签的自定义属性，不会被翻译成对象的属性，无法通过点语法来操作 1.2 设置和获取属性值（1）element.属性 = ‘值
复制链接

扫一扫