Web API

最新推荐文章于 2024-07-23 16:55:11 发布

倔强的甜薯

最新推荐文章于 2024-07-23 16:55:11 发布

阅读量268

点赞数

文章标签：前端 html javascript Powered by 金山文档

本文链接：https://blog.csdn.net/qq_43721287/article/details/129462405

版权

一、API

接口（预定义的函数），简单理解为给程序员提供的一个工具，以便实现想要的功能

二、Web API

浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

三、DOM文档对象模型

1、DOM

编程接口

2、DOM树

文档：一个页面就是一个文档，DOM中使用document表示

元素：页面中所有标签都是元素，DOM中使用element表示

节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

3、获取元素

//（1）根据id获取，返回带有id的元素对象
document.getElementById('id');
//（2）根据标签名获取，返回带有指定标签名的对象的集合，是一个伪元素
document.getElementsByTagName('标签名');
//（3）通过HTML5新增的方法获取
//querySelector() 返回指定选择器的第一个元素对象
document.querySelector('.类名');
document.querySelector('#id名');
//querySelectorAll()返回指定选择器的所有元素对象集合
document.querySelectorAll('.类名');
//（4）特殊元素获取
//获取body 元素
varbodyEle=document.body;
//获取html 元素
varhtmlEle=document.html;
varhtmlEle=document.documentElement;

4、事件基础

4.1、事件概述：触发---响应机制

4.2、事件三要素

事件源（谁做）、事件类型（什么事件）、事件处理程序（做什么）

4.3、执行事件的步骤

获取事件源---注册事件---添加事件处理程序

4.4、鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

mouseenter和mouseover的区别

mouseenter不会冒泡

5、操作元素

5.1、改变元素内容

element.innerText

element.innerHTML

innerText 和 innerHTML的区别

innerText 不识别html标签非标准去除空格和换行

innerHTML 识别html标签 W3C标准保留空格和换行的

这两个属性是可读写的可以获取元素里面的内容

5.2、常见元素属性

src、href、id、alt、title

5.3、表单属性操作

// 2. 注册事件 处理程序
btn.onclick=function() {
// input.innerHTML = '点击了';  这个是 普通盒子 比如 div 标签里面的内容
// 表单里面的值 文字内容是通过 value 来修改的
input.value='被点击了';
// 如果想要某个表单被禁用 不能再点击 disabled  这个按钮 button禁用
// btn.disabled = true;
this.disabled=true;
// this 指向的是事件函数的调用者 btn

5.4、样式属性操作

1.element.style.backgroundColor="red"   //js操作样式
2.element.className="bg"   // 类名样式操作

JS 里面的样式采取驼峰命名法。比如 fontSize、 backgroundColor

JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

css的属性值要加引号

5.5、排他思想

// 1. 获取所有按钮元素
varbtns=document.getElementsByTagName('button');
// btns得到的是伪数组  里面的每一个元素 btns[i]
for (vari=0; i<btns.length; i++) {
   btns[i].onclick=function() {
   // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
        // for (var i = 0; i < btns.length; i++) {
        //     btns[i].style.backgroundColor = '';
        // }
    console.log(i);
        for(varj=0;j<btns.length;j++){
            console.log(j);
            btns[j].style.backgroundColor='';
        }
// (2) 然后才让当前的元素背景颜色为pink 留下我自己
        this.style.backgroundColor='pink';
   }
}
//2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想

5.6、自定义属性操作

element.属性  // 获取标签行内属性值（元素本身自带的属性）
element.getAttribute('属性');      // 获取标签行内属性值（自定义的属性）
element.属性='属性值'  // 设置标签行内属性值
div.className='nav'  //设置类名（特殊）
element.setAttribute('属性', '属性值'); // 设置标签行内属性值
div.setAttribute('class','nav') //设置类名
element.removeAttribute('属性');    // 移除标签行内属性

<divgetTime="20"data-index="2"data-list-name="andy"></div>
// h5新增的获取自定义属性的方法 它只能获取data-开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset['listName']);

一般情况下，使用element.属性获取内置属性；element.getAttribute('属性') 获取自定义属性

自定义属性一般以data-开头

如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法

6、节点操作

6.1、概述

元素节点 nodeType 为 1（重点）

属性节点 nodeType 为 2（了解）

文本节点 nodeType 为 3（了解）

6.2、获取元素节点

// 利用 DOM 方法获取元素节点
document.getElementById() 
document.getElementByTagName()
// 利用父级节点关系获取元素（亲爸爸）  如果指定的节点没有父节点则返回 null 

node.parentNode  
// 利用子节点关系获取元素
parentNode.children//只读属性，返回所有的子元素节点（不包括空格和换行）
parentNode.children[0] //返回第一个子节点（常用）
parentNode.chilren[parentNode.chilren.length-1] //返回最后一个子元素节点
parentNode.firstChild//返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。（了解）
parentNode.lastChild  //返回最后一个子节点，找不到则返回null（了解）
node.nextSibling//返回当前元素的下一个兄弟元素节点，找不到则返回null。
node.previousSibling    //返回当前元素上一个兄弟元素节点，找不到则返回null。

6.3、创建节点

document.createElement('tagName')

6.4、添加节点

node.appendChild(child) //将一个节点添加到指定父节点的子节点列表末尾
node.insertBefore(child) //将一个节点添加到指定父节点的子节点列表前面

6.5、删除节点

node.removeChild(child) //从 DOM 中删除一个子节点，返回删除的节点

6.6、复制节点

node.cloneNode() //返回调用该方法的节点的一个副本

如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

6.7、替换节点

parentNode.replaceChild(newChild, oldChild); //用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

6.8、创建元素

//innerHTML 创建元素
//采用字符串拼接创建元素
// var inner = document.querySelector('.inner');
// for (var i = 0; i <= 100; i++) {
       //inner.innerHTML += '<a href="#">百度</a>'
//}
//采用数组形式拼接创建元素
vararr= [];
for (vari=0; i<=100; i++) {
  arr.push('<a href="#">百度</a>');
}
inner.innerHTML=arr.join('');

document.write() 创建元素如果页面文档流加载完毕，再调用这句话会导致页面重绘（了解）

innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘

innerHTML 复制节点的时候，不会复制原先节点的事件，会存在内存泄露问题

如果页面创建元素很多，建议使用 innerHTML 因其效率更高（不要拼接字符串，采取数组形式拼接）

如果页面创建元素较少，建议使用 createElement()

四、事件高级

1、注册事件（绑定事件）

（1）利用on开头的事件，如onclick

注册事件的唯一性

同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

（2）addEventListener('事件类型','事件处理函数')

它是一个方法，事件类型不需要加on，同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行

2、删除事件

removeEventListener()

3、DOM事件流

3.1、概述

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

3.2、阶段

捕获阶段

当前目标阶段

冒泡阶段

注意：onblur、onfocus、onmouseenter、onmouseleave没有冒泡

onclick 和 attachEvent（ie）只能得到冒泡阶段。

捕获阶段如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son

冒泡阶段如果addEventListener 第三个参数是 false 或者省略那么则处于冒泡阶段 son -> father ->body -> html -> document

当 son 定位到其他位置，给父亲绑定事件，点击son，父亲也会被触发，在dom中son还是在父亲节点里面的

4、事件对象

4.1、概述

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。

这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。

这个事件对象我们可以自己命名比如 event 、 evt、 e

当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

4.2、事件对象属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象
e.type	返回事件的类型
e.stopPropagation()	阻止冒泡
e.preventDefault()	阻止默认事件（默认行为）
e.keyCode	拿到相应键的ASCLL码值

e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）

区别：

e.target ：点击了那个元素，就返回那个元素；this：那个元素绑定了这个点击事件，那么就返回谁

currentTarget 和 this 非常相似

5、阻止事件冒泡

e.stopPropagation()

6、事件委托

6.1、原理

给父元素绑定事件，然后通过事件冒泡的原理，从而影响子元素，这样可以提高性能

7、鼠标事件

7.1、禁止鼠标右键菜单contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
})

7.2、禁止鼠标选中（selectstart 开始选中）

document.addEventListener('selectstart', function(e) {
    e.preventDefault();
   })

7.3、鼠标事件对象

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标
e.pageY	返回鼠标相对于文档页面的Y坐标
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

8、键盘事件

8.1、键盘事件（给document添加键盘事件）

键盘事件	触发条件
onkeyup	松开键时
onkeydown	按下键时
onkeypress	按下并弹起时

onkeyperss不识别功能键

执行顺序：keydown -- keypress -- keyup

文本框中的内容是在按下之后才出来，所以在 keyup 的时候才能获取到输入的内容

8.2、键盘事件对象

keyCode返回该键的ASCLL值

注意： onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。

五、BOM

1、概念

浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

2、DOM和BOM的区别

DOM文档对象模型 DOM 就是把「文档」当做一个「对象」来看待DOM 的顶级对象是 documentDOM 主要学习的是操作页面元素DOM 是 W3C 标准规范

BOM浏览器对象模型把「浏览器」当做一个「对象」来看待BOM 的顶级对象是 windowBOM 学习的是浏览器窗口交互的一些对象BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

BOM包含DOM

3、BOM构成

window 对象是浏览器的顶级对象，它具有双重角色。

它是 JS 访问浏览器窗口的一个接口。

它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。

注意：window下的一个特殊属性 window.name

4、窗口加载事件

//如果写多个onload，前面的会被后面的覆盖
window.onload=function(){} 
//不加 on ，可以注册多个，不会被覆盖
window.addEventListener("load",function(){});

document.addEventListener('DOMContentLoaded',function(){})

load ：等页面内容全部加载完毕，包含页面dom元素图片 flash css 等等

DOMContentLoaded ：DOM 加载完毕，不包含图片 falsh css 等就可以执行加载速度比 load更快一些

5、调整窗口大小

window.onresize=function(){}

window.addEventListener("resize",function(){});
window.onresize 是调整浏览器窗口大小加载事件,  当触发时就调用的处理函数

注意：

只要浏览器窗口大小发生像素变化，就会触发这个事件。

我们经常利用这个事件完成响应式布局。

rem原理：document.documentElement.style.fontSize = innerWidth / 10 + "px"

window.innerWidth 当前屏幕的宽度

6、定时器

6.1、setTimeout

window.setTimeout(回调函数, [延迟的毫秒数]);
setTimeout() 设置定时器，只触发一次，当经过一段时间后，自动调用里面的函数

注意：

window 可以省略

这个回调函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()' （不推荐）

延迟的毫秒数省略默认是 0，如果写，必须是毫秒

因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

6.2、停止setTimeout() 定时器

window.clearTimeout(定时器名)

6.3、setInterval()

window.setInterval(回调函数, [间隔的毫秒数]);

setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

因为定时器第一次执行也需要等间隔时间，所以将函数封装起来，先调用一次，防止第一次刷新页面有空白

6.4、停止 setInterval() 定时器

window.clearInterval(定时器名);

clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。

7、this指向

全局作用域或者普通函数中this指向全局对象window

定时器里面的this指向window

事件处理函数中谁调用this指向谁

构造函数中this指向构造函数的实例

8、JS执行机制

8.1、JS是单线程

js 在执行代码的时候是顺序执行的，一次只能做一件事

8.2、同步和异步

同步是当前一个任务执行完毕后再执行下一个

异步是同时执行所有的任务

8.3、同步任务

同步任务在主线程中执行，形成一个执行栈

8.4、异步任务

异步任务先被放到任务队列中，等待主线程中的同步任务执行完毕，再读取任务队列中的回调函数执行

异步任务包括回调函数、定时器

9、location对象

9.1、概念

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL 。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

9.2、URL的一般语法格式

protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议
host	主机（域名）
port	端口号
path	路径
query	参数，以键值对的形式通过&分割
fragment	片段，#后常写链接锚点

9.3、location对象属性

属性	返回值
location.href	获取或设置整个URL
location.search	返回 ? 后面的参数，
location.host	返回主机
location.port	返回端口号，未写返回空字符串
location.pathname	返回路径
location.hash	返回片段

9.4、location对象方法

对象方法	返回值
location.assign()	与href一样，可以跳转页面
location.replace()	替换当前页面，不记录历史
location.reload()	重新加载页面，参数为true强制刷新

10、navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

10、 history 对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的 URL。

对象方法	作用
back()	后退
forward()	前进
go(参数)	1前进，-1后退

11、offset

11.1、概述

属性	作用
element.offsetParent	返回该元素带有定位的父元素，如果没有则返回body
element.offsetTop	返回元素相对带有定位的父元素上方的偏移
element.offsetLeft	返回元素相对带有定位的父元素左边的偏移
element.offsetWidth	返回padding+border+width
element.offsetHeight	返回padding+border+height

element.parentNode返回亲爸爸

返回的数值没有单位

11.2、offset与style的区别

offset系列

只读属性，不可以赋值，只能获取

可以得到任意样式表中的样式值

获得的数值是没有单位的

offsetWidth = padding + border + width

style

是可读可写属性，可以获取也可以赋值

只能得到行内样式表中的样式值

style.width获得的是带有单位的字符串

style.width = width

12、client

属性	作用
element.clientTop	返回元素上边框大小
element.clientLeft	返回元素左边框大小
element.clientWidth	返回padding+width，不带单位
element.clientHeight	返回padding+height，不带单位

13、立即执行函数

13.1、语法

(function(形参){})(实参);
(function(形参){}(实参));

13.2、作用

创建一个独立的作用域，避免了命名冲突问题

14、pageshow重新加载页面

15、scroll

属性	作用
element.scrollTop	返回被卷去的上侧距离，不带单位
element.scrollLeft	返回被卷去的上侧距离，不带单位
element.scrollWidth	返回自身实际宽度，不带单位
element.scrollHeight	返回自身实际高度，不带单位

当内容撑开盒子时，scrollHeight是内容的实际高度，否则和clientHeight一样。

17、flexible.js

给 body 设置大小是为了给没有设置字体大小的元素继承

给 html 设置大小

rem原理：document.documentElement.style.fontSize = innerWidth / 10 + "px"

六、动画函数封装

1、原理

通过定时器setInterval()不断移动盒子位置

2、简单动画函数封装

// obj目标对象 target 目标位置
functionanimate(obj, target) {
    obj.timer=setInterval(function() {
        if (obj.offsetLeft>=target) {
        // 停止动画 本质是停止定时器
             clearInterval(obj.timer);
         }
        obj.style.left=obj.offsetLeft+1+'px';
    }, 30);
}

3、缓动动画

算法

步长：（目标值-当前的位置）/ 10 ---（步长要取整数）

停止条件：盒子当前的位置等于目标位置

functionanimate(obj, target) {
// 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer=setInterval(function() {
    // 步长值写到定时器的里面
    // 把我们步长值改为整数 不要出现小数的问题
    // var step = Math.ceil((target - obj.offsetLeft) / 10);
         varstep= (target-obj.offsetLeft) /10;
         step=step>0?Math.ceil(step) : Math.floor(step);
         if (obj.offsetLeft==target) {
            // 停止动画 本质是停止定时器
             clearInterval(obj.timer);
          }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left=obj.offsetLeft+step+'px';

      }, 15);
 }
varspan=document.querySelector('span');
varbtn500=document.querySelector('.btn500');
varbtn800=document.querySelector('.btn800');
btn500.addEventListener('click', function() {
    // 调用函数
    animate(span, 500);
})
btn800.addEventListener('click', function() {
    // 调用函数
    animate(span, 800);
})

4、回调函数