JavaScript进阶——Web APIs

小田加油！！

已于 2022-07-25 20:09:04 修改

阅读量921

点赞数

分类专栏： javascript 文章标签：前端 javascript

于 2022-07-16 22:32:12 首次发布

本文链接：https://blog.csdn.net/m0_58454229/article/details/125552982

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中DOM（文档对象模型）的基本操作，包括通过id、标签名和类名获取元素，事件处理如点击、焦点、鼠标事件，以及元素内容、属性、样式的修改。同时，讲解了BOM（浏览器对象模型）中的window对象事件，如页面加载、调整窗口大小，以及location和navigator对象的使用。此外，还涉及到了JavaScript执行机制、动画实现、移动端事件和本地存储等内容。

摘要由CSDN通过智能技术生成

DOM简介

页面元素获取通过id名获取---getElementById

通过标签名获取---getElementsByTagName

通过类名获取---getElementsByClassName（H5新增）

通过id名获取---getElementById

通过标签名获取---getElementsByTagName

通过类名获取---getElementsByClassName（H5新增）

鼠标经过：mouseenter和mouseover区别

本地存储--window.sessionStorage

本地存储--localStorage

JS基础ECMAScript基础语法是为了给后面做铺垫，而Web APIs是JS的应用，做交互效果。

Web API是针对于浏览器提供的操作浏览器功能和页面元素的API（ROM、DOM）

DOM简介

DOM就是文档对象模型，通过DOM接口可以改变网页内容、结构、样式。核心对象是document

页面元素获取

通过id名获取---getElementById

getElementById()是通过id名获取参数是一个字符串，返回的是单个元素对象

使用如下：

<body>

<div id="time">2022-4-23</div>



<script>

var timer = document.getElementById("time");

console.log(timer);

console.log(typeof timer);

console.dir(timer);

</script>

</body>

运行如下：

console.dir打印的是返回的元素对象，可以更好地查看对象的属性。

通过标签名获取---getElementsByTagName

getElementsByTagName（）是参数是一个字符串，返回的是元素对象的集合（以伪数组的形式存储）

如果没有这个元素，则返回的是空的伪数组。

通过父元素获取子元素---element.getElementsByTagName()来获取。（父元素必须指定为单个对象）

使用如下：

//getElementsByTagName通过标签名

var lis = document.getElementsByTagName("li");

console.log(lis);

//父元素获取子元素

//var ol = document.getElementsByTagName("ol"); //ol[]

// console.log(ol[0].getElementsByTagName("li"));

// 指定id

var ol = document.getElementById("ol");

console.log(ol.getElementsByTagName("li"));

通过类名获取---getElementsByClassName（H5新增）

getElementsByClassName()根据类名获取相应元素集合

通过querySelector、querySelectorAll获取指定选择器的第一个元素对象或者所有对象（切记：里面的选择器需要加符号！！！eg：类->.box id->#nav）（H5新增）

获取body元素和html元素

//获取body元素、html元素

var bodyEle = document.body;

console.log(bodyEle);

var htmlEle = document.documentElement;

console.log(htmlEle);

事件

事件是由三部分组成：事件源（谁被触发）、事件类型（怎么触发）、事件处理程序（通过一个函数赋值的方式完成）

一个简单事件如下：

<button id="bt">唐伯虎</button>

<script>

//获取事件源

var bt = document.getElementById("bt");

//绑定事件.onclick

//添加事件处理程序

bt.onclick = function() {

alert("点秋香");

};

</script>

常见的鼠标事件：

三个事件的执行顺序：keydown--keypress--keyup

keyup和keydown不区分大小写eg：a和A都是65(大写的)

操作元素---改变元素内容

通过innerText改变元素内容

案例:实现点击显示时间按钮后元素div里面的内容修改为当前时间

<body>



<button id="bt">显示时间</button>

<div>时间....</div>

<script>

var bt = document.getElementById("bt");

var div = document.querySelector("div");

bt.onclick = function() {

div.innerText = getTime();

};

function getTime() {

var time = new Date();

var h = time.getHours();

h = h < 10 ? "0" + h : h;

var m = time.getMinutes();

m = m < 10 ? "0" + m : m;

var s = time.getSeconds();

s = s < 10 ? "0" + s : s;

return h + ":" + m + ":" + s;

}

</script>

</body>

通过innerHTML改变元素内容（推荐）

二者区别：innerText不识别html标签且去掉空格和换行，innerHTML可以识别html标签且保留空格和换行。

操作元素---改变元素属性

元素.属性

案例如下：实现点击按钮更换成相应的图片

操作元素---表单元素属性

修改表单里面的文字内容---input.value

表单、按钮设置成不能再使用---disabled，btn.disabled=true

<body>

<button>按钮</button>

<input type="text" value="傻狗傻狗傻狗" />

<script>

var inp = document.querySelector("input");

var btn = document.querySelector("button");

btn.onclick = function() {

inp.value = "点击了~~~";

inp.disabled = true;

this.disabled = true;

};

</script>



</body>

其中this指向函数的调用者，谁调用了函数就指向谁

label标签：

通常和input标签一起使用。当⽤户点击label标签中的⽂本时，浏览器就会⾃动将焦点转到和该标签相关联的控件上。

与input显示关联：通过label标签的for属性与指定表单元素的id绑定来实现关联表单

与input隐式关联：直接将表单控件放到label标签内，这种情况下，label标签只能包含⼀个表单元素，如果包含多个只对第⼀个有效。

操作元素---样式属性

元素.style.属性='修改后的样式';（样式比较少）产生的为行内样式
元素.className='修改后的类名';会直接覆盖原来类名

案例：利用for循环在js中改变精灵图

<script>

var lis = document.querySelectorAll("li");

for (var i = 0; i < lis.length; i++) {

var index = 44 * i;

lis[i].style.backgroundPositionY = "-" + index + "px";

}

</script>

运行如下：

事件--焦点

获得焦点：onfocus

失去焦点：onblur

事件--鼠标经过和离开

onmouseover鼠标经过

onmouseout鼠标离开

属性操作

属性获取

元素.属性----元素本身自带属性
元素.getAttribute('属性')----主要针对程序员自定义属性（推荐）
H5新增：（ie11以上）元素.dataset.属性(data-后面的)/元素.dataset['属性'](data-后面的) ，如果自定义属性里面有多个-连接，则获取的时候采取驼峰命名eg：data-list-name--->listName

dataset是一个集合，里面存放了所有以data开头的自定义属性。

设置属性值

元素.属性='值' eg:div.className='navs';

元素.setAttribute('属性','值')----主要针对程序员自定义属性 eg:div.setAttribute('class','navs');

移除属性

元素.removeAttribute('属性')

H5规定自定义属性需要data-开头并赋值

eg：<div data-index='1'></div>

排他思想

同一组元素，想要某一个元素实现某种样式，要先排除其他人再设置样式的思想称为排他思想。

分为两步：

所有元素清除样式
给当前元素设置样式

节点操作

父子节点

节点至少拥有节点类型（nodeType）、节点名称（nodeName）、节点值（nodeValue）

父节点：parentNode----元素.parentNode得到的是离元素最近的父亲节点，如果找不到则返回null

子节点：childNodes----得到的所有子节点包括元素节点、文本节点（换行属于文本节点）等等（不推荐）firstchildren、lastchildren拿到的是第一个或者最后一个子节点不管文本节点还是元素节点。

children----得到的是所有的元素节点，只返回元素节点（推荐）firstElementChild、lastElementChild得到的是第一个或最后一个子元素节点（ie9以上才支持，存在兼容性）

实际开发：

兄弟节点

nextSibling得到的是下一个兄弟节点，包含元素节点和文本节点等

previousSibling得到的是上一个兄弟节点，包含元素节点和文本节点等

nextElementSibling/previousElementSibling得到的是下一个/上一个兄弟元素节点（ie9以上支持，存在兼容性问题）

解决兼容性：

节点的操作

1.创建节点

document.creatElement('')----innerHTML用的是拼接字符串的形式，creatElement创建新的元素再放到里面，速度快，效率更高，结构清晰document.write当文档流执行完毕，则会导致页面重绘（也就是当页面已经加载完成再执行该语句（比如绑定事件）会导致重新创一个html文件只有新添加的）

优化innerHTML（不采用拼接字符串，而采用数组形式拼接），效率更高！！！，结构稍微复杂

2.添加节点

父级.appendChild(子级) （后面添加）
父级.insertBefore(子级，指定元素) （前面添加）

操作如下：

3.删除节点
父级.removeChild(子级)

阻止链接跳转a href=“javascript:;”

4.复制节点

node.cloneNode(),如果括号里的参数为空或者false，则是浅拷贝（只复制标签，不复制里面内容）。推荐将括号里的参数写成true

案例---简单版发布留言

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

body {

padding: 100px;

}

textarea {

width: 200px;

height: 100px;

border: 1px solid pink;

outline: none;

resize: none;

}

ul {

margin-top: 50px;

}

li {

width: 300px;

padding: 5px;

background-color: rgb(245, 209, 243);

color: red;

font-size: 14px;

margin: 15px 0;

}

li a {

float: right;

}

</style>

</head>

<body>



<textarea name="" id=""></textarea>

<button>发布</button>

<ul></ul>

<script>

var btn = document.querySelector("button");

var textarea = document.querySelector("textarea");

var ul = document.querySelector("ul");

btn.onclick = function () {

if (textarea.value == "") {

alert("抱歉，您还没有输入内容，请输入内容~~");

}

var li = document.createElement("li");

li.innerHTML = textarea.value + "<a href='javascript:;'>删除</a>";

// 后面添加元素

// ul.appendChild(li);

// 前面添加元素

ul.insertBefore(li, ul.children[0]);

// 删除元素--要删除的是当前a所在的小li

var as = document.querySelectorAll('a');

for (var i = 0; i < as.length; i++) {

as[i].onclick = function () {

ul.removeChild(this.parentNode);

}

}

};

</script>

</body>

</html>

注册事件

传统(前面要加on)：.onclick----唯一性，同一个元素同一个事件只能设置一个函数，后面的会覆盖前面的

监听：.addEventListener('事件类型'，事件处理函数，可选参数（是一个布尔值，默认为false，如果为true则处于捕获阶段即从外到内，如果为false则处于冒泡阶段即从里到外）)

(ie9以上版本支持)（推荐）

有的事件没有冒泡阶段：

解决兼容性问题：

删除事件

传统方式：.οnclick=null;

监听注册方式：.removeEventListener()(参数同上面)

使用如下：

<style>

div {

width: 200px;

height: 200px;

background-color: aqua;

}

</style>

</head>

<body>



<div>1</div>

<div>2</div>

<script>

var divs = document.querySelectorAll('div');

// 传统方式

divs[0].onclick = function () {

alert('hi，傻狗');

divs[0].onclick = null;

}

// 监听方式

divs[1].addEventListener('click', fn);

// 这里不需要函数调用，把fn函数直接传进去

function fn() {

alert('傻狗');

divs[1].removeEventListener('click', fn);

}

</script>

</body>

事件对象

事件对象只有有了事件才会存在，它是一个形参,是系统给我们自动创建的，不需要我们传递参数。
事件对象我们可以自己命名比如event、evt....
事件对象是我们事件的一系列相关数据的集合，比如鼠标事件里面就包含了鼠标的相关信息，键盘事件里面就包含的键盘的相关信息
存在兼容性，ie6、7、8通过window.event。解决兼容性：e=e||window.event;

DOM事件流

分为捕获阶段（从外到内），当前目标阶段以及冒泡阶段（从内到外）。（ onclick 和 attachEvent 只能得到冒泡阶段）

如下：

target和this的区别

target返回的是触发（点击）事件的对象，ie6、7、8用的是srcElement，this返回的是绑定事件的对象

this在全局作用下指向全局对象window，在构造函数中eg：var fun=new Fun（）,this指向的是新开辟的空对象，只不过把对象赋给了fun，所以this就指向了fun（即实例对象）

解决兼容性：var target=e.target||e.srcElement；

如下：

<ul>

<li>123</li>

</ul>



<script>

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

ul.addEventListener('click', function (e) {

// 返回的是ul(绑定事件的对象)

console.log(this);

// 返回的是li(触发事件的对象)

console.log(e.target);

})

</script>

阻止默认行为也可以用return false，没有兼容性问题特点：return false后面的代码就不执行了，而且只限于传统模式即οnclick=function(){}的方法

事件委托

！！！原理：不是给每个子节点单独设置事件监听器，而是给父节点设置事件监听器，然后利用冒泡原理影响子节点（事件是有冒泡的，子节点会冒泡给父节点）

可以再通过e.target获得当前点击事件的对象。

如下：

<ul>

<li>傻狗</li>

<li>傻狗</li>

<li>傻狗</li>

<li>傻狗</li>

<li>傻狗</li>

</ul>

<script>

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

var lis = document.querySelectorAll('li');

ul.addEventListener('click', function (e) {

// alert('你个傻狗');

for (var i = 0; i < lis.length; i++) {

lis[i].style.backgroundColor = '';

}

e.target.style.backgroundColor = 'pink';

})

</script>

鼠标事件对象（MouseEvent）和键盘事件对象（KeyEvent）

键盘事件对象keyCode---返回的是该按键的ASCII码值（keyup和keydown不区分大小写）

keydown和keypress在文本框里面的特点：触发事件的时候，文字还没有落入文本框。

keyup是文字落入文本框的时候才触发。

BOM概述

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

对比：

全局作用于下，变量会自动变成window对象的一个属性函数会变成方法。

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

window对象常见事件

窗口加载事件：

window.οnlοad=function(){}/window.addEventListener('load',function(){})（当文档内容全部加载完（包括图片、css、flash等）才会触发该事件）如果写了多个该事件，只会以最后一个为准。

ie9以上支持（加载会更快）：doucument.addEventListener('DOMContentLoaded',function(){})是仅当DOM加载完（不包括flash、图片、css等等）就触发。适用于页面图片多的时候！！！！

调整窗口大小事件：

window.onresize（浏览器窗口大小变化时触发）

定时器：

window.setInterval(函数，间隔时间)---隔相应的间隔时间调用一次函数(重复执行)

window.setTimeout(函数，延迟时间)---延迟时间单位为毫秒，如果省略则默认为0可以省略window

这个函数可以直接写函数，也可以写函数名也可以'函数名()'

页面中定时器有很多，所以我们经常给定时器加标识符（名字）！！

用法如下：

<script>

// 直接写函数

setTimeout(function () {

console.log('嘿，傻狗来了');

}, 3000);

// 写函数名

function callback() {

console.log('pong~~爆炸了');

}

setTimeout(callback, 2000);

// 页面中定时器有很多，所以我们经常给定时器加标识符（名字）！！

var time1 = setTimeout(callback, 1000);

var time2 = setTimeout(callback, 2000);

</script>

停止定时器：

window.clearTimeout(定时器的名字),window可以省略

用法如下：

<button>停止按钮</button>

<script>

var btn = document.querySelector('button');

var timer = setTimeout(function () {

console.log('bong~你死了');

}, 5000)

btn.addEventListener('click', function () {

clearTimeout(timer);

})

</script>

window.clearInterval(定时器的名字 )

注意！！！定时器里面的this指向的是window

JS执行机制

JS是单线程（即同一个时间只能做一件事）

JS将任务分为同步任务（前一个任务结束了后一个才能执行）HTML5提出允许JS异步任务（回调函数）（同时做多个任务）

eg：

<script>
    console.log(1);
    setTimeout(function () {
      console.log(3);
    }, 0)
    console.log(2);
</script>

异步任务会提交给异步进程处理

同步任务执行完再到任务队列里找异步任务

执行栈到任务栏里获取异步任务再到执行栈里执行这个循环过程叫做事件循环

location对象

location也是window的一个属性，只不过返回的是一个对象

案例--实现页面跳转 eg：跳转到百度页面location.href = 'http://www.baidu.com';

先实现点击按钮之后跳转页面

实现五秒之后自动跳转到百度页面

<body>

<button>点击</button>

<div></div>

<script>

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

var btn = document.querySelector('button');

// 点击按钮之后跳转页面

btn.addEventListener('click', function () {

location.href = 'http://www.baidu.com';

})

// 实现五秒之后自动跳转到百度页面

var timer = 5;

// 防止刷新页面留白

time();

setInterval(time, 1000)

function time() {

if (timer == 0) {

location.href = 'http://www.baidu.com';

}

else {

div.innerHTML = '您将要在' + timer + '秒后跳转页面';

timer--;

}

}

</script>

</body>

案例--拿取其他页面的信息location.search

利用form表单域提交表单，action属性提交到index登录页面

第二个页面通过location.search获取数据

利用substr('起始位置',截取几个字符)去掉？

利用=把字符串分隔为数组split('=')

操作如下：

login页面：

  <form action="index.html">
    用户名：<input type="text" name="uname">
    <input type="submit">
  </form>

index登陆页面：

 <div></div>
  <script>
    console.log(location.search);//?uname=red
    var div = document.querySelector('div');
    // var params = location.search.substr(1);//uname=red

    // var cons = params.split('=');
    // div.innerHTML = cons[1] + '，恭喜您登陆成功！';
    var cons = location.search.split('=');
    div.innerHTML = cons[1] + '，恭喜您登陆成功！';
  </script>

navigator对象

.userAgent判断使用哪个浏览器，移动端还是pc端

代码如下：

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = ""; //手机端网址
}else{
window.location.href=""; //电脑端网址
}

history对象

与浏览器历史记录做交互，包括用户在访问过的URL

三大系列

元素偏移量offset系列

offset可以动态得到该元素的位置、大小（包含padding、border、width）等

.parentNode返回的是亲爸爸

.offsetParent返回的是带定位的爸爸,如果找不到则返回body

offset与style的区别：

client系列

立即执行函数：不需要调用，立马能够自己执行的函数

写法：（function(){})()或者（function(){}()）

两个立即执行函数要用；隔开。主要作用：创建了一个独立的作用域，避免了命名冲突问题

scroll系列

scroll是真正内容的大小

页面被卷去头部----window.pageYOffset

鼠标经过：mouseenter和mouseover区别

mouseover经过自身盒子触发，经过子盒子也会触发。
mouseenter只经过自身盒子触发（mouseenter不会冒泡与mouseleave搭配使用）

动画

原理：通过定时器setInterval（）不断移动盒子

元素必须加定位！！！！

动画函数封装

两个参数：动画对象和移动到的距离

如下：

function move(obj, target) {

var time = setInterval(function () {

if (obj.offsetLeft >= target) {

clearInterval(time);

}

obj.style.left = obj.offsetLeft + 5 + 'px';

}, 30)

}

// 函数调用

move(div, 500);

因为每调用一次就会开辟一个空间存放定时器，并且定时器的名字都为time，因此需要优化：给不同元素记录不同的定时器

修改如下：

function move(obj, target) {

// 给obj添加time属性，不会多次开辟空间，且不同元素添加不同定时器

obj.time = setInterval(function () {

if (obj.offsetLeft >= target) {

clearInterval(obj.time);

}

obj.style.left = obj.offsetLeft + 5 + 'px';

}, 30)

}

// 函数调用

move(div, 500);

缓慢动画

公式：（目标值-现在位置）/10

可以让每次移动距离越来越小，但是步长会出现小数问题（即最后到达的位置不是我们设置的），因此如果为正的我们需要将步长值向大取整，为负我们需要往小取整。所以公式修改为：

var step = (target - obj.offsetLeft) / 10;

step = step > 0 ? Math.ceil(step) : Math.floor(step);

停止条件：当前盒子现在位置等于目标位置时就停止定时器

匀速动画

公式：当前位置+固定值

动画函数添加回调函数

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

 if (obj.offsetLeft == target) {

          clearInterval(obj.time);
          if(callback)
          {
            callback();
          }
        }

要将动画函数封装到单独的JS文件，使用时要引入JS文件<script src=''></script>

节流阀：当上一个动画执行完毕的时候，再执行下一个动画，防止按钮连续点击造成播放过快

使用：

var flag=true;

if(flag){

flag=false;

执行代码

}

利用动画函数中的回调函数（，，function（）{flag=true;}）

滚动窗口到文档中的固定位置

window.scroll（x，y）---x、y不需要单位

移动端触屏事件

触摸事件对象（TouchEvent）

当手指离开屏幕，就没有touches和targetTouches，但是会有changedTouches

因为我们一般都触摸元素，所以重点记忆targetTouches

touchmove事件会触发滚动屏幕，所以要阻止滚动屏幕的默认行为e.preventDefault()

classList属性---返回元素类名

添加类名---element.classList.add('类名');

移除类名---element.classList.remove('类名');

切换类名---element.classList.toggle('类名');(原来有那就移除，原来没有那就新加)

解决移动端click延时300ms问题

因为在移动端会等待300ms看是否有缩放所以点击不能立马执行。

禁止缩放-----在html的视口标签添加<meta name="viewport"content="user-scalable=no">
利用touch事件封装解决延迟：原理--手指触摸屏幕，记录当前时间，手指离开屏幕，用离开事件-触摸事件，如果事件<150ms，并且没有滑动屏幕，则为点击
利用fastclick插件解决

3.https://github.com/ftlabs/fastclick将代码复制到js文件里

返回链接刚打开的样子：

在js中复制该方法，如下：

移动端常用插件

框架：大而全，一整套解决方案

插件：小而专一，某个功能的解决方案

Swiper插件

地址：https://www.swiper.com.cn/

使用：

1.下载后引入相关样式的js、css文件（min就是压缩版的）
2.修改相关html样式和css
3.添加js代码

详细教程可以：

参数介绍可以：

superslide插件

地址：http://www.superslide2.com/

iscroll：https://github.com/cubiq/iscroll

本地存储

数据存储在用户浏览器中，只能存储字符串，可以将对象JSON.stringify()编码后存储

本地存储--window.sessionStorage

使用如下：

查询存储的数据：

本地存储--localStorage

使用同上