化實(shí)戰(zhàn))
1. 先拆掉DOM 很高深的濾鏡它不過(guò)是一棵能改的樹(shù)剛學(xué)前端那會(huì)兒我對(duì) HTML DOM 方法一直有種說(shuō)不出的別扭文檔翻了一遍每個(gè)方法名字都認(rèn)識(shí)一寫(xiě)頁(yè)面就全忘光。getElementById、createElement、appendChild 這些單獨(dú)拎出來(lái)都好理解可真要在頁(yè)面上加個(gè)彈窗、做個(gè)動(dòng)態(tài)列表常常不知道從哪個(gè)方法下手。后來(lái)寫(xiě)多了才慢慢意識(shí)到問(wèn)題不在記性而是我一直沒(méi)把 DOM 方法的體系串成一張網(wǎng)。先說(shuō)一個(gè)最基礎(chǔ)、但很多人沒(méi)真正想透的問(wèn)題DOM 到底是什么它不是你在編輯器里寫(xiě)的那堆 HTML 標(biāo)簽而是瀏覽器把你的 HTML 解析完之后在內(nèi)存里生成的一棵對(duì)象樹(shù)。HTML 文本只是原料DOM 樹(shù)才是瀏覽器實(shí)際用來(lái)理解、渲染和交互的真身。你的 CSS 選擇器能生效、JavaScript 能操作頁(yè)面本質(zhì)都是在跟這棵樹(shù)打交道。方法在這里扮演什么角色如果 DOM 是一棵長(zhǎng)在瀏覽器里的樹(shù)那 HTML DOM 方法就是你手里的剪刀、鏟子和嫁接刀。想剪掉某個(gè)節(jié)點(diǎn)用 removeChild想嫁接一個(gè)新的子樹(shù)用 appendChild想找到某根枝條用 querySelector。瀏覽器對(duì)這棵樹(shù)的每一次改動(dòng)幾乎都必須通過(guò)方法完成直接賦值改屬性只是其中一小類(lèi)例外。我在帶新人時(shí)最喜歡打一個(gè)比方HTML 是房子的設(shè)計(jì)圖紙DOM 是蓋好的毛坯房而 DOM 方法就是你的裝修工具。圖紙你可以反復(fù)改但想動(dòng)毛坯房的墻體、電路和家具沒(méi)有工具就只能干瞪眼。理解了這層關(guān)系你就明白為什么所有前端框架React、Vue不管包了多少層底層最后還是要回到這些原生方法上——因?yàn)樽烂嬷挥幸粋€(gè)工具始終出自同一套體系。1.1 為什么你總記不住 DOM 方法我觀察過(guò)很多初學(xué)者記不住 DOM 方法的根本原因不是笨而是把方法當(dāng)成了獨(dú)立的單詞去背。實(shí)際上這些方法背后只有幾條主線找查找、建創(chuàng)建、插插入、改修改、刪刪除、聽(tīng)事件監(jiān)聽(tīng)。你看任何頁(yè)面操作都逃不出這六個(gè)動(dòng)作你不需要背幾十個(gè)孤立的名字你只需要記住這六個(gè)動(dòng)詞然后把每個(gè)動(dòng)作下的 2~3 個(gè)常用方法記牢就已經(jīng)覆蓋了日常開(kāi)發(fā) 90% 以上的場(chǎng)景。另一個(gè)記不住的原因是沒(méi)有意識(shí)到方法之間經(jīng)常配合使用。比如新增一個(gè)列表項(xiàng)標(biāo)準(zhǔn)鏈路是 createElement 創(chuàng)建 - 設(shè)置內(nèi)容 - appendChild 插入三步缺一不可。很多人只背了 createElement不知道后面還要插到樹(shù)里結(jié)果節(jié)點(diǎn)建了但頁(yè)面上看不到。這就好比你加工了一個(gè)零件但沒(méi)裝到機(jī)器上機(jī)器當(dāng)然不會(huì)轉(zhuǎn)。所以我在后文會(huì)把方法按操作鏈來(lái)講而不是按字母表排列。1.2 DOM 方法全景圖在深入每個(gè)方法之前先用一張表把整個(gè)體系鋪開(kāi)。這張表是我自己給團(tuán)隊(duì)培訓(xùn)時(shí)用的覆蓋了日常開(kāi)發(fā)最常見(jiàn)的入口動(dòng)作類(lèi)型核心方法典型場(chǎng)景查找元素getElementById / getElementsByClassName / querySelector / querySelectorAll / closest拿到要操作的目標(biāo)節(jié)點(diǎn)創(chuàng)建節(jié)點(diǎn)createElement / createTextNode / cloneNode / createDocumentFragment生成新的元素、文本或批量容器插入節(jié)點(diǎn)appendChild / insertBefore / insertAdjacentHTML / prepend / after把節(jié)點(diǎn)放進(jìn)指定位置修改內(nèi)容textContent / innerHTML / setAttribute / style / classList改文字、改結(jié)構(gòu)、改樣式、改屬性刪除節(jié)點(diǎn)removeChild / remove從樹(shù)中移除節(jié)點(diǎn)事件相關(guān)addEventListener / removeEventListener / dispatchEvent綁定、解綁、觸發(fā)事件遍歷關(guān)系parentNode / children / firstElementChild / nextElementSibling在節(jié)點(diǎn)之間移動(dòng)看這張表你會(huì)發(fā)現(xiàn)方法就那么幾十個(gè)真正高頻的就上面這些。后文我會(huì)逐個(gè)展開(kāi)講清楚為什么這么做和坑在哪里而不是簡(jiǎn)單羅列 API 文檔。2. 找元素的方法getElementById、querySelector 到底該用誰(shuí)查找元素是所有 DOM 操作的第一步就像你拿鑰匙開(kāi)門(mén)——鑰匙找錯(cuò)了后面全是白費(fèi)。很多新人問(wèn)的第一個(gè)問(wèn)題就是這么多查找方法我到底該用哪個(gè)老實(shí)說(shuō)這個(gè)問(wèn)題的答案隨著前端發(fā)展一直在變。2.1 老派三兄弟getElementById、getElementsByClassName、getElementsByTagName這三個(gè)方法非常典型它們從前端早期一直活到今天但現(xiàn)在很多新手對(duì)它們的脾氣已經(jīng)不熟了。getElementById 最簡(jiǎn)單參數(shù)是 ID 字符串返回匹配的元素對(duì)象如果找不到返回 null。它的特點(diǎn)是一個(gè) ID 只能對(duì)應(yīng)一個(gè)元素所以語(yǔ)義上天生就是獨(dú)立節(jié)點(diǎn)。過(guò)去我們用document.getElementById(app)拿到根節(jié)點(diǎn)再往里面塞東西現(xiàn)在雖然也可以用但寫(xiě)法上逐漸被 querySelector 替代。不過(guò)有一個(gè)細(xì)節(jié)值得記住getElementById 只能掛在 document 上調(diào)用不能通過(guò)某個(gè)父元素去調(diào)比如parent.getElementById(...)會(huì)報(bào)錯(cuò)這是它的限制。getElementsByClassName 和 getElementsByTagName 就有點(diǎn)脾氣了它們返回的不是單個(gè)元素而是一個(gè) HTMLCollection——一個(gè)活的集合。這個(gè)集合不是靜態(tài)快照而是跟 DOM 樹(shù)實(shí)時(shí)聯(lián)動(dòng)。什么意思你先把集合存進(jìn)變量再往頁(yè)面里新增一個(gè)匹配元素回頭再看這個(gè)集合變量長(zhǎng)度竟然變了。這在某些場(chǎng)景下是好事但在循環(huán)里就是災(zāi)難——邊遍歷邊增刪會(huì)導(dǎo)致索引錯(cuò)亂我在第 8 章會(huì)詳細(xì)講這個(gè)坑。2.2 萬(wàn)能查詢(xún)的 querySelector 與 querySelectorAllquerySelector 和 querySelectorAll 是后來(lái)瀏覽器原生支持的選擇器查詢(xún)方法它們接受任何 CSS 選擇器字符串比如#app .item、ul li:first-child、[data-typebutton]。這是它們最大的優(yōu)勢(shì)你在 CSS 里怎么寫(xiě)選擇器在 JS 里就能怎么寫(xiě)心智模型完全統(tǒng)一。兩個(gè)方法的區(qū)別在于返回值querySelector 返回第一個(gè)匹配的元素找不到返回 nullquerySelectorAll 返回所有匹配元素的 NodeList靜態(tài)集合。注意這里我特意寫(xiě)了靜態(tài)querySelectorAll 返回的 NodeList 是快照后續(xù) DOM 變化不會(huì)影響它。這一點(diǎn)跟 getElementsByClassName 的 HTMLCollection 正好相反用的時(shí)候要分清楚——如果你需要實(shí)時(shí)反映頁(yè)面狀態(tài)用 Collection如果你只是想拿當(dāng)前這一批用靜態(tài)的 NodeList 更可控不容易在循環(huán)里出bug。有個(gè)實(shí)際經(jīng)驗(yàn)在組件開(kāi)發(fā)里我?guī)缀踔挥?querySelector / querySelectorAll 和 getElementById很少用 getElementsByClassName。原因一個(gè)是 CSS 選擇器表達(dá)能力強(qiáng)另一個(gè)就是靜態(tài)集合在復(fù)雜邏輯里更好預(yù)測(cè)不會(huì)出現(xiàn)明明刪了怎么還有的靈異現(xiàn)象。2.3 查找方法的實(shí)時(shí)性差異這里值得用一張表把實(shí)時(shí)性差異釘死因?yàn)槲野l(fā)現(xiàn)這是面試常問(wèn)、實(shí)戰(zhàn)常錯(cuò)的地方方法返回類(lèi)型是否實(shí)時(shí)找不到時(shí)getElementByIdElement-nullgetElementsByClassNameHTMLCollection是空集合getElementsByTagNameHTMLCollection是空集合querySelectorElement-nullquerySelectorAllNodeList否空集合實(shí)時(shí)集合聽(tīng)起來(lái)很智能實(shí)際上在項(xiàng)目里容易埋雷。我記得有一次做無(wú)限滾動(dòng)列表循環(huán)里用 getElementsByClassName 實(shí)時(shí)集合判斷是否還有更多節(jié)點(diǎn)因?yàn)槊看?append 后集合長(zhǎng)度自動(dòng)變導(dǎo)致判斷條件永遠(yuǎn)不為假最后內(nèi)存直接爆掉。換成 querySelectorAll 靜態(tài)快照后問(wèn)題立刻消失。不是說(shuō)實(shí)時(shí)集合沒(méi)用但你至少要知道它在你代碼里會(huì)自己長(zhǎng)大。3. 造元素與插元素讓新節(jié)點(diǎn)在正確位置落地找到目標(biāo)元素之后下一步通常是生成新的節(jié)點(diǎn)并把它放進(jìn)頁(yè)面。這個(gè)環(huán)節(jié)的每一步我都會(huì)拆開(kāi)講因?yàn)樗?DOM 操作里最容易做成能用但很糙的部分。3.1 createElement createTextNode 的黃金搭檔createElement 的作用是創(chuàng)建元素節(jié)點(diǎn)但它創(chuàng)建出來(lái)的只是一個(gè)孤兒節(jié)點(diǎn)——存在于內(nèi)存里但不在 DOM 樹(shù)上頁(yè)面不會(huì)顯示。想讓它顯示必須找到父節(jié)點(diǎn)用 appendChild 或 insertBefore 插入。createTextNode 則用于創(chuàng)建文本節(jié)點(diǎn)。很多人寫(xiě)動(dòng)態(tài)內(nèi)容時(shí)圖省事直接給元素的 innerHTML 賦字符串這在處理純文本時(shí)其實(shí)藏著 XSS 風(fēng)險(xiǎn)。更好的做法是用 createTextNode 創(chuàng)建文本節(jié)點(diǎn)瀏覽器會(huì)把它內(nèi)容里的、等字符正當(dāng)?shù)禺?dāng)成文本處理不會(huì)解釋成 HTML 標(biāo)簽。這句話我建議所有做前端的人都認(rèn)真讀一遍textContent/createTextNode處理的是文本innerHTML處理的是HTML兩者處理的數(shù)據(jù)類(lèi)型根本不同。用戶(hù)輸入的數(shù)據(jù)永遠(yuǎn)當(dāng)作文本處理永遠(yuǎn)不要直接拼進(jìn) innerHTML這是我做前端以來(lái)守住的最重要的一條安全底線。3.2 appendChild、insertBefore 與節(jié)點(diǎn)位置控制appendChild 把一個(gè)節(jié)點(diǎn)追加到父元素的最后一個(gè)子節(jié)點(diǎn)位置這是最常見(jiàn)的操作。但有時(shí)候你想插到指定位置比如列表第二項(xiàng)后面這時(shí)候 appendChild 就不夠了要?jiǎng)佑?insertBefore。insertBefore 接收兩個(gè)參數(shù)語(yǔ)法是parent.insertBefore(newNode, referenceNode)意思是把 newNode 插到 referenceNode 的前面。如果第二個(gè)參數(shù)傳 null它等價(jià)于 appendChild把節(jié)點(diǎn)追加到末尾。這里有個(gè)小記憶技巧insertBefore 是插到某節(jié)點(diǎn)前面所以第二個(gè)參數(shù)是參照物是后面那個(gè)節(jié)點(diǎn)不是插到第幾個(gè)位置。很多人第一次用會(huì)把參數(shù)順序搞反我建議默認(rèn)先寫(xiě)好參照節(jié)點(diǎn)再?zèng)Q定前面還是后面。還有一個(gè)必須知道的行為如果你把一個(gè)已經(jīng)存在于 DOM 中的節(jié)點(diǎn)傳給 appendChild 或 insertBefore瀏覽器不會(huì)復(fù)制它而是把它從原位置移動(dòng)過(guò)來(lái)。這個(gè)特性有時(shí)候會(huì)嚇到人——明明只是想把某元素挪個(gè)位置結(jié)果它從原來(lái)的地方消失了。其實(shí)這不是 bug而是 DOM 的移動(dòng)語(yǔ)義。如果真想復(fù)制得先用 cloneNode(true) 克隆一份再插。3.3 DocumentFragment批量插入的性能關(guān)鍵DocumentFragment 是一個(gè)專(zhuān)門(mén)用來(lái)當(dāng)臨時(shí)容器的節(jié)點(diǎn)。它有個(gè)特性你在它上面 append 子節(jié)點(diǎn)頁(yè)面不會(huì)立即更新等它整體被插入 DOM 后它自己不會(huì)出現(xiàn)在樹(shù)里只有它包含的子節(jié)點(diǎn)會(huì)落地。換句話說(shuō)它是一個(gè)中轉(zhuǎn)站。為什么需要中轉(zhuǎn)站因?yàn)槊客?DOM 樹(shù)里插一次節(jié)點(diǎn)瀏覽器都可能觸發(fā)回流或重繪頻繁操作會(huì)卡頓。通過(guò) DocumentFragment 先把所有要插入的節(jié)點(diǎn)組裝好再一次插進(jìn)真實(shí) DOM就把 N 次頁(yè)面更新壓縮成了 1 次。我在渲染長(zhǎng)列表時(shí)幾乎必用這個(gè)模式比如一百條數(shù)據(jù)的列表直接循環(huán) appendChild 100 次和用 fragment 組裝后插一次肉眼都能感覺(jué)到流暢度差異。3.4 insertAdjacentHTML另一種思路除了 appendChild 系列還有一個(gè)方法被嚴(yán)重低估insertAdjacentHTML。它接受兩個(gè)參數(shù)第一個(gè)是插入位置beforebegin、afterbegin、beforeend、afterend第二個(gè)是 HTML 字符串。比如el.insertAdjacentHTML(beforeend, li新項(xiàng)/li)等價(jià)于在 el 內(nèi)部的末尾追加一段 HTML。它的優(yōu)點(diǎn)是寫(xiě)法直觀適合插入一段由字符串拼好的結(jié)構(gòu)返回值還不是節(jié)點(diǎn)而是 undefined所以別指望它返回插入的元素。要注意它的定位是基于某一個(gè)元素的外部或內(nèi)部beforebegin 是元素外面之前afterend 是元素外面之后afterbegin 是元素內(nèi)部第一個(gè)子節(jié)點(diǎn)之前beforeend 是元素內(nèi)部最后一個(gè)子節(jié)點(diǎn)之后。這四個(gè)方位在寫(xiě)復(fù)雜布局時(shí)相當(dāng)好用尤其是做內(nèi)容流插入的場(chǎng)景。但安全提醒依然適用不要把用戶(hù)輸入直接塞進(jìn) HTML 字符串。4. 改內(nèi)容與改屬性innerHTML、textContent、classList 的邊界感節(jié)點(diǎn)插進(jìn)去之后接下來(lái)要做的通常就是改——改文字、改結(jié)構(gòu)、改樣式、改屬性。這些操作看著簡(jiǎn)單方法之間的邊界如果拿不準(zhǔn)很容易出現(xiàn)文本丟了樣式樣式溢出到無(wú)關(guān)元素等離奇問(wèn)題。4.1 innerHTML 與 textContent 的安全分界innerHTML 屬性會(huì)讀取或設(shè)置元素內(nèi)部的 HTML 結(jié)構(gòu)你給它賦一段包含標(biāo)簽的字符串它會(huì)解析成真實(shí)節(jié)點(diǎn)textContent / innerText 則只處理純文本內(nèi)容任何 HTML 標(biāo)簽都會(huì)被當(dāng)成普通字符顯示。這兩個(gè)屬性最大的區(qū)別就是數(shù)據(jù)類(lèi)型一個(gè)是結(jié)構(gòu)一個(gè)是文本。很多動(dòng)態(tài)渲染需求用 innerHTML 確實(shí)快、直觀但安全上必須保持警惕。比如評(píng)論功能如果把用戶(hù)輸入的img srcx onerroralert(1)直接拼進(jìn) innerHTML瀏覽器一旦解析它就是一次可被利用的機(jī)會(huì)。防御方式不復(fù)雜——要么用 textContent 賦值要么先做轉(zhuǎn)義把換成lt;。我個(gè)人的習(xí)慣是項(xiàng)目里凡是跟用戶(hù)輸入相關(guān)的一律用 textContent / createTextNode只有業(yè)務(wù)確信內(nèi)容是可信的靜態(tài)模板時(shí)才允許 innerHTML。另一個(gè)容易被忽略的點(diǎn)是性能差異。賦值給 innerHTML瀏覽器需要重新解析整個(gè)子樹(shù)的 HTML 字符串而 textContent 只是替換文本節(jié)點(diǎn)開(kāi)銷(xiāo)小得多。如果你只是改一個(gè)按鈕的文字完全沒(méi)必要用 innerHTML。這種地方省一點(diǎn)頁(yè)面在高頻更新時(shí)差距就出來(lái)了。4.2 屬性操作的三種姿勢(shì)屬性操作有幾種親屬關(guān)系不太一樣的方式用的時(shí)候要分清直接通過(guò)點(diǎn)語(yǔ)法訪問(wèn)比如el.id xx、el.href ...。優(yōu)點(diǎn)是簡(jiǎn)潔但不是所有屬性都能用點(diǎn)語(yǔ)法直接映射比如自定義屬性>button idbackTop classback-top hidden返回頂部/button.back-top { position: fixed; right: 30px; bottom: 60px; padding: 10px 16px; border: none; border-radius: 6px; background: #1677ff; color: #fff; cursor: pointer; transition: opacity 0.3s; } .back-top.hidden { opacity: 0; pointer-events: none; }const backTopBtn document.getElementById(backTop); // 1. 監(jiān)聽(tīng)滾動(dòng)控制按鈕顯隱 window.addEventListener(scroll, () { if (window.scrollY 300) { backTopBtn.classList.remove(hidden); } else { backTopBtn.classList.add(hidden); } }); // 2. 點(diǎn)擊返回頂部 backTopBtn.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });這套代碼用到了這一章的核心方法getElementById 查找按鈕classList.add / remove 控制顯隱addEventListener 監(jiān)聽(tīng)滾動(dòng)和點(diǎn)擊window.scrollTo 完成滾動(dòng)。整套邏輯沒(méi)有任何多余的庫(kù)純粹的原生 DOM 方法就能跑通。7.3 性能與體驗(yàn)優(yōu)化基礎(chǔ)版能工作但生產(chǎn)環(huán)境我會(huì)再加兩個(gè)優(yōu)化。第一個(gè)優(yōu)化是滾動(dòng)事件的節(jié)流。scroll 事件觸發(fā)頻率極高每次滾動(dòng)幾十像素就能觸發(fā)十幾次如果回調(diào)里有復(fù)雜操作頁(yè)面就卡。簡(jiǎn)單節(jié)流用 requestAnimationFrame 就能做它會(huì)把多次回調(diào)合并到每一幀只執(zhí)行一次let ticking false; window.addEventListener(scroll, () { if (ticking) return; ticking true; requestAnimationFrame(() { if (window.scrollY 300) { backTopBtn.classList.remove(hidden); } else { backTopBtn.classList.add(hidden); } ticking false; }); });第二個(gè)優(yōu)化是支持用戶(hù)中途打斷。如果點(diǎn)擊返回頂部后用戶(hù)立刻滾動(dòng)基礎(chǔ)版的 smooth 行為會(huì)跟用戶(hù)的操作打架。完善的做法是記錄一個(gè)標(biāo)志位滾動(dòng)事件觸發(fā)時(shí)把標(biāo)志位清零并停止動(dòng)畫(huà)。一般我會(huì)用更可控的方式實(shí)現(xiàn)不用 window.scrollTo 的 behavior而是手動(dòng)用 requestAnimationFrame 做逐幀滾動(dòng)每幀移動(dòng)固定距離滾動(dòng)事件打斷時(shí)取消動(dòng)畫(huà)幀let scrollAnimationId null; function scrollToTop() { if (scrollAnimationId) { cancelAnimationFrame(scrollAnimationId); } const startY window.scrollY; const distance -startY; const duration 400; const startTime performance.now(); function step(currentTime) { const progress Math.min((currentTime - startTime) / duration, 1); const eased 1 - Math.pow(1 - progress, 3); // easeOutCubic window.scrollTo(0, startY distance * eased); if (progress 1) { scrollAnimationId requestAnimationFrame(step); } } scrollAnimationId requestAnimationFrame(step); } window.addEventListener(scroll, () { if (scrollAnimationId) { cancelAnimationFrame(scrollAnimationId); scrollAnimationId null; } // ...顯隱控制 });這段代碼里用到了 cancelAnimationFrame 清理動(dòng)畫(huà)幀核心思路是視覺(jué)上用戶(hù)一動(dòng)程序自動(dòng)讓位。這也是整套 DOM 方法配合中最值得體會(huì)的部分方法本身不復(fù)雜復(fù)雜的是方法之間的節(jié)奏控制。8. 返回值細(xì)節(jié)與性能陷阱這些年我踩過(guò)的 DOM 方法坑最后這一章聊聊實(shí)際開(kāi)發(fā)中因?yàn)?DOM 方法用得不當(dāng)而踩過(guò)的坑。每個(gè)坑背后都是返回值類(lèi)型、實(shí)時(shí)性或者事件綁定細(xì)節(jié)在作祟很值得花時(shí)間沉淀總結(jié)。8.1 高頻 DOM 操作的布局抖動(dòng)布局抖動(dòng)Layout Thrashing是讀和寫(xiě)交替太多導(dǎo)致的性能問(wèn)題。比如在一個(gè)循環(huán)里先讀 offsetHeight再修改 style再讀 offsetWidth再修改 style……每次讀到布局相關(guān)屬性時(shí)瀏覽器為了保證結(jié)果是最新的會(huì)被迫重新執(zhí)行一次布局計(jì)算而這種計(jì)算如果刷得比渲染還快性能就崩了。解決思路是讀寫(xiě)分離先把所有需要的布局?jǐn)?shù)據(jù)讀出來(lái)存好再統(tǒng)一修改。這個(gè)原則聽(tīng)著簡(jiǎn)單但一旦代碼量大很容易在不經(jīng)意間又混著寫(xiě)。我對(duì)新人的建議是凡是高頻操作 DOM 的地方優(yōu)先考慮用 DocumentFragment 批量創(chuàng)建插入業(yè)務(wù)里循環(huán)改樣式時(shí)也盡量把修改集中到一個(gè)函數(shù)里執(zhí)行。通過(guò)方法組合把操作批次化性能提升是最直接的。8.2 動(dòng)態(tài)渲染節(jié)點(diǎn)的綁定失效我給每個(gè) li 都綁了 click為什么新加的 li 沒(méi)反應(yīng)——這是我在論壇里看到頻率最高的問(wèn)題之一。本質(zhì)原因很簡(jiǎn)單你給 li 綁事件是在頁(yè)面初始渲染時(shí)執(zhí)行的后來(lái)動(dòng)態(tài)新增的 li 根本沒(méi)有經(jīng)過(guò)那次綁定自然沒(méi)有監(jiān)聽(tīng)器。解決辦法前面已經(jīng)講了用事件委托。把監(jiān)聽(tīng)器掛在一個(gè)始終保持不變的父容器上通過(guò) closest 判斷目標(biāo)是不是想要的元素。我經(jīng)歷過(guò)的很多莫名其妙的 bug 最后都是這么解決的。這不僅是一個(gè)技術(shù)選型更是一種面向動(dòng)態(tài)頁(yè)面的思維模式不要給未來(lái)的節(jié)點(diǎn)綁定任何東西你要綁定的是那個(gè)永遠(yuǎn)存在的容器。8.3 常見(jiàn)方法返回 null/undefined的排查鏈路最后一個(gè)高頻困惑為什么 getElementById 返回 null為什么 querySelector 返回 null我總結(jié)了一套排查鏈路按順序走基本都能定位先確認(rèn)腳本執(zhí)行時(shí)機(jī)是不是在 DOM 加載之前。如果你把 script 放在 head 里且沒(méi)有 defer這時(shí)候 DOM 樹(shù)還沒(méi)構(gòu)建完查找當(dāng)然是空。解決方法是把 script 放到 body 底部或者用 DOMContentLoaded 事件包一層。檢查選擇器有沒(méi)有打錯(cuò)。ID 大小寫(xiě)敏感class 要帶點(diǎn)號(hào)屬性選擇器要核對(duì)引號(hào)。瀏覽器控制臺(tái)里可以直接document.querySelector(...)試一下立刻能驗(yàn)證。檢查是不是拼寫(xiě)和命名空間的問(wèn)題。比如自定義元素在某些環(huán)境里渲染前查不到需要稍微等一下或使用 MutationObserver 監(jiān)聽(tīng)。最后別忘了看動(dòng)態(tài)組件如果元素由前端框架渲染原生查找方法直接執(zhí)行時(shí)框架還沒(méi)來(lái)得及生成 DOM應(yīng)該等生命周期鉤子或 nextTick 再查。這套鏈路我建議直接截圖保存排查時(shí)一步步對(duì)照比憑空猜測(cè)快得多。畢竟 DOM 方法本身不會(huì)騙你返回 null 的時(shí)候它已經(jīng)誠(chéng)實(shí)地告訴你此刻這棵樹(shù)里沒(méi)有你要找的那根枝條。寫(xiě)到這里我已經(jīng)把 HTML DOM 方法從查找、創(chuàng)建、修改、事件到遍歷、實(shí)戰(zhàn)和踩坑完整講了一遍。就我的體會(huì)而言DOM 方法不難難的是養(yǎng)成樹(shù)結(jié)構(gòu)思維——每行代碼都要想清楚操作的是哪個(gè)層級(jí)、什么節(jié)點(diǎn)類(lèi)型、會(huì)不會(huì)影響實(shí)時(shí)集合。把這些邊界理順之后再寫(xiě)頁(yè)面交互你會(huì)明顯感覺(jué)到不再是一個(gè)方法一個(gè)方法地查字典而是整個(gè)操作鏈路在腦子里自動(dòng)跑通。后面你在項(xiàng)目里遇到更復(fù)雜的場(chǎng)景比如虛擬滾動(dòng)、表格編輯、圖表聯(lián)動(dòng)回頭再來(lái)對(duì)照這篇文章提到的套路和原則會(huì)發(fā)現(xiàn)底層邏輯始終是同一套。 HTML DOM方法詳解：從元素查找到事件委托與性能優(yōu)化實(shí)戰(zhàn)
1. 先拆掉DOM 很高深的濾鏡它不過(guò)是一棵能改的樹(shù)剛學(xué)前端那會(huì)兒我對(duì) HTML DOM 方法一直有種說(shuō)不出的別扭文檔翻了一遍每個(gè)方法名字都認(rèn)識(shí)一寫(xiě)頁(yè)面就全忘光。getElementById、createElement、appendChild 這些單獨(dú)拎出來(lái)都好理解可真要在頁(yè)面上加個(gè)彈窗、做個(gè)動(dòng)態(tài)列表常常不知道從哪個(gè)方法下手。后來(lái)寫(xiě)多了才慢慢意識(shí)到問(wèn)題不在記性而是我一直沒(méi)把 DOM 方法的體系串成一張網(wǎng)。先說(shuō)一個(gè)最基礎(chǔ)、但很多人沒(méi)真正想透的問(wèn)題DOM 到底是什么它不是你在編輯器里寫(xiě)的那堆 HTML 標(biāo)簽而是瀏覽器把你的 HTML 解析完之后在內(nèi)存里生成的一棵對(duì)象樹(shù)。HTML 文本只是原料DOM 樹(shù)才是瀏覽器實(shí)際用來(lái)理解、渲染和交互的真身。你的 CSS 選擇器能生效、JavaScript 能操作頁(yè)面本質(zhì)都是在跟這棵樹(shù)打交道。方法在這里扮演什么角色如果 DOM 是一棵長(zhǎng)在瀏覽器里的樹(shù)那 HTML DOM 方法就是你手里的剪刀、鏟子和嫁接刀。想剪掉某個(gè)節(jié)點(diǎn)用 removeChild想嫁接一個(gè)新的子樹(shù)用 appendChild想找到某根枝條用 querySelector。瀏覽器對(duì)這棵樹(shù)的每一次改動(dòng)幾乎都必須通過(guò)方法完成直接賦值改屬性只是其中一小類(lèi)例外。我在帶新人時(shí)最喜歡打一個(gè)比方HTML 是房子的設(shè)計(jì)圖紙DOM 是蓋好的毛坯房而 DOM 方法就是你的裝修工具。圖紙你可以反復(fù)改但想動(dòng)毛坯房的墻體、電路和家具沒(méi)有工具就只能干瞪眼。理解了這層關(guān)系你就明白為什么所有前端框架React、Vue不管包了多少層底層最后還是要回到這些原生方法上——因?yàn)樽烂嬷挥幸粋€(gè)工具始終出自同一套體系。1.1 為什么你總記不住 DOM 方法我觀察過(guò)很多初學(xué)者記不住 DOM 方法的根本原因不是笨而是把方法當(dāng)成了獨(dú)立的單詞去背。實(shí)際上這些方法背后只有幾條主線找查找、建創(chuàng)建、插插入、改修改、刪刪除、聽(tīng)事件監(jiān)聽(tīng)。你看任何頁(yè)面操作都逃不出這六個(gè)動(dòng)作你不需要背幾十個(gè)孤立的名字你只需要記住這六個(gè)動(dòng)詞然后把每個(gè)動(dòng)作下的 2~3 個(gè)常用方法記牢就已經(jīng)覆蓋了日常開(kāi)發(fā) 90% 以上的場(chǎng)景。另一個(gè)記不住的原因是沒(méi)有意識(shí)到方法之間經(jīng)常配合使用。比如新增一個(gè)列表項(xiàng)標(biāo)準(zhǔn)鏈路是 createElement 創(chuàng)建 - 設(shè)置內(nèi)容 - appendChild 插入三步缺一不可。很多人只背了 createElement不知道后面還要插到樹(shù)里結(jié)果節(jié)點(diǎn)建了但頁(yè)面上看不到。這就好比你加工了一個(gè)零件但沒(méi)裝到機(jī)器上機(jī)器當(dāng)然不會(huì)轉(zhuǎn)。所以我在后文會(huì)把方法按操作鏈來(lái)講而不是按字母表排列。1.2 DOM 方法全景圖在深入每個(gè)方法之前先用一張表把整個(gè)體系鋪開(kāi)。這張表是我自己給團(tuán)隊(duì)培訓(xùn)時(shí)用的覆蓋了日常開(kāi)發(fā)最常見(jiàn)的入口動(dòng)作類(lèi)型核心方法典型場(chǎng)景查找元素getElementById / getElementsByClassName / querySelector / querySelectorAll / closest拿到要操作的目標(biāo)節(jié)點(diǎn)創(chuàng)建節(jié)點(diǎn)createElement / createTextNode / cloneNode / createDocumentFragment生成新的元素、文本或批量容器插入節(jié)點(diǎn)appendChild / insertBefore / insertAdjacentHTML / prepend / after把節(jié)點(diǎn)放進(jìn)指定位置修改內(nèi)容textContent / innerHTML / setAttribute / style / classList改文字、改結(jié)構(gòu)、改樣式、改屬性刪除節(jié)點(diǎn)removeChild / remove從樹(shù)中移除節(jié)點(diǎn)事件相關(guān)addEventListener / removeEventListener / dispatchEvent綁定、解綁、觸發(fā)事件遍歷關(guān)系parentNode / children / firstElementChild / nextElementSibling在節(jié)點(diǎn)之間移動(dòng)看這張表你會(huì)發(fā)現(xiàn)方法就那么幾十個(gè)真正高頻的就上面這些。后文我會(huì)逐個(gè)展開(kāi)講清楚為什么這么做和坑在哪里而不是簡(jiǎn)單羅列 API 文檔。2. 找元素的方法getElementById、querySelector 到底該用誰(shuí)查找元素是所有 DOM 操作的第一步就像你拿鑰匙開(kāi)門(mén)——鑰匙找錯(cuò)了后面全是白費(fèi)。很多新人問(wèn)的第一個(gè)問(wèn)題就是這么多查找方法我到底該用哪個(gè)老實(shí)說(shuō)這個(gè)問(wèn)題的答案隨著前端發(fā)展一直在變。2.1 老派三兄弟getElementById、getElementsByClassName、getElementsByTagName這三個(gè)方法非常典型它們從前端早期一直活到今天但現(xiàn)在很多新手對(duì)它們的脾氣已經(jīng)不熟了。getElementById 最簡(jiǎn)單參數(shù)是 ID 字符串返回匹配的元素對(duì)象如果找不到返回 null。它的特點(diǎn)是一個(gè) ID 只能對(duì)應(yīng)一個(gè)元素所以語(yǔ)義上天生就是獨(dú)立節(jié)點(diǎn)。過(guò)去我們用document.getElementById(app)拿到根節(jié)點(diǎn)再往里面塞東西現(xiàn)在雖然也可以用但寫(xiě)法上逐漸被 querySelector 替代。不過(guò)有一個(gè)細(xì)節(jié)值得記住getElementById 只能掛在 document 上調(diào)用不能通過(guò)某個(gè)父元素去調(diào)比如parent.getElementById(...)會(huì)報(bào)錯(cuò)這是它的限制。getElementsByClassName 和 getElementsByTagName 就有點(diǎn)脾氣了它們返回的不是單個(gè)元素而是一個(gè) HTMLCollection——一個(gè)活的集合。這個(gè)集合不是靜態(tài)快照而是跟 DOM 樹(shù)實(shí)時(shí)聯(lián)動(dòng)。什么意思你先把集合存進(jìn)變量再往頁(yè)面里新增一個(gè)匹配元素回頭再看這個(gè)集合變量長(zhǎng)度竟然變了。這在某些場(chǎng)景下是好事但在循環(huán)里就是災(zāi)難——邊遍歷邊增刪會(huì)導(dǎo)致索引錯(cuò)亂我在第 8 章會(huì)詳細(xì)講這個(gè)坑。2.2 萬(wàn)能查詢(xún)的 querySelector 與 querySelectorAllquerySelector 和 querySelectorAll 是后來(lái)瀏覽器原生支持的選擇器查詢(xún)方法它們接受任何 CSS 選擇器字符串比如#app .item、ul li:first-child、[data-typebutton]。這是它們最大的優(yōu)勢(shì)你在 CSS 里怎么寫(xiě)選擇器在 JS 里就能怎么寫(xiě)心智模型完全統(tǒng)一。兩個(gè)方法的區(qū)別在于返回值querySelector 返回第一個(gè)匹配的元素找不到返回 nullquerySelectorAll 返回所有匹配元素的 NodeList靜態(tài)集合。注意這里我特意寫(xiě)了靜態(tài)querySelectorAll 返回的 NodeList 是快照后續(xù) DOM 變化不會(huì)影響它。這一點(diǎn)跟 getElementsByClassName 的 HTMLCollection 正好相反用的時(shí)候要分清楚——如果你需要實(shí)時(shí)反映頁(yè)面狀態(tài)用 Collection如果你只是想拿當(dāng)前這一批用靜態(tài)的 NodeList 更可控不容易在循環(huán)里出bug。有個(gè)實(shí)際經(jīng)驗(yàn)在組件開(kāi)發(fā)里我?guī)缀踔挥?querySelector / querySelectorAll 和 getElementById很少用 getElementsByClassName。原因一個(gè)是 CSS 選擇器表達(dá)能力強(qiáng)另一個(gè)就是靜態(tài)集合在復(fù)雜邏輯里更好預(yù)測(cè)不會(huì)出現(xiàn)明明刪了怎么還有的靈異現(xiàn)象。2.3 查找方法的實(shí)時(shí)性差異這里值得用一張表把實(shí)時(shí)性差異釘死因?yàn)槲野l(fā)現(xiàn)這是面試常問(wèn)、實(shí)戰(zhàn)常錯(cuò)的地方方法返回類(lèi)型是否實(shí)時(shí)找不到時(shí)getElementByIdElement-nullgetElementsByClassNameHTMLCollection是空集合getElementsByTagNameHTMLCollection是空集合querySelectorElement-nullquerySelectorAllNodeList否空集合實(shí)時(shí)集合聽(tīng)起來(lái)很智能實(shí)際上在項(xiàng)目里容易埋雷。我記得有一次做無(wú)限滾動(dòng)列表循環(huán)里用 getElementsByClassName 實(shí)時(shí)集合判斷是否還有更多節(jié)點(diǎn)因?yàn)槊看?append 后集合長(zhǎng)度自動(dòng)變導(dǎo)致判斷條件永遠(yuǎn)不為假最后內(nèi)存直接爆掉。換成 querySelectorAll 靜態(tài)快照后問(wèn)題立刻消失。不是說(shuō)實(shí)時(shí)集合沒(méi)用但你至少要知道它在你代碼里會(huì)自己長(zhǎng)大。3. 造元素與插元素讓新節(jié)點(diǎn)在正確位置落地找到目標(biāo)元素之后下一步通常是生成新的節(jié)點(diǎn)并把它放進(jìn)頁(yè)面。這個(gè)環(huán)節(jié)的每一步我都會(huì)拆開(kāi)講因?yàn)樗?DOM 操作里最容易做成能用但很糙的部分。3.1 createElement createTextNode 的黃金搭檔createElement 的作用是創(chuàng)建元素節(jié)點(diǎn)但它創(chuàng)建出來(lái)的只是一個(gè)孤兒節(jié)點(diǎn)——存在于內(nèi)存里但不在 DOM 樹(shù)上頁(yè)面不會(huì)顯示。想讓它顯示必須找到父節(jié)點(diǎn)用 appendChild 或 insertBefore 插入。createTextNode 則用于創(chuàng)建文本節(jié)點(diǎn)。很多人寫(xiě)動(dòng)態(tài)內(nèi)容時(shí)圖省事直接給元素的 innerHTML 賦字符串這在處理純文本時(shí)其實(shí)藏著 XSS 風(fēng)險(xiǎn)。更好的做法是用 createTextNode 創(chuàng)建文本節(jié)點(diǎn)瀏覽器會(huì)把它內(nèi)容里的、等字符正當(dāng)?shù)禺?dāng)成文本處理不會(huì)解釋成 HTML 標(biāo)簽。這句話我建議所有做前端的人都認(rèn)真讀一遍textContent/createTextNode處理的是文本innerHTML處理的是HTML兩者處理的數(shù)據(jù)類(lèi)型根本不同。用戶(hù)輸入的數(shù)據(jù)永遠(yuǎn)當(dāng)作文本處理永遠(yuǎn)不要直接拼進(jìn) innerHTML這是我做前端以來(lái)守住的最重要的一條安全底線。3.2 appendChild、insertBefore 與節(jié)點(diǎn)位置控制appendChild 把一個(gè)節(jié)點(diǎn)追加到父元素的最后一個(gè)子節(jié)點(diǎn)位置這是最常見(jiàn)的操作。但有時(shí)候你想插到指定位置比如列表第二項(xiàng)后面這時(shí)候 appendChild 就不夠了要?jiǎng)佑?insertBefore。insertBefore 接收兩個(gè)參數(shù)語(yǔ)法是parent.insertBefore(newNode, referenceNode)意思是把 newNode 插到 referenceNode 的前面。如果第二個(gè)參數(shù)傳 null它等價(jià)于 appendChild把節(jié)點(diǎn)追加到末尾。這里有個(gè)小記憶技巧insertBefore 是插到某節(jié)點(diǎn)前面所以第二個(gè)參數(shù)是參照物是后面那個(gè)節(jié)點(diǎn)不是插到第幾個(gè)位置。很多人第一次用會(huì)把參數(shù)順序搞反我建議默認(rèn)先寫(xiě)好參照節(jié)點(diǎn)再?zèng)Q定前面還是后面。還有一個(gè)必須知道的行為如果你把一個(gè)已經(jīng)存在于 DOM 中的節(jié)點(diǎn)傳給 appendChild 或 insertBefore瀏覽器不會(huì)復(fù)制它而是把它從原位置移動(dòng)過(guò)來(lái)。這個(gè)特性有時(shí)候會(huì)嚇到人——明明只是想把某元素挪個(gè)位置結(jié)果它從原來(lái)的地方消失了。其實(shí)這不是 bug而是 DOM 的移動(dòng)語(yǔ)義。如果真想復(fù)制得先用 cloneNode(true) 克隆一份再插。3.3 DocumentFragment批量插入的性能關(guān)鍵DocumentFragment 是一個(gè)專(zhuān)門(mén)用來(lái)當(dāng)臨時(shí)容器的節(jié)點(diǎn)。它有個(gè)特性你在它上面 append 子節(jié)點(diǎn)頁(yè)面不會(huì)立即更新等它整體被插入 DOM 后它自己不會(huì)出現(xiàn)在樹(shù)里只有它包含的子節(jié)點(diǎn)會(huì)落地。換句話說(shuō)它是一個(gè)中轉(zhuǎn)站。為什么需要中轉(zhuǎn)站因?yàn)槊客?DOM 樹(shù)里插一次節(jié)點(diǎn)瀏覽器都可能觸發(fā)回流或重繪頻繁操作會(huì)卡頓。通過(guò) DocumentFragment 先把所有要插入的節(jié)點(diǎn)組裝好再一次插進(jìn)真實(shí) DOM就把 N 次頁(yè)面更新壓縮成了 1 次。我在渲染長(zhǎng)列表時(shí)幾乎必用這個(gè)模式比如一百條數(shù)據(jù)的列表直接循環(huán) appendChild 100 次和用 fragment 組裝后插一次肉眼都能感覺(jué)到流暢度差異。3.4 insertAdjacentHTML另一種思路除了 appendChild 系列還有一個(gè)方法被嚴(yán)重低估insertAdjacentHTML。它接受兩個(gè)參數(shù)第一個(gè)是插入位置beforebegin、afterbegin、beforeend、afterend第二個(gè)是 HTML 字符串。比如el.insertAdjacentHTML(beforeend, li新項(xiàng)/li)等價(jià)于在 el 內(nèi)部的末尾追加一段 HTML。它的優(yōu)點(diǎn)是寫(xiě)法直觀適合插入一段由字符串拼好的結(jié)構(gòu)返回值還不是節(jié)點(diǎn)而是 undefined所以別指望它返回插入的元素。要注意它的定位是基于某一個(gè)元素的外部或內(nèi)部beforebegin 是元素外面之前afterend 是元素外面之后afterbegin 是元素內(nèi)部第一個(gè)子節(jié)點(diǎn)之前beforeend 是元素內(nèi)部最后一個(gè)子節(jié)點(diǎn)之后。這四個(gè)方位在寫(xiě)復(fù)雜布局時(shí)相當(dāng)好用尤其是做內(nèi)容流插入的場(chǎng)景。但安全提醒依然適用不要把用戶(hù)輸入直接塞進(jìn) HTML 字符串。4. 改內(nèi)容與改屬性innerHTML、textContent、classList 的邊界感節(jié)點(diǎn)插進(jìn)去之后接下來(lái)要做的通常就是改——改文字、改結(jié)構(gòu)、改樣式、改屬性。這些操作看著簡(jiǎn)單方法之間的邊界如果拿不準(zhǔn)很容易出現(xiàn)文本丟了樣式樣式溢出到無(wú)關(guān)元素等離奇問(wèn)題。4.1 innerHTML 與 textContent 的安全分界innerHTML 屬性會(huì)讀取或設(shè)置元素內(nèi)部的 HTML 結(jié)構(gòu)你給它賦一段包含標(biāo)簽的字符串它會(huì)解析成真實(shí)節(jié)點(diǎn)textContent / innerText 則只處理純文本內(nèi)容任何 HTML 標(biāo)簽都會(huì)被當(dāng)成普通字符顯示。這兩個(gè)屬性最大的區(qū)別就是數(shù)據(jù)類(lèi)型一個(gè)是結(jié)構(gòu)一個(gè)是文本。很多動(dòng)態(tài)渲染需求用 innerHTML 確實(shí)快、直觀但安全上必須保持警惕。比如評(píng)論功能如果把用戶(hù)輸入的img srcx onerroralert(1)直接拼進(jìn) innerHTML瀏覽器一旦解析它就是一次可被利用的機(jī)會(huì)。防御方式不復(fù)雜——要么用 textContent 賦值要么先做轉(zhuǎn)義把換成lt;。我個(gè)人的習(xí)慣是項(xiàng)目里凡是跟用戶(hù)輸入相關(guān)的一律用 textContent / createTextNode只有業(yè)務(wù)確信內(nèi)容是可信的靜態(tài)模板時(shí)才允許 innerHTML。另一個(gè)容易被忽略的點(diǎn)是性能差異。賦值給 innerHTML瀏覽器需要重新解析整個(gè)子樹(shù)的 HTML 字符串而 textContent 只是替換文本節(jié)點(diǎn)開(kāi)銷(xiāo)小得多。如果你只是改一個(gè)按鈕的文字完全沒(méi)必要用 innerHTML。這種地方省一點(diǎn)頁(yè)面在高頻更新時(shí)差距就出來(lái)了。4.2 屬性操作的三種姿勢(shì)屬性操作有幾種親屬關(guān)系不太一樣的方式用的時(shí)候要分清直接通過(guò)點(diǎn)語(yǔ)法訪問(wèn)比如el.id xx、el.href ...。優(yōu)點(diǎn)是簡(jiǎn)潔但不是所有屬性都能用點(diǎn)語(yǔ)法直接映射比如自定義屬性>button idbackTop classback-top hidden返回頂部/button.back-top { position: fixed; right: 30px; bottom: 60px; padding: 10px 16px; border: none; border-radius: 6px; background: #1677ff; color: #fff; cursor: pointer; transition: opacity 0.3s; } .back-top.hidden { opacity: 0; pointer-events: none; }const backTopBtn document.getElementById(backTop); // 1. 監(jiān)聽(tīng)滾動(dòng)控制按鈕顯隱 window.addEventListener(scroll, () { if (window.scrollY 300) { backTopBtn.classList.remove(hidden); } else { backTopBtn.classList.add(hidden); } }); // 2. 點(diǎn)擊返回頂部 backTopBtn.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });這套代碼用到了這一章的核心方法getElementById 查找按鈕classList.add / remove 控制顯隱addEventListener 監(jiān)聽(tīng)滾動(dòng)和點(diǎn)擊window.scrollTo 完成滾動(dòng)。整套邏輯沒(méi)有任何多余的庫(kù)純粹的原生 DOM 方法就能跑通。7.3 性能與體驗(yàn)優(yōu)化基礎(chǔ)版能工作但生產(chǎn)環(huán)境我會(huì)再加兩個(gè)優(yōu)化。第一個(gè)優(yōu)化是滾動(dòng)事件的節(jié)流。scroll 事件觸發(fā)頻率極高每次滾動(dòng)幾十像素就能觸發(fā)十幾次如果回調(diào)里有復(fù)雜操作頁(yè)面就卡。簡(jiǎn)單節(jié)流用 requestAnimationFrame 就能做它會(huì)把多次回調(diào)合并到每一幀只執(zhí)行一次let ticking false; window.addEventListener(scroll, () { if (ticking) return; ticking true; requestAnimationFrame(() { if (window.scrollY 300) { backTopBtn.classList.remove(hidden); } else { backTopBtn.classList.add(hidden); } ticking false; }); });第二個(gè)優(yōu)化是支持用戶(hù)中途打斷。如果點(diǎn)擊返回頂部后用戶(hù)立刻滾動(dòng)基礎(chǔ)版的 smooth 行為會(huì)跟用戶(hù)的操作打架。完善的做法是記錄一個(gè)標(biāo)志位滾動(dòng)事件觸發(fā)時(shí)把標(biāo)志位清零并停止動(dòng)畫(huà)。一般我會(huì)用更可控的方式實(shí)現(xiàn)不用 window.scrollTo 的 behavior而是手動(dòng)用 requestAnimationFrame 做逐幀滾動(dòng)每幀移動(dòng)固定距離滾動(dòng)事件打斷時(shí)取消動(dòng)畫(huà)幀let scrollAnimationId null; function scrollToTop() { if (scrollAnimationId) { cancelAnimationFrame(scrollAnimationId); } const startY window.scrollY; const distance -startY; const duration 400; const startTime performance.now(); function step(currentTime) { const progress Math.min((currentTime - startTime) / duration, 1); const eased 1 - Math.pow(1 - progress, 3); // easeOutCubic window.scrollTo(0, startY distance * eased); if (progress 1) { scrollAnimationId requestAnimationFrame(step); } } scrollAnimationId requestAnimationFrame(step); } window.addEventListener(scroll, () { if (scrollAnimationId) { cancelAnimationFrame(scrollAnimationId); scrollAnimationId null; } // ...顯隱控制 });這段代碼里用到了 cancelAnimationFrame 清理動(dòng)畫(huà)幀核心思路是視覺(jué)上用戶(hù)一動(dòng)程序自動(dòng)讓位。這也是整套 DOM 方法配合中最值得體會(huì)的部分方法本身不復(fù)雜復(fù)雜的是方法之間的節(jié)奏控制。8. 返回值細(xì)節(jié)與性能陷阱這些年我踩過(guò)的 DOM 方法坑最后這一章聊聊實(shí)際開(kāi)發(fā)中因?yàn)?DOM 方法用得不當(dāng)而踩過(guò)的坑。每個(gè)坑背后都是返回值類(lèi)型、實(shí)時(shí)性或者事件綁定細(xì)節(jié)在作祟很值得花時(shí)間沉淀總結(jié)。8.1 高頻 DOM 操作的布局抖動(dòng)布局抖動(dòng)Layout Thrashing是讀和寫(xiě)交替太多導(dǎo)致的性能問(wèn)題。比如在一個(gè)循環(huán)里先讀 offsetHeight再修改 style再讀 offsetWidth再修改 style……每次讀到布局相關(guān)屬性時(shí)瀏覽器為了保證結(jié)果是最新的會(huì)被迫重新執(zhí)行一次布局計(jì)算而這種計(jì)算如果刷得比渲染還快性能就崩了。解決思路是讀寫(xiě)分離先把所有需要的布局?jǐn)?shù)據(jù)讀出來(lái)存好再統(tǒng)一修改。這個(gè)原則聽(tīng)著簡(jiǎn)單但一旦代碼量大很容易在不經(jīng)意間又混著寫(xiě)。我對(duì)新人的建議是凡是高頻操作 DOM 的地方優(yōu)先考慮用 DocumentFragment 批量創(chuàng)建插入業(yè)務(wù)里循環(huán)改樣式時(shí)也盡量把修改集中到一個(gè)函數(shù)里執(zhí)行。通過(guò)方法組合把操作批次化性能提升是最直接的。8.2 動(dòng)態(tài)渲染節(jié)點(diǎn)的綁定失效我給每個(gè) li 都綁了 click為什么新加的 li 沒(méi)反應(yīng)——這是我在論壇里看到頻率最高的問(wèn)題之一。本質(zhì)原因很簡(jiǎn)單你給 li 綁事件是在頁(yè)面初始渲染時(shí)執(zhí)行的后來(lái)動(dòng)態(tài)新增的 li 根本沒(méi)有經(jīng)過(guò)那次綁定自然沒(méi)有監(jiān)聽(tīng)器。解決辦法前面已經(jīng)講了用事件委托。把監(jiān)聽(tīng)器掛在一個(gè)始終保持不變的父容器上通過(guò) closest 判斷目標(biāo)是不是想要的元素。我經(jīng)歷過(guò)的很多莫名其妙的 bug 最后都是這么解決的。這不僅是一個(gè)技術(shù)選型更是一種面向動(dòng)態(tài)頁(yè)面的思維模式不要給未來(lái)的節(jié)點(diǎn)綁定任何東西你要綁定的是那個(gè)永遠(yuǎn)存在的容器。8.3 常見(jiàn)方法返回 null/undefined的排查鏈路最后一個(gè)高頻困惑為什么 getElementById 返回 null為什么 querySelector 返回 null我總結(jié)了一套排查鏈路按順序走基本都能定位先確認(rèn)腳本執(zhí)行時(shí)機(jī)是不是在 DOM 加載之前。如果你把 script 放在 head 里且沒(méi)有 defer這時(shí)候 DOM 樹(shù)還沒(méi)構(gòu)建完查找當(dāng)然是空。解決方法是把 script 放到 body 底部或者用 DOMContentLoaded 事件包一層。檢查選擇器有沒(méi)有打錯(cuò)。ID 大小寫(xiě)敏感class 要帶點(diǎn)號(hào)屬性選擇器要核對(duì)引號(hào)。瀏覽器控制臺(tái)里可以直接document.querySelector(...)試一下立刻能驗(yàn)證。檢查是不是拼寫(xiě)和命名空間的問(wèn)題。比如自定義元素在某些環(huán)境里渲染前查不到需要稍微等一下或使用 MutationObserver 監(jiān)聽(tīng)。最后別忘了看動(dòng)態(tài)組件如果元素由前端框架渲染原生查找方法直接執(zhí)行時(shí)框架還沒(méi)來(lái)得及生成 DOM應(yīng)該等生命周期鉤子或 nextTick 再查。這套鏈路我建議直接截圖保存排查時(shí)一步步對(duì)照比憑空猜測(cè)快得多。畢竟 DOM 方法本身不會(huì)騙你返回 null 的時(shí)候它已經(jīng)誠(chéng)實(shí)地告訴你此刻這棵樹(shù)里沒(méi)有你要找的那根枝條。寫(xiě)到這里我已經(jīng)把 HTML DOM 方法從查找、創(chuàng)建、修改、事件到遍歷、實(shí)戰(zhàn)和踩坑完整講了一遍。就我的體會(huì)而言DOM 方法不難難的是養(yǎng)成樹(shù)結(jié)構(gòu)思維——每行代碼都要想清楚操作的是哪個(gè)層級(jí)、什么節(jié)點(diǎn)類(lèi)型、會(huì)不會(huì)影響實(shí)時(shí)集合。把這些邊界理順之后再寫(xiě)頁(yè)面交互你會(huì)明顯感覺(jué)到不再是一個(gè)方法一個(gè)方法地查字典而是整個(gè)操作鏈路在腦子里自動(dòng)跑通。后面你在項(xiàng)目里遇到更復(fù)雜的場(chǎng)景比如虛擬滾動(dòng)、表格編輯、圖表聯(lián)動(dòng)回頭再來(lái)對(duì)照這篇文章提到的套路和原則會(huì)發(fā)現(xiàn)底層邏輯始終是同一套。