JavaScript-webAPI使用手册

最新推荐文章于 2025-11-23 16:56:34 发布

原创最新推荐文章于 2025-11-23 16:56:34 发布 · 1.1k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

使用手册专栏收录该内容

8 篇文章

订阅专栏

浏览器是如何进行界面渲染的

解析（Parser）HTML，生成DOM树(DOM Tree)
同时解析（Parser） CSS，生成样式规则 (Style Rules)
根据DOM树和样式规则，生成渲染树(Render Tree)
进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）
进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
Display: 展示在页面上

回流(重排)
当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。
重绘
由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。
重绘不一定引起回流，而回流一定会引起重绘

获取DOM对象

匹配第一个元素

	document.querySelector('css选择器')

匹配多个元素

	document.querySelectorAll('css选择器')

获取body元素

	document.body

获取html元素

	 document.documentElement

节点操作

查找节点

父节点查找

	子元素.parentNode

子节点查找

	// 得到子节点的伪数组
	父元素.children

兄弟关系查找

	// 下一个兄弟节点
	元素.nextElementSibling
	//上一个兄弟节点
	元素.reviousElementSibling

创建节点

	document.createElement('标签名')

追加节点

插入到父元素的最有一个子元素

	父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面

	父元素.insertBefore(要插入的元素, 在那个元素签名)

替换节点

	父元素.replaceChild(新节点,旧节点)

克隆节点

	元素.clone Node(布尔值)

cloneNode会克隆出一个跟原标签一样的元素
true ：代表克隆时包含后代节点一起克隆
false ：代表科隆时不包含后代节点(默认)

删除节点

要删除元素必须通过父元素删除，不存在父子关系则删除不成功

	父元素.removeChild(要删除的元素)

操作元素内容

显示纯文本，不解析标签

	对象.innerText = ''

解析标签

	对象.innerHTML = ``

操作元素属性

	对象.属性 = 值

操作元素样式属性

通过style属性操作css

	对象.style.样式属性 = 值

如果属性有-连接符，需要转换为小驼峰命名法
赋值的时候，需要加css单位

通过className操作css

	对象.className = '类名'

className 赋值会覆盖以前的类名

通过classList操css

	// 追加一个类
	对象.classList.add('类名')
	// 删除一个类
	对象.classList.remove('类名')
	// 切换一个类(有就删掉，没有就加上)
	对象.classList.toggle('类名')

操作表单元素属性

	对象.属性名 = 新值

自定义属性

	// 在标签中声明
	data-自定义属性名='值'
	
	// DOM获取
	对象.dataset.自定义属性名

自定义属性在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取

事件监听

	对象.addEventListener('事件类型', 回调函数)

事件类型

鼠标事件

click ：鼠标点击触发
dblclick ：鼠标双击触发
mouseenter / mouseover ：鼠标经过触发
mouseleave / mouseout ：鼠标离开触发
mouseover 和mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果

** 焦点事件**

focus ：获得焦点触发
blur ：失去焦点触发

键盘事件

keydown ：键盘按下触发
keyup ：键盘抬起触发

文本事件

input ：用户输入触发
** 手机端事件**
touchstart ：手指触摸到一个DOM元素时触发
touchmove ：手指在一个DOM元素上滑动时触发
touchend ：手指从一个DOM元素上移开时触发

事件对象

在事件绑定的回调函数的第一个参数就是事件对象，这个对象里有事件触发时的相关信息

	对象.addEventListener('事件类型', function(e){
		// e 就是事件对象
	}

事件对象常用属性

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

页面加载事件

加载外部资源(如图片、外联css和js)加载完毕时触发

监听页面所有资源加载完毕

	window.addEventListener('load', funciton(){}

监听页面DOM加载完毕

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

页面滚动事件

	对象.addEventListener('scroll',function(){}）

window
document
元素

滚动到指定的坐标

	元素.scrollTo(x, y)

属性
scrollLeft ：往左滚动
scrollTop ：往上滚动
可读写

页面尺寸事件

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

	window.addEventListener('resize', function()}

offsetWidth和offsetHeight是得到元素什么的宽高？
内容 + padding + border
offsetTop和offsetLeft 得到位置以谁为准？
带有定位的父级
如果都没有则以文档左上角为准
在这里插入图片描述

事件流

事件流指的是事件完整执行过程中的流动路径，经过捕获阶段和冒泡阶段两个阶段
简单来说：捕获阶段是从父到子，冒泡阶段是从子到父
实际工作都是使用事件冒泡为主

	对象.addEventListener('事件类型', 回调函数, 捕获机制)

true ：代表捕获阶段
false ：代表冒泡阶段（默认false）

事件捕获

从DOM的根元素开始去执行对应的事件

事件冒泡

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发
简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

阻止冒泡

此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

	事件对象.stopPropagation()

阻止元素默认行为

	事件对象.preventDefault()

解绑事件

	对象.removeEventListener('事件类型',回调函数,捕获机制)

事件委托

给多个元素注册事件的一种技巧
优点：减少注册次数，可以提高程序性能
原理：利用事件冒泡的提点，给父元素注册事件，当触发子元素的时候，会冒泡到父元素身上，从而触发父元素的使劲按
事件对象.target.tagName 可以获得真正触发事件的元素

laction 对象

保存了 URL 地址的各个组成部分

href ：获取完整的RUL地址，对其赋值时用于地址的跳转
search ：获取地址中携带的参数，符号？后面部分
hash ：获取地址中的哈希值，符号#后面部分
reload() ：用来刷新当前页面，传入参数true时表示强制刷新

navigator 对象

记录了浏览器自身的相关信息

userAgent ：检测浏览器的版本及平台

  <script>
    // 检测 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 = ''
      }
    })();
    // !(function () { })();
    !function () { }()
  </script>

history 对象

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

back() ：后退
froward() ：前进
go(n) ：前进或后退n个页面

本地存储

localStorage ：同一浏览器多窗口数据共享
sessionStorage ：同一窗口数据共享(用法同localStorage)

存储数据

	localStorage.setItem(key, value)

获取数据

	localStorage.getItem(key)

删除数据

	localStorage.removeItem(key)

存储复杂数据类型

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

	// 复杂数据类型转JSON字符串
	JSON.stringify(复杂数据类型)
	// JSON字符串转对象
	JSON.parse(JSON字符串)