JavaScript --Web API

DOM

DOM，Document Object Model——文档对象模型是用来呈现以及与任意 HTML 或 XML文档交互的 API。
DOM对象：浏览器根据 html 标签生成的 JS对象。

获取DOM对象：

根据CSS选择器来获取DOM元素
- 选择匹配的第一个元素语法：document.querySelector('css选择器')参数: 包含一个或多个有效的CSS选择器字符串返回值：CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。
- 选择匹配的多个元素语法：document.querySelectorAll('css选择器')参数:包含一个或多个有效的CSS选择器字符串返回值：CSS选择器匹配的NodeList 对象集合，得到的是一个有长度有索引号没有数组方法的伪数组，通过遍历（for）的方式获得里面的每一个对象。
其他获取DOM元素方法（了解）

操作元素内容

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

<body>
  <div class="box">我是文字的内容</div>
  <script>
    // 获取元素
    const box = document.querySelector('.box')
    // 获取标签内部的文字
    console.log(box.innerText)
    // 修改文字内容，不解析标签
    box.innerText = '我是一个盒子'
    // 修改文字内容，解析标签
    box.innerHTML = '<strong>我是一个盒子</strong>'
  </script>
</body>

操作元素属性

操作元素常用属性： 对象.属性 = 值

操作元素样式属性：

通过 style 属性操作CSS：对象.style.样式属性 = 值

操作类名(className) 操作CSS：元素.className = 'CSS类名' （用新名换旧名，如需保留旧名，把旧名也写在里面）

<head>
    <style>
        .nav {
        color: red;
        }
        
        .box {
        width: 300px;
        height: 300px;
        }
    </style>
</head>
<body>
    <div class="nav"></div>
    <script>
        // 1. 获取元素
        const div = document.quertSelector('div')
        // 2. 添加类名
        div.className = 'nav box'
    </script>
</body>

通过 classList 操作类控制CSS：

// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')

操作表单元素属性：获取： DOM对象.属性名，设置： DOM对象.属性名 = 新值

定时器-间歇函数

开启定时器
1
setInterval(函数, 间隔时间)

每隔一段时间调用这个函数，间隔时间单位是毫秒。
2. 关闭定时器

1 2	let 变量名 = setInterval(函数, 间隔时间) clearInterval(变量名)

事件

事件监听

1	元素对象.addEventListener('事件类型', 要执行的函数)

程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件。
事件类型

事件对象

事件对象记录事件触发时的相关信息，比如用户按下哪个键。事件绑定的回调函数的第一个参数就是事件对象，一般命名为 event、ev、e。

1 2	元素.addEventListener('click', function (e) { })

常用属性:

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

例如：

<input type="text">
<script>
  const input = document.querySelector('input')
  input.addEventListener('keyup', function (e) {
    if (e.key === 'Enter') {
      console.log('我按下了回车键')
    }
  })
</script>

事件流

事件捕获

从DOM的根元素开始去执行对应的事件 (从外到里)

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

addEventListener第三个参数默认为 false，代表冒泡阶段触发，传入 true 代表是捕获阶段触发（很少使用）

事件冒泡

当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

const father = document.querySelector('.father')
const son = document.querySelector('.son')
document.addEventListener('click', function () {
  alert('我是爷爷')
})
fa.addEventListener('click', function () {
  alert('我是爸爸')
})
son.addEventListener('click', function () {
  alert('我是儿子')
})

点击son，依次输出：我是儿子 → 我是爸爸 → 我是爷爷使用 事件对象.stopPropagation() 可以阻止冒泡（例如在son的函数里添加，点击后只会输出“我是儿子”）

阻止默认行为

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

1	e.preventDefault()

解绑事件

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

// 绑定事件
btn.onclick = function () {
  alert('点击了')
}
// 解绑事件
btn.onclick = null

addEventListener方式：

1	事件对象.removeEventListener('事件类型', 事件处理函数, [获取捕获或者冒泡阶段])

鼠标经过事件：
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果 (推荐)

<body>
  <div class="dad">
    <div class="baby"></div>
  </div>
  <script>
    const dad = document.querySelector('.dad')
    const baby = document.querySelector('.baby')
    dad.addEventListener('mouseenter', function () {
      console.log('鼠标经过')
    })
    dad.addEventListener('mouseleave', function () {
      console.log('鼠标离开')
   })
  </script>
</body>

事件委托

给父元素注册事件，触发子元素时会冒泡到父元素身上，从而触发父元素的事件。获得真正触发事件的元素： 事件对象.target.tagName

其他事件

页面加载事件：

1
2
3

window.addEventListener('load', function () {
  // 执行的操作
})

页面滚动事件：
scrollLeft 和 scrollTop（属性）可以获取往左、往上滚去的距离
offsetLeft 和 offsetTop（只读属性）获取元素距离自己定位父级元素的左、上距离

1
2
3

window.addEventListener('scroll', function () {
  // 执行的操作
})

日期对象

实例化

// 当前时间
const date = newDate()
// 指定时间
const date1 = newDate('2022-5-1 08:30:00')

时间戳：指1970年01月01日00时00分00秒起至现在的毫秒数

// 1.使用 getTime() 方法
const date = newDate()
console.log(date.getTime())

// 2.简写 +new Date() 推荐
console.log(+newDate()) // 当前时间戳
console.log(+newDate('2022-4-1 18:30:00')) // 指定日期时间戳

// 3.使用 Date.now()
console.log(Date.now())
const date1 = newDate('2022-5-1 08:30:00')

本地存储

存储数据：localStorage.setItem(key, value)获取数据：localStorage.getItem(key)删除数据：localStorage.removeItem(key)

箭头函数

基本语法:

// 普通函数
const fn = function () {
  console.log('我是普通函数')
}
fn()
// 箭头函数
const fn = () => {
  console.log('我是箭头函数')
}

// 只有一个参数可以省略小括号
// 普通函数
const fn = function (x) {
  return x + x
}
// 箭头函数
const fn = x => {
  return x + x
}

// 如果函数体只有一行代码，可以写到一行上，并且无需写 return 直接返回值
// 普通函数
const fn = function (x, y) {
  return x + y
}
// 箭头函数
const fn = (x, y) => x + y

// 更简洁的语法
const form = document.queryselector('form')
form.addEventListener('click', ev => ev.preventDefault())

// 加括号的函数体返回对象字面量表达式
const fn1 = uname => ({ uname: uname })
console.log(fn1('nm')) // {uname: 'nm'}

箭头函数没有 arguments 动态参数，但是有剩余参数 ...args。

const getSum = (...args) => {
  let sum = 0
  for (let i = 0; i < args.length; i++) {
    sum += args[i]
  }
  return sum // 注意函数体有多行代码需要return
}
console.log(getSum(1, 2, 3)) // 6

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。

console.log(this) // 此处为window
btn.addEventListener('click', () => {
  console.log(this) // 当前this指向window
})

遍历数组 forEach

被遍历的数组.forEach(function (当前数组元素，当前元素索引号(可选)){
  // 函数体
})

// 例如：
const arr = ['red ', 'green', 'pink']
arr.forEach(function (item,index) {
  console.log(item) // 数组元素 red green pink
  console.log(index) // 索引号 0 1 2
})

筛选数组 filter

创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。如果没有符合条件的元素则返回空数组。

1
2
3

被遍历的数组.filter(function (currentValue, index(可选)) {
  return 筛选条件
})

本文作者：RyoCY
本文链接：https://squirrelune.github.io/cn/Web%E5%BC%80%E5%8F%91/Web%E5%BC%80%E5%8F%9105/
许可协议： 除特殊声明外，本站博文均采用 CC BY-NC-SA 3.0 CN 许可协议，转载请注明出处！

Web开发05