JavaScript Web API-优快云博客

DOM基本操作

什么是DOM

Web API 就是使用 JS 去操作 html 和浏览器，分为：DOM (文档对象模型)、BOM（浏览器对象模型）
DOM（Document Object Model，文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
将 HTML 文档以树状结构直观的表现出来称之为文档树或 DOM 树，文档树直观的体现了标签与标签之间的关系，DOM对象是浏览器根据html标签生成的JS对象，DOM的核心思想是把网页内容当做对象来处理，Document是 DOM 里提供的一个对象，提供是用来访问和操作网页内容的属性和方法
在这里插入图片描述

获取DOM对象

查找元素DOM元素就是利用 JS 选择页面中标签元素，可以根据CSS选择器来获取DOM元素

<!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>
        .box {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box">123</div>
    <div class="box">456</div>
    <p id="nav">nav</p>
    <ul>
        <li>测试1</li>
        <li>测试2</li>
        <li>测试3</li>
    </ul>
    <script>
        // 1.获取匹配的第一个元素 querySelector 使用css选择器
        const box1 = document.querySelector('div')
        const box2 = document.querySelector('.box')
        console.log(box);
        const nav = document.querySelector('#nav')
        console.dir(nav)
        const li = document.querySelector('ul li:first-child')
        console.log(li);

        // 2.获取多个元素 伪数组 有长度有索引号，但是没有 pop push 方法
        const lis = document.querySelectorAll('ul li')
        console.log(lis);

        for (let i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        
    </script>
</body>
</html>

也有其他获取DOM元素的方式

// 根据ID获取一个元素
document.getElementById('nav')
// 根据标签获取一类元素
document.getElementsByTagName('div')
// 根据 类名获取元素
document.getElementsByClassName('box')

操作元素内容

元素innerText 属性：将文本内容添加/更新到任意标签位置，显示纯文本，不解析标签
元素.innerHTML 属性：将文本内容添加/更新到任意标签位，会解析标签，多标签建议使用模板字符

//1.获取元素
const box = document.querySelector('.box')
// 2.修改文字内容 innerText
box.innerText = '123'
// 3.修改文字内容 innerHTML
box.innerHTML = '<i>123</i>'

操作元素属性

以通过 JS 设置/修改标签元素属性，比如通过 src更换图片
常见的属性包括： href、title、src 等
语法：

// 对象.属性 = 值
const img = document.querySelector('img')
img.src = 'abc'

元素样式属性

const div = document.querySelector('div')
//1. style
div.style = 'width: 100px; height: 50px; background-color:pink'
div.style.width = '300px'
div.style.height = '100px'
div.style.backgroundColor = 'pink' // 多组单词采取驼峰命名
// 2.类名
div.className = 'box'
// 3.classList
div.classList.add('box')
div.classList.remove()
div.classList.toggle()

表单元素属性

// 获取: DOM对象.属性名
// 设置: DOM对象.属性名 = 新值
const uname = document.querySelector('input')
console.log(uname.value);
uname.value = 'david'
console.log(uname.type);
// uname.type = 'password'
uname['type'] = 'password'

自定义属性
在html5中推出了自定义属性，在标签上以data-开头，在DOM对象中以dataset获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div data-id="1" data-spm="a">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

    <script>
        const box = document.querySelector('div')
        console.log(box.dataset);
    </script>
    
</body>
</html>

节点操作

DOM树里每一个内容都称之为节点
节点的类型包括：元素节点、属性节、文本节点
在这里插入图片描述

// 父节点查找
子元素.parentNode // 所有类型节点
子元素.parentElement //只返回元素节点的父元素

// 子节点查找
父元素.childNodes // 所有类型节点
父元素.children // 仅元素节点 


// 兄弟关系查找
元素.nextElementSibling  // 下一个兄弟节点
元素.previousElementSibling  // 上一个兄弟节点

// 增加节点
document.createElement('div')  // 创建元素节点
父元素.appendChild(要插入的元素) // 插入到父元素的最后
父元素.insertBefore(要插入的元素， 在哪个元素前面) // 插入到某个元素的前面

// 克隆节点
元素.cloneNode(布尔值)  // true: 克隆时会包含后代节点一起克隆，默认为false

// 删除节点
父元素.removeChild(要删除的元素)

元素尺寸与位置

属性	作用	说明
scrollLeft 和 scrollTop	被卷去的头部和左侧	配合页面滚动来用，可读写
clientWidth 和 clientHeight	获得元素宽度和高度	不包含border,margin，滚动条用于js获取元素大小，只读属性
offsetWidth 和 offsetHeight	获得元素宽度和高度	包含border、padding，滚动条等，只读
offsetLeft 和 offsetTop	获取元素距离自己定位父级元素的左、上距离	获取元素位置的时候使用，只读属性

// 返回元素的大小及其相对于视口的位置
 element.getBoundingClientRect()

在这里插入图片描述

日期对象

实例化

 // 1.实例化 new 当前时间
const date = new Date()
//2.指定时间
const date1 = new Date('2025-1-1')

日期对象方法

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值为 0 ~ 11
getDate()	获取月份中的每一天	不同月份取值也不相同
getDay()	获取星期	取值为 0 ~ 6
getHours()	获取小时	取值为 0 ~ 23
getMinutes()	获取分钟	取值为 0 ~ 59
getSeconds()	获取秒取	值为 0 ~ 59

时间戳
时间戳是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

// 1. getTime
const date = new Date()
console.log(date.getTime());
// 2. +new Date()
console.log(new Date());
console.log(+new Date());
// 3. now 不能指定时间，只能返回当时
console.log(Date.now());

// 根据Day()返回星期几
const arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
console.log(arr[new Date().getDay()]);

DOM事件

事件是系统内发生的动作，例如用户在网页上单击一个按钮

事件监听

语法：

元素对象.addEventListener('时间类型', 要执行的函数)

const btn = document.querySelector('button')
btn.addEventListener('click', function(e){
    console.log('hello world');
})

事件监听发展

DOM L0 ：是 DOM 的发展的第一个版本
DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准
DOM L2：使用addEventListener注册事件
DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

DOM L0：事件源.on事件 = function() { }
DOM L2：事件源.addEventListener(事件，事件处理函数)
on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用

事件类型

类型	触发方式	事件
鼠标事件	鼠标触发	click 鼠标点击 mouseenter 鼠标经过 mouseleave 鼠标离开
焦点事件	表单获得光标	focus 获得焦点 blur 失去焦点
键盘事件	键盘触发	Keydown 键盘按下触发 Keyup 键盘抬起触发
文本事件	表单输入触发	input 用户输入事件
页面加载事件	加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件	window.addEventListener(‘load’, function(){})
页面加载事件	当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载	document.addEventListener(‘DOMContentLoaded’, function() {})
元素滚动事件	滚动条在滚动的时候持续触发	window.addEventListener(‘scroll’, function() {}) 监听整个页面滚动，给 window 或 document 添加 scroll 事件，监听某个元素的内部滚动直接给某个元素加 scrollLeft 和 scrollTop 获取被卷去的大小，获取元素内容往左、往上滚出去看不到的距离，这两个值是可读写的元素.scrollTo(x, y) 可把内容滚动到指定的坐标
页面尺寸事件	在窗口尺寸改变的时候触发	window.addEventListener(‘resize’, function() {})

事件对象

事件对象包含有事件触发时的相关信息，例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
获取事件对象：

const input = document.querySelector('input')
input.addEventListener('keyup', function(e) {
    // e为事件对象
    console.log(e);
    if(e.key === 'Enter') {
        console.log('按了回车键');
    }
})

事件对象的常用属性：

属性	说明
type	获取当前的事件类型
clientX 和 clientY	获取光标相对于浏览器可见窗口左上角的位置
offsetX 和 offsetY	获取光标相对于当前DOM元素左上角的位置
key	用户按下的键盘键的值，不提倡使用keyCode

环境对象

函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
函数的调用方式不同，this 指代的对象也不同，【谁调用， this 就是谁】是判断 this 指向的粗略规则，直接调用函数，其实相当于是 window.函数，所以 this 指代 window

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <button>点击</button>
    
    <script>
        // 每个函数里都有环境对象this，谁调用this指向谁
        function fn() {
            console.log(this);  //window
        }

        window.fn()  // 默认是window调用

        const btn = document.querySelector('button')
        btn.addEventListener('click', function() {
            console.log(this); //button
            this.style.color = 'red'
            
        })

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

回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
回调函数本质还是函数，只不过把它当成参数使用
使用匿名函数做为回调函数比较常见

// 当一个函数当作参数来传递给另一个函数的时候，这个函数就是回调函数
// js中函数也只对象
function fn() {
    console.log('我是回调函数');
    
}
// setInterval(fn, 1000)
function fn2(a) {
    a()
    fn()
}
fn2(fn)

事件流

事件流指的是事件完整执行过程中的流动路径
当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
捕获阶段是从父到子，冒泡阶段是从子到父，实际工作都是使用事件冒泡为主
在这里插入图片描述
事件捕获
事件捕获是从DOM的根元素开始去执行对应的事件 (从外到里)
事件捕获需要写对应代码才能看到效果

DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)

addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用）
若传入false代表冒泡阶段触发，默认就是false
若是用 L0 事件监听，则只有冒泡阶段，没有捕获

事件冒泡
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
L2事件监听第三个参数是false，默认是冒泡

阻止冒泡
因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素，若想把事件就限制在当前元素内，就需要阻止事件冒泡

// 此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
事件对象.stopPropagation()

某些情况下需要阻止默认行为的发生，比如阻止链接的跳转，表单域跳转

e.preventDefault()

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

// 旧版本
btn.onclick = function() {
	alert('123')
}

// 事件解绑
btn.onclick = null

addEventListener方式，必须使用：removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])

//新版本
function fn() {
    alert('123')
}
btn.addEventListener('click', fn)
btn.removeEventListener('click', fn)
// 匿名函数无法解绑
btn.addEventListener('click', function() {
    alert(111)
})

鼠标经过事件的区别

mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果 (推荐)

两种注册事件的区别

传统on注册（L0）	事件监听注册（L2）
同一个对象,后面注册的事件会覆盖前面注册(同一个事件) 直接使用null覆盖偶就可以实现事件的解绑都是冒泡阶段执行的	语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获) 后面注册的事件不会覆盖前面注册的事件(同一个事件) 可以通过第三个参数去确定是在冒泡或者捕获阶段执行必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段) 匿名函数无法被解绑

事件委托

事件委托是利用事件流的特征解决一些开发需求的技巧，利用事件冒泡，给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件，减少注册次数，可以提高程序性能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>第1个孩子</li>
        <li>第2个孩子</li>
        <li>第3个孩子</li>
        <li>第4个孩子</li>
        <li>第5个孩子</li>
        <p>不需要变色</p>
    </ul>

    <script>
        const ul = document.querySelector('ul')
        ul.addEventListener('click', function(e) {
            // this.style.color = 'red'
            // e.target 为具体的li
            // e.target.style.color = 'red'
            console.log(this);
            
            if(e.target.tagName === 'LI') {
                e.target.style.color = 'red'
            }
        })

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

移动端端事件

触屏事件	说明
touchustart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

BOM操作

Window对象

BOM
BOM(Browser Object Model ) 是浏览器对象模型

window对象是一个全局对象，也可以说是JavaScript中的顶级对象
document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window

定时器-间歇函数

function fn() {
    console.log(123);
    
}

// 开启定时器
let n = setInterval(fn, 1000)
// setInterval('fn()', 1000)  // 不要写小括号
console.log(n);
// 关闭定时器
clearInterval(n)

定时器-延时函数
setTimeout 仅仅只执行一次，可以理解为把一段代码延迟执行, 平时省略window

let timer = setTimeout(function(){
    console.log('111');
    
}, 1000)
// 清除
clearTimeout(timer)

JS执行机制
JavaScript 语言的是单线程，HTML5 提出 Web Worker 标准，允许JavaScript 脚本创建多个
线程。
同步任务：同步任务都在主线程上执行，形成一个执行栈。
异步任务：JS 的异步是通过回调函数实现的，异步任务相关添加到任务队列中（任务队列也称为消息队列）。
异步任务有以下三种类型：

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

JS执行机制：

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

location对象
location对象拆分并保存了 URL 地址的各个组成部

属性或方法	说明
href 属性	获取完整的 URL 地址，对其赋值时用于地址的跳转
search属性	获取地址中携带的参数，符号？后面部分
hash属性	获取地址中的啥希值，符号 # 后面部分
reload方法	用来刷新当前页面，传入参数 true 时表示强制刷新

navigator对象
navigator对象下记录了浏览器自身的相关信息
通过userAgent 检测浏览器的版本及平台

// 检测 userAgent（浏览器信息）
!(function () {
   const userAgent = navigator.userAgent
   // 验证是否为Android或iPhone
   const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
   const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
   // 如果是Android或iPhone，则跳转至移动站点
   if (android || iphone) {
       location.href = ''
   }
})()

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

方法	说明
back()	后退
forward()	前进
go(参数)	跳转，参数：1 前进一个页面，-1 后退1个页面

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常在本地存储大量的数据，HTML5规范提出了相关解决方案。

数据存储在用户浏览器中
设置、读取方便、甚至页面刷新不丢失数据
容量较大，sessionStorage和localStorage约 5M 左右

浏览器查看本地数据：
在这里插入图片描述

localStorage
可以多窗口（页面）共享（同一浏览器可以共享），以键值对的形式存储使用

// 设置
localStorage.setItem('uname', 'david')
// 读取
localStorage.getItem('uname')
// 删除
localStorage.removeItem('uname')

sessionStorage
生命周期为关闭浏览器窗口，在同一个窗口(页面)下数据可以共享，以键值对的形式存储使用，用法跟localStorage 相同

存储复杂数据类型
本地只能存储字符串,无法存储复杂数据类型，需要将复杂数据类型转换成JSON字符串,在存储到本地

const obj = {
    uname: 'dav',
    age: 18,
    gender: '女'
}
//只能存储字符串
localStorage.setItem('obj', obj)
console.log(localStorage.getItem('obj'));
localStorage.setItem('obj', JSON.stringify(obj))
console.log(localStorage.getItem('obj'));
const result = JSON.parse(localStorage.getItem('obj'))
console.log(result);