DOM的常用API速查表

NO IMAGE

大多數情況下,筆者堅信能用CSS解決的,就不會用JS來解決

但是,CSS在某些情況下還是有一定的侷限性,比如跟蹤鼠標事件,監視頁面滾動等

這時,我們就要藉助強大的DOM API了,在不用框架的基礎上,就能用原生JS華麗地解決一些常見但CSS做不到的需求

本文羅列了筆者平時最常用的DOM API

Document

頁面文檔

document

querySelector

獲取CSS選擇器匹配到的單個元素,後面加All表示匹配所有元素

createElement

創建一個元素

Nodes

節點

Node

textContent

獲取元素的文本內容

append

為元素添加子元素

parentElement

獲取元素的父元素

Element

元素

element

className

類名

classList

類名列表,常用方法:addremovecontainstoggle

animate

為元素添加動畫,具體參見 Web Animations API

getBoundingClientRect

返回元素的大小

scrollBy

使元素沿xy軸滾動特定距離

Elements

包括HTMLElement等的所有HTML標籤元素

HTMLElement

style

元素樣式

getPropertyValue方法用於獲取自定義變量的值

setProperty方法用於設置自定義變量

dataset

獲取元素的自定義屬性鍵值對

offsetWidth | offsetHeight

獲取元素寬高

tagName

獲取元素標籤名

HTMLInputElement

value

表單元素的值

checked

單複選框的勾選狀態

checkValidity

驗證表單元素的合法性

setCustomValidity

將元素定義為invalid並附加信息,空字符串表示元素valid

files

input type="file"返回的FileList

Event

事件

EventTarget

addEventListener

監聽某個事件,請參考DOM Event速查表

Event

target

事件的發出者

currentTarget

事件的監聽者

MouseEvent

clientX | clientY

鼠標事件時鼠標的XY位置

KeyBoardEvent

code

鍵盤事件時鍵盤按下的鍵的代號

ProgressEvent

ajax請求事件

loaded

已加載資源大小

total

資源總大小

File

文件

File

name

文件名

size

文件大小

Blob

slice

將文件切成二進制塊

Window

全局

window

setTimeout

定時器,清空用clearTimeout

setInterval

重複定時器,清空用clearInterval

XMLHttpRequest

ajax請求

XMLHttpRequest

open

新建請求,設置methodurl

setRequestHeader

設置請求頭鍵值對

send

body數據發送給服務器

onload

請求成功時觸發

response

響應的body數據

upload

onprogress:監視ajax的進度

abort

取消請求

FormData

send發送的body數據

append

添加表單數據鍵值對

Intersection Observer

交叉觀測器,用於觀察元素在當前視口上是否“可見”,常用於圖片懶加載,滾動時監聽動畫等

IntersectionObserver

觀察器

observe

觀察某元素

IntersectionObserverEntry

被觀察的元素

isIntersecting

被觀察的元素與當前視口是否交叉

DOM Event

常見的DOM事件

Mouse

click

鼠標點擊時觸發

mouseenter

鼠標移入時觸發

mouseleave

鼠標移出時觸發

Form

change

inputselecttextarea等元素的value改變時觸發

相關文章

嚐鮮Vue3之四:如何運行Jest單元測試

嚐鮮Vue3之三:CompositionAPI小結和包裝對象

嚐鮮Vue3之二:最重要的變化CompositionApi

嚐鮮Vue3之一:瀏覽器中如何斷點調試Vue3源碼