JavaScript Web API：DOM操作全解析

En^_^Joy2026-03-18 11:05

文章目录

  • 一、DOM操作（内容、属性、样式）
  • 二、节点操作
    • [2.1 节点获取（父子兄弟节点）](#2.1 节点获取（父子兄弟节点）)
    • [2.2 节点的增加与删除](#2.2 节点的增加与删除)
  • 三、事件
    • [3.1 事件监听（绑定）](#3.1 事件监听（绑定）)
    • [3.2 解绑事件](#3.2 解绑事件)
    • [3.3 性能提升（防抖与节流）](#3.3 性能提升（防抖与节流）)
  • 四、事件流
    • [4.1 捕获、冒泡、阻止](#4.1 捕获、冒泡、阻止)
    • [4.2 事件委托（父事件操作子元素）](#4.2 事件委托（父事件操作子元素）)
    • [4.3 其他事件（资源加载、界面滚动、页面尺寸）](#4.3 其他事件（资源加载、界面滚动、页面尺寸）)
  • 五、对象
    • [5.1 环境对象（this）](#5.1 环境对象（this）)
    • [5.2 this切换（call、apply、bind）](#5.2 this切换（call、apply、bind）)
    • [5.3 Window对象（路由、回退、屏幕等）](#5.3 Window对象（路由、回退、屏幕等）)
  • 六、本地存储
  • 七、M端事件（移动端）

Web API基本认知

JavaScript Web API 是浏览器提供的一组接口，用于扩展 JavaScript 的功能，使其能够与浏览器环境、用户设备或网络进行交互。这些 API 覆盖了从 DOM 操作到多媒体处理、从网络请求到硬件访问的广泛功能

JS执行机制

JavaScript语言的一大特点就是单线程，同一个时间只能做一件事。JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样会导致如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步。
同步 ：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步：执行一个任务的同时执行其他任务
同步任务 ：同步任务都在主线程上执行，形成一个执行栈，从上到下逐个执行。
异步任务：JS的异步是通过回调函数实现的。（普通事件click/resize、资源加载load/error、定时器setInerval/setTimeout）异步任务相关添加到任务队列中(任务队列也称为消息队列)。
1.先执行执行栈中的同步任务。

2.异步任务放入任务队列中。

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

javascript 复制代码 
console.log(1)
let timer = setTimeout(function() {
    console.log(3)
}, 0)
console.log(2)
// 输出：1  2  3

一、DOM操作（内容、属性、样式）

DOM 概述

DOM（Document Object Model，文档对象模型）是浏览器提供的用于操作 HTML 和 XML 文档的编程接口。它将文档解析为树状结构，每个节点对应文档中的一个部分（如元素、属性、文本等），允许开发者通过 JavaScript 动态修改内容、结构和样式

DOM 树结构

DOM 将文档表示为节点树，包含以下主要节点类型：
文档节点 （Document）：整个文档的根节点。
元素节点 （Element）：HTML 标签（如 <div>、<p>）。
属性节点 （Attr）：元素的属性（如 class、id）。
文本节点（Text）：元素内的文本内容。

DOM元素获取

通常使用CSS方式获取DOM元素，也有其他方式，比较少用，比如ID、标签、类名等

CSS选择器参考：https://blog.csdn.net/weixin_46287157/article/details/156366085?spm=1011.2415.3001.5331

函数 说明
document.querySelector('css选择器') 选择匹配的第一个元素 （返回值是一个HTMLElement对象 没匹配到则为null）
document.querySelectorAll('css选择器') 选择匹配的所有元素 （返回值是一个NodeList 对象集合(伪数组没有pop push方法)）
document.getElementById('id') 根据 ID 获取第一个元素
document.getElementByTagName('div') 根据 标签 获取元素
document.getElementByClassName('class') 根据 类名 获取元素
html 复制代码 
<body>
    <!-- 页面主体内容 -->
    <div class="box">abc</div>

    <script>
        // 返回值是一个HTMLElement对象  没匹配到则为null
        const box = document.querySelector('.box')
    </script>
</body>

操作DOM元素内容

获取DOM对象之后，可以通过该对象对其进行内容操作，比如获取内容、修改内容
DOM对象.innerText：纯文本，不解析标签（比如内容中加<strong>xxx</strong>则不会生效）

javascript 复制代码 
const box = document.querySelector('.box')
//获取当前内容
console.log(box.innerText)
// 修改文字内容  <strong>不生效，为纯文本展示
box.innerText = '<strong>hello</strong>'

DOM对象.innerHTML：可解析标签（比如内容中加<strong>xxx</strong>则生效）

javascript 复制代码 
const box = document.querySelector('.box')
// 获取文字内容
console.log(box.innerHTML)
// 修改文字内容  解析标签 <strong>生效
box.innerText = '<strong>hello</strong>'

操作DOM元素属性

通过DOM对象可以修改属性，比如通过 src 更换图片，常见属性有href、tiitle、src等

javascript 复制代码 
// 获取元素
const pic = document.querySelector('img')
// 操作元素
pic.src = './xxx/xxx.jpg'
pic.title = 'title'

操作DOM元素CSS样式

通过DOM对象修改CSS样式

javascript 复制代码 
// 获取元素
const div = document.querySelector('.box')
// style属性  修改样式
div.style.width = '100px'
div.style.backgroundColor = 'red'   // 多组单词采取小驼峰命名

操作DOM元素类名

通过修改类名(className)控制CSS样式

html 复制代码 
<body>
    <!-- 页面主体内容 -->
    <div class="a">abc</div>

    <script>  
        // 获取元素
        const div = document.querySelector('div')
        // 添加/修改  类名      操作会覆盖之前的
        div.className = 'box'
    </script>
</body>

上面方法会存在覆盖之前的情况，如果需要保留之前的，或者移除某一个类名，可以通过classList操作类来控制CSS

html 复制代码 
<body>
    <!-- 页面主体内容 -->
    <div class="a">abc</div>

    <script>  
        // 获取元素
        const div = document.querySelector('div')
        // 添加  类名
        div.classList.add('box')
        // 删除  类名
        div.classList.remove('box')
        // 切换  类名   没有就加上，有就删除
        div.classList.toggle('box')
    </script>
</body>

操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框。正常的有属性有取值的跟其他的标签属性没有任何区别

html 复制代码 
<body>
    <!-- 输入框 -->
    <input type="text" value="内容">

    <script>  
        // 获取元素
        const uname = document.querySelector('input')
        // 获取值
        console.log(uname.value)
        // 修改值
        uname.value = 'hello'
        // 设置不可见
        uname.type = 'password'
    </script>
</body>

表示是否选中、是否禁用，常用的有：disabled、checked、selected

html 复制代码 
<body>
    <!-- 勾选框 -->
    <input type="checkbox" name="" id="" checked>

    <script>  
        // 获取元素
        const uname = document.querySelector('inpot')
        // 获取选中状态
        console.log(uname.checked)
        // 修改选中状态
        uname.checked = true
        // 设置不可见
        uname.type = 'password'
    </script>
</body>

自定义属性

标准属性 ：标签天生自带的属性比如class id title等,可以直接使用点语法操作比如:disabled、checked、selecte
自定义属性：在html5中推出了专门的data-自定义属性，在标签上一律以data-开头，在DOM对象上一律以dataset对象方式获取

html 复制代码 
<body>
    <div data-a="hello" data-b="world" >123</div>

    <script>  
        // 获取元素
        const div = document.querySelector('div')
        console.log(div.dataset.a)   // hello
        console.log(div.dataset.b)   // world
    </script>
</body>

二、节点操作

DOM节点操作是JavaScript与网页交互的核心，主要包括获取、创建、修改和删除节点等操作。通过DOM API可以动态改变页面内容和结构

2.1 节点获取（父子兄弟节点）

获取节点

document.querySelector()：获取单个节点
document.querySelectorAll()：获取节点列表

javascript 复制代码 
const div = document.querySelector('div')

父节点 ：使用元素.parentNode()获取

html 复制代码 
<body>
    <div class="par">
        <div class="son"></div>
    </div>
    <script>
        const son = document.querySelector('.son')
        console.log(son.parentNode())
    </script>
</body>

子节点
childNodes()：查找所以子节点，包括文本节点（空格、换行）、注释节点等
chidren(属性)：仅获得所有元素节点，返回的还是一个伪数组

html 复制代码 
<body>
    <div class="par">
        <div class="son"></div>
    </div>
    <script>
        const par = document.querySelector('.par')
        console.log(par.chidren('.son'))
    </script>
</body>

兄弟节点
previousElementSibling：上一个兄弟
nextElementSibling：下一个兄弟

html 复制代码 
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        const li2 = document.querySelector('ul li:nth-child(2)')
        // 上一个兄弟
        console.log(li2.previousElementSibling)
        // 下一个兄弟
        console.log(li2.nextElementSibling)
    </script>
</body>

2.2 节点的增加与删除

增加节点

使用 document.createElement() 方法创建新的元素节点

使用 document.createTextNode() 创建文本节点

通过 appendChild() 将节点插入到指定父节点的子节点列表末尾

使用 insertBefore() 在指定子节点前插入新节点

html 复制代码 
<body>
    <div class="box">

    </div>
    <script>
        const box = document.querySelector('.box')
        // 创建节点
        const div = document.createElement('div')
        // 节点添加内容
        div.innerHTML = "hello"
        // 插入到父元素的最后  
        box.appendChild(div)
        
        // 插到前面使用insertBefore(插入的元素， 哪个元素前面)
        // 插入最前面
        // box.insertBefore(div, box.children[0])
    </script>
</body>

克隆节点 ：复制一个原有的节点，把复制的节点放入到指定的元素内部
元素.cloneNode(布尔值)。传true时复制后代，否则不复制后代，默认false

html 复制代码 
<body>
    <div class="box">
        <div>1</div>
    </div>
    <script>
        const box = document.querySelector('.box')
        const box1 = box.children[0].cloneNode(true)

        box.appendChild(box1)

    </script>
</body>

删除节点

要删除元素必须通过父元素删除

父元素.removechild(要删除元素)

html 复制代码 
<body>
    <div class="box">
        <div>1</div>
    </div>
    <script>
        const box = document.querySelector('.box')
        box.remobeChild(box.children[0])
    </script>
</body>

三、事件

JavaScript 事件是用户或浏览器与网页交互时触发的动作，例如点击、鼠标移动、键盘输入等。事件处理是前端开发的核心功能之一，用于实现动态交互

3.1 事件监听（绑定）

事件监听三要素：事件源、事件类型、事件调用函数
事件监听语法 ：

DOM L0版本：对象名.on事件 = function(){}

DOM L2版本： 对象名.addEventListenter(事件类型, 处理函数) （推荐 ）
区别：on方式会被覆盖，addEventListenter可绑定多次，拥有多个事件

html 复制代码 
<body>
    <button id="btn2">按钮</button>
    <script>
        // 获取元素
        const btn2 = document.querySelector('btn2')
        // 事件绑定  点击触发
        btn2.addEventListener('click',function(){
            alert('提示框')
        })
    </script>
</body>

事件类型

鼠标事件 说明
click 鼠标单击
dblclick 鼠标双击
mousedown 按下鼠标
mouseup 鼠标弹出来
mousemove 鼠标移动
mouseover 鼠标进入（进入子元素会有冒泡效果，即重复触发）
mouseout 鼠标离开（进入子元素会有冒泡效果，即重复触发）
mouseenter 鼠标进入（无冒泡效果）
mouseleave 鼠标离开（无冒泡效果）
焦点事件 说明
focus 表单元素获得焦点（提示信息）
blur 表单元素失去焦点（是否合法）
键盘事件 说明
keypress 按键按键
keydown 按键按下
keyup 按键弹起
文本事件 说明
input 输入事件
change 文本框中的文本改变了
submit 表单将要提交
load 加载完毕
resize 改变浏览器窗口的大小

获取事件对象

JavaScript中的事件对象是当事件触发时自动创建的，包含与事件相关的属性和方法。通过事件对象可以获取事件的详细信息，如触发元素、事件类型、鼠标位置等
div.addEventListener('click',function(event){})中的event是事件对象

事件对象常用属性 含义
type 事件类型
clientX/clientY 光标相对浏览器可见窗口左上角的位置
offsertX/offsetY 光标相对当前DOM元素左上角的位置
key 用户按下的键盘键值（不提倡可以Code）
javascript 复制代码 
<body>
    <div class="box"></div>
    <script>
        // 获取元素
        const div = document.querySelector('.box')
        // 事件绑定   event 为事件对象
        div.addEventListener('click',function(event){
            console.log(event.clientX)
        });
    </script>
</body>

3.2 解绑事件

方式一：on事件方式，直接使用null覆盖偶就可以实现事件的解绑

html 复制代码 
<body>
    <button class="btn">按钮</button>
    <script>
        // 获取元素
        const btn = document.querySelector('.btn')
        
        // 绑定事件
        btn.onclick = function () {}
        // 解绑事件
        btn.onclick = null
    </script>
</body>

方式二：使用addEventListener方式

语法格式：removeEventListener(事件类型，事件处理函数，[获取捕获或者冒泡阶段])

html 复制代码 
<body>
    <button class="btn">按钮</button>
    <script>
        // 获取元素
        const btn = document.querySelector('.btn')
        function func() {
            alert('单击')
        }

        // 事件绑定
        btn.addEventListener('click', func)
        // 事件解绑
        btn.removeEventListener('click', func)
    </script>
</body>

3.3 性能提升（防抖与节流）

防抖（执行最后一次）

防抖的核心在于延迟执行，在事件被触发后等待一段时间再执行回调。如果在这段时间内事件再次被触发，则重新计时。适用于输入框实时搜索、窗口大小调整等场景
举例：鼠标在盒子上移动，里面的数字就会变化+1

html 复制代码 
<body>
    <!-- 页面主体内容 -->
    <div class="box">abc</div>

    <script src="./loadsh.main.js"></script>
    <script>
        const box = document.querySelector('.box')
        let i = 1
        function mouseMove() {
            box.innerHTML = i++
        }
        // 未使用防抖时  触发的很频繁
        // box.addEventListener('mousemove', mouseMove)
        
        // 增加防抖  鼠标停止 500ms 之后，触发
        // 方法一：利用lodash库实现
        // box.addEventListener('mousemove', _.debounce(mouseMove, 500))
        
        // 方法二：手写防抖函数   核心：利用setTimeout定时器
        function debounce(fn, t) {
            let timer
            return function (){
                if (timer) clearTimeout(timer)
                timer = setTimeout(function(){
                    fn()
                }, t)
            }
        }
        box.addEventListener('mousemove', debounce(mouseMove, 500))
    </script>
</body>

节流- throttle（执行最第一次）

节流的核心在于固定频率执行，无论事件触发多么频繁，回调函数只会按指定时间间隔执行一次。适用于滚动事件、鼠标移动等场景
举例：鼠标在盒子上移动，不管移动多少次，每隔500ms才+1

html 复制代码 
<body>
    <!-- 页面主体内容 -->
    <div class="box">abc</div>

    <script src="./loadsh.main.js"></script>
    <script>
        const box = document.querySelector('.box')
        let i = 1
        function mouseMove() {
            box.innerHTML = i++
        }
        // 未使用节流  触发的很频繁
        box.addEventListener('mousemove', mouseMove)
        
        // 增加节流  不管移动多少次，每隔500ms才+1
        // 方法一：利用lodash库实现
        box.addEventListener('mousemove', _.throttle(mouseMove, 500))
        // 方法二：手写防抖函数   核心：利用setTimeout定时器
        function throttle(fn, t) {
            let timer
            return function (){
                if (!timer) {
                    timer = setTimeout(function(){
                        fn()
                        // 情况定时器
                        timer = null
                    }, t)
                }
            }
        }
        box.addEventListener('mousemove', throttle(mouseMove, 500))
    </script>
</body>

四、事件流

4.1 捕获、冒泡、阻止

事件捕获和冒泡是DOM事件传播的两个阶段，描述了事件从触发元素到文档根节点或反向传播的路径
事件捕获 ：事件从根节点向下传递到目标元素
事件冒泡：事件从目标元素向上传递到根节点
事件传播的三个阶段

1、捕获阶段 ：事件从window向下传递到目标元素的父级。

2、目标阶段 ：事件到达目标元素本身。

3、冒泡阶段：事件从目标元素向上冒泡到window
监听事件的方式 ：元素.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)

通过addEventListener的第三个参数控制监听阶段，true为捕获阶段 ，false为冒泡阶段（默认）

javascript 复制代码 
// 捕获阶段触发（true）
element.addEventListener('click', handler, true);
// 冒泡阶段触发（默认false）
element.addEventListener('click', handler, false);

比如下面代码

第三个参数传入true，点son区域，则为冒泡阶段 从外到里逐个执行事件（执行father对应事件 -> 执行son对应事件）

第三个参数传入false，点son区域，则为捕获阶段（默认从里到外，执行son对应事件 -> 执行father对应事件）

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        // 获取元素
        const father = document.querySelector('.father')
        const son = document.querySelector('.son')
        // 事件绑定
        father.addEventListener('click', function() {
            alert("father")
        }, true);
        son.addEventListener('click', function() {
            alert("son")
        }, true);

    </script>
</body>
</html>

阻止冒泡

默认就是冒泡模式，所以子级事件触发时可能会触发父级事件，这时需要阻止冒泡，即阻止父级事件的发生

语法：事件对象.stopPropagation()

javascript 复制代码 
// 获取元素
const father = document.querySelector('.father')
const son = document.querySelector('.son')
// 事件绑定
father.addEventListener('click', function() {
    alert("father")
});
son.addEventListener('click', function(event) {
    alert("son")
    // 阻止冒泡
    event.stopPropagation()
});

我们某些情况下需要阻止默认行为的发生，比如阻止链接的跳转，表单域跳转（比如信息填写错误阻止提交）

语法：e.preventDefault()

html 复制代码 
<body>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交">
    </form>
    <script>
        // 获取元素
        const form = document.querySelector('form')

        // 绑定事件
        form.addEventListener('click', function(e) {
            // 阻止表单默认提交行为
            e.preventDefault()
        })
    </script>
</body>

4.2 事件委托（父事件操作子元素）

事件委托是利用事件流的特征解决一些开发需求的知识技巧。
优点 ：减少注册次数，可以提高程序性能
原理 ：事件委托其实是利用事件冒泡的特点（给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件）
实现 ：事件对象.target.tagName可以获得真正触发事件的元素
举例：在点击子元素时，通过父元素的事件绑定，对子元素进行修改等操作

html 复制代码 
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        // 获取元素
        const ul = document.querySelector('ul')

        // 绑定事件
        ul.addEventListener('click', function(e) {
            e.target.style.color = 'red'
        })
    </script>
</body>

4.3 其他事件（资源加载、界面滚动、页面尺寸）

页面加载事件

加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件

比如有些时候需要等页面资源全部处理完了做一些事情。

比如老代码喜欢把script写在head中，这时候直接找dom元素找不到，需要等页面资源全部处理完在执行

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
load：监听页面所有资源加载完毕

如果整个界面所以资源，则给window 添加load事件

如果某个图片或什么资源，则给对应对象添加load事件

html 复制代码 
<body>
    <button>按钮</button>
    <img src="xxx" alt="xxx">
    <script>
        // 等待页面所有资源加载完毕 执行  （window）
        window.addEventListener('load', function() {
            console.load("全部加载完成")
        })

        // 等待图片加载完毕 执行  （window）
        const img = document.querySelector('img')
        img.addEventListener('load', function(e) {
            console.log("图片加载完成")
        })
    </script>
</body>

DOMContentLoaded：当初始的HTML文档被完全加载和解析完成后执行，而无需等待样式表、图像等完全加载

javascript 复制代码 
// 等待页面HTML文档加载完毕， 无需等待样式表、图像等完全加载
document.addEventListener('DOMContentLoaded', function () {
    console.load("HTML文档加载完成")
})

元素滚动事件

scroll：滚动条在滚动的时候持续触发的事件

javascript 复制代码 
// 监听整个页面滚动  window可以换成其他的
window.addEventListener('scroll', function () { 
    console.log(document.ducumentElement.scrollTop)  // 头部滚动多少
    // 回到顶部
    document.documentElement.scrollTop = 0
    // 同上  （x, y）坐标
    window.scrollTo(0, 0)   
})

可以通过scrollLeft、scrollTop获取被卷去的大小；获取元素内容往左、往上滚出去看不到的距离；这两个值是可读写的

javascript 复制代码 
// 监听整个页面滚动
div.addEventListener('scroll', function () {
    console.log(div.scrollTop)
})

页面尺寸事件

resize：窗口尺寸改变的时候触发事件

属性：clientWidth、clientHeight

javascript 复制代码 
window.addEventListener('resize', function () {
    console.load("页面大小变化")

    const div = document.querySelector('div')
    console.log(div.clientWidth)
})

元素尺寸与位置

可以Javascript的方式获取元素在页面中的位置，用来做对应的事情
element.getBounndingClientRect()：返回元素的大小及其相对于视口的位置

属性 作用 说明
scrollLeft、scrollTop 被卷去的头部和左侧 配合页面滚动来用，可读写
clientWidth、clientHeight 获得元素宽度和高度 不包含border,margin，滚动条用于js获取元素大小，只读属性
offsetWidth、offsetHeight 获得元素宽度和高度 包含border、padding，滚动条等，只读
offsetLeft、offsetTop 获取元素距离自己定位父级元素的左、上距离 获取元素位置的时候使用，只读属性
javascript 复制代码 
window.addEventListener('resize', function () {
    console.load("页面大小变化")

    const div = document.querySelector('div')
    // 检测盒子的位置最近一级带有定位的祖先元素
    console.log(div.offsetLeft)
})

五、对象

5.1 环境对象（this）

在 JavaScript 中，this 是一个关键字，指向当前执行代码的上下文对象。它的值取决于函数的调用方式，而非定义时的位置，因此具有动态绑定的特性
默认绑定：当函数独立调用时（非对象方法或显式绑定），this 默认指向全局对象（浏览器中为 window，Node.js 中为 global）

javascript 复制代码 
function func() {
    console.log(this)   // Window对象
}
func()   // 相当于 window.func()

const x = 1
console.log(x)  // 相当于 window.console.log(x)
alert('ok')     // 相当于 window.alert('OK')

隐式绑定 ：当函数作为对象的方法调用时，this 指向调用该方法的对象

可以通过this修改样式属性

javascript 复制代码 
<body>
    <button>按钮</button>
    <script>
        // 获取元素
        const btn = document.querySelector('button')
        // 事件绑定
        btn.addEventListener('click', function() {
            console.log(this)  // 按钮 对象  相当于btn
            this.style.color = 'red'
        });
    </script>
</body>

5.2 this切换（call、apply、bind）

call()

fun.call(thisArg, arg1, arg2,...)
thisArg ：在fun函数运行时指定的this值
arg1，arg2 ：传递的其他参数

返回值就是函数的返回值，因为它就是调用函数

javascript 复制代码 
const obj = {
   uname: 'Tony'
}
function func(data) {
    consoole.log(this)  // obj
    this.uname = data
}
func.call(obj, "Jack")

apply()

fun.apply(thisArg, [argsArray])
thisArg ：在fun函数运行时指定的this值
argsArray ：传递的值，必须包含在数组里面

返回值就是函数的返回值，因为它就是调用函数

因此apply主要跟数组有关系，比如使用Math.max()求数组的最大值

javascript 复制代码 
const obj = {
    result: 0
}
function func(x, y) {
    this.result = x + y  // obj.result
}
func.apply(obj, [1, 2])

bind()

不会调用函数。但是能改变函数内部this指向
fun.bind (thisArg, argl, arg2,...)
thisArg ：在fun函数运行时指定的this 值
arg1，arg2 ：传递的其他参数

返回由指定的this值和初始化参数改造的原函数拷贝(新函数)

因此当我们只是想改变this指向，并且不想调用这个函数的时候，可以使用bind，比如改变定时器内部的this指向.

javascript 复制代码 
const obj = {
    result: 0
}
function func() {
    console.log(this)  // obj
}
// 只改变obj  但不执行
const fun = func.bind(obj)
fun()

5.3 Window对象（路由、回退、屏幕等）

window对象是JavaScript中的全局对象，代表浏览器窗口或框架。它提供了与浏览器窗口交互的方法和属性，同时也是所有全局变量和函数的容器，定义的所有全局作用域中的变量、函数都会变成window对象的属性和方法，window对象下的属性和方法调用的时候可以省略window

属性 含义
window.document 当前窗口的文档对象
window.location 包含当前URL信息
window.navigator 浏览器相关信息
window.screen 屏幕相关信息
window.history 浏览器历史记录
window.innerHeight/innerWidth 窗口内部尺寸
方法 含义
alert()/confirm()/prompt() 显示对话框
setTimeout()/clearTimeout() 定时器操作
setInterval()/clearInterval() 间隔定时器
open()/close() 打开/关闭窗口
scrollTo()/scrollBy() 滚动控制
javascript 复制代码 
const box = document.querySelector('.box')   // document 等价于 window.document
alert("hello")  // 等价于 window.alert("hello")

location对象（URL相关）

location的数据类型是对象，它拆分并保存了URL地址的各个组成部分

常用属性 含义
href 完整的URL地址，对其赋值时用于地址的跳转
search URL地址中问号后面的内容
hash URL地址#后的内容
reload(true) 刷新当前页面，传参true时强制刷新
javascript 复制代码 
console.log(location)
// 对其修改实现调整
location.href = 'https://www.baidu.com'

navigator对象（浏览器信息）

avigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

常用属性 含义
userAgent 检测浏览器的版本及平台
javascript 复制代码 
// 匿名函数
!(function () {
    const userAgent = navigator.userAgent

    const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
    const iphone = userAgent.match(/(iPhone\sOS)\s([\d.]+)?/)
    if (android || iphone) {
        console.log(1)
    }
})();

history对象（前进、回退）

history的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

方法 说明
back() 后退
forward() 前进
go(参数) 前进后退功能参数如果是1前进1个页面如果是-1后退1个页面
javascript 复制代码 
// 后退一步
history.back()  // history.go(-1)
// 前进一步
history.forward()  // history.go(1)

六、本地存储

页面访问时，可以把一些信息在我们浏览器本地进行存储

localStorage

存储的数据没有过期时间，除非手动清除。适合长期保存用户偏好设置或登录状态
简单数据存储与读取

javascript 复制代码 
// 存储数据  (没有则新增，有则修改)
localStorage.setItem("name", "Tony")
// 取值
localStorage.getItem("name")
// 删除
localStorage.removeItem("name")
// 清空所有数据
localStorage.clear()

复杂数据存储与读取需要使用JSON.stringify()和JSON.parse()进行数据转换

javascript 复制代码 
const people = {
   'name': 'Tony',
    'age': 18
}
// 存储数据  (没有则新增，有则修改)
localStorage.setItem("people", JSON.stringify(people))
// 取值
JSON.parse(localStorage.getItem("people"))

sessionStorage

数据仅在当前会话期间有效，关闭浏览器标签页后自动清除。适合临时保存表单数据或页面状态

javascript 复制代码 
sessionStorage.setItem('key', 'value')
let data = sessionStorage.getItem('key')

Cookie

可通过设置过期时间控制生命周期，但存储容量较小（约4KB）。需注意安全性（HttpOnly、Secure等属性）。

javascript 复制代码 
document.cookie = 'key=value; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/'

七、M端事件（移动端）

移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件)，Android和I0S都有。

touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔

)对屏幕或者触控板操作。

触屏touch事件 说明
touchstart 手指触摸到一个DOM元素时触发
touchmove 手指在一个DOM元素上滑动时触发
touchend 手指从一个DOM元素上移开时触发
相关推荐
m0_743297422 小时前
嵌入式LinuxC++开发
开发语言·c++·算法
咸鱼老弟2 小时前
AI时代，告别焦虑，前端工程师的心态转变
前端·程序员
UXbot2 小时前
APP原型生成工具测评
android·前端·人工智能·低代码·ios·开发·app原型
代码改善世界2 小时前
【C++ 初阶】命名空间 / 输入输出 / 缺省参数 / 函数重载
开发语言·c++
刘宇琪2 小时前
如何在大型前端项目中有效管理 TypeScript 的类型复用与共享？
前端
代码探秘者2 小时前
【大模型应用】2.RAG详细流程
java·开发语言·人工智能·后端·python
阿奇__2 小时前
前端模块化指南：CJS 与 ESM 的区别与混用
前端
小小怪7502 小时前
高性能密码学库
开发语言·c++·算法
北寻北爱2 小时前
面试篇-webpack+vite
前端
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03OpenClaw 使用和管理 MCP 完全指南04UV安装并设置国内源05OpenClaw Control UI安全上下文访问配置06OpenClaw macOS 完整安装与本地模型配置教程（实战版）07本地部署 OpenClaw + DeepSeek-R1 完全指南08Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services09小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南