文化公司網(wǎng)站源碼,飲料招商網(wǎng)站大全,哪個(gè)網(wǎng)站教做衣服,大連在哪里前端新手必看#xff1a;30分鐘搞懂DOM操作與JavaScript實(shí)戰(zhàn)技巧 前端新手必看#xff1a;30分鐘搞懂DOM操作與JavaScript實(shí)戰(zhàn)技巧從“頁(yè)面不會(huì)動(dòng)”說(shuō)起DOM 到底是什么——把一座城市塞進(jìn)瀏覽器瀏覽器是怎么把 HTML 變成 DOM 的——一次“城市竣工”的幕后花絮用 JavaScript …前端新手必看30分鐘搞懂DOM操作與JavaScript實(shí)戰(zhàn)技巧前端新手必看30分鐘搞懂DOM操作與JavaScript實(shí)戰(zhàn)技巧從“頁(yè)面不會(huì)動(dòng)”說(shuō)起DOM 到底是什么——把一座城市塞進(jìn)瀏覽器瀏覽器是怎么把 HTML 變成 DOM 的——一次“城市竣工”的幕后花絮用 JavaScript 找到你想操控的元素——“城管”持證上崗動(dòng)手改內(nèi)容innerHTML、textContent 和 innerText 的三角戀動(dòng)態(tài)增刪改查 DOM 節(jié)點(diǎn)——拆遷辦的一天監(jiān)聽(tīng)用戶(hù)行為事件綁定的正確姿勢(shì)——?jiǎng)e再用 οnclickfun() 了批量操作 DOM 時(shí)的性能陷阱——?jiǎng)e讓頁(yè)面卡成 PPT常見(jiàn)“DOM 操作失靈”問(wèn)題排查清單——一把瑞士軍刀讓 DOM 操作更絲滑的小技巧——老鳥(niǎo)的不傳之秘當(dāng)心這些 DOM 操作習(xí)慣正在拖慢你的應(yīng)用——面試常問(wèn)玩轉(zhuǎn)現(xiàn)代 APIMutationObserver 與 IntersectionObserver——給城市裝上監(jiān)控MutationObserver —— 監(jiān)聽(tīng)“拆遷”IntersectionObserver —— 懶加載神器結(jié)語(yǔ)把 DOM 當(dāng)成自家客廳前端新手必看30分鐘搞懂DOM操作與JavaScript實(shí)戰(zhàn)技巧——?jiǎng)e讓“頁(yè)面不會(huì)動(dòng)”成為你職業(yè)生涯的黑歷史從“頁(yè)面不會(huì)動(dòng)”說(shuō)起“我按鈕都寫(xiě)了咋點(diǎn)它就是不動(dòng)”——?jiǎng)e笑十年前我也這么問(wèn)過(guò)。那時(shí)候我把button寫(xiě)得漂漂亮亮CSS 描了邊、上了漸變結(jié)果一按下去瀏覽器像高冷前任毫無(wú)回應(yīng)。問(wèn)題不在顏值而在“神經(jīng)”沒(méi)搭好HTML 只是骨架CSS 是皮相JavaScript 才是神經(jīng)。神經(jīng)要找準(zhǔn)“穴位”——DOM 節(jié)點(diǎn)——才能指揮頁(yè)面動(dòng)起來(lái)。今天這篇就帶你把 DOM 從“聽(tīng)說(shuō)過(guò)”變成“玩得溜”。文章很長(zhǎng)代碼很滿(mǎn)忍得住尿點(diǎn)、耐得住寂寞30 分鐘后你就不是原來(lái)的你。DOM 到底是什么——把一座城市塞進(jìn)瀏覽器官方定義太枯燥文檔對(duì)象模型Document Object Model。說(shuō)人話(huà)瀏覽器把 HTML 變成內(nèi)存里的一棵“家譜樹(shù)”每個(gè)標(biāo)簽是家族成員JavaScript 就是家族理事會(huì)想叫誰(shuí)、想揍誰(shuí)、想給誰(shuí)改名一句話(huà)的事。想象瀏覽器是一座城市HTML 是城市規(guī)劃圖CSS 是裝修隊(duì)DOM 則是竣工后活生生的城市——每棟樓元素都有門(mén)牌號(hào)id、戶(hù)型class、人口子節(jié)點(diǎn)。只要拿到“地圖”DOM 樹(shù)你就能隨時(shí)拆遷、裝修、甚至半夜偷偷給 502 換成 KTV。瀏覽器是怎么把 HTML 變成 DOM 的——一次“城市竣工”的幕后花絮用戶(hù)輸入 URL瀏覽器下載字節(jié)流主線(xiàn)程一邊解壓一邊“詞法分析”——把div、p拆成 token遇到 token 就壓棧構(gòu)造“家譜”——DOM 樹(shù)遇到link、script會(huì)阻塞因?yàn)檠b修隊(duì)CSS和水電工JS要來(lái)改圖紙樹(shù)建完觸發(fā)DOMContentLoaded此時(shí)你可以安全訪(fǎng)問(wèn) DOM等資源全部拉完觸發(fā)load結(jié)論把script丟head里不用defer就像裝修隊(duì)沖進(jìn)毛坯房先貼瓷磚——找不到墻DOM直接全劇終監(jiān)聽(tīng)DOMContentLoaded或給script加defer/async才能確?！俺鞘小币芽⒐ぴ俑悴疬w!-- 錯(cuò)誤示范腳本跑在元素之前 --headscript// 城市還沒(méi)建好console 報(bào) nullconsole.log(document.querySelector(#app));// null/script/headbodydividappHi/div/body!-- 正確示范defer 等竣工再動(dòng)手 --headscriptdeferconsole.log(document.querySelector(#app));// div idapp/script/head用 JavaScript 找到你想操控的元素——“城管”持證上崗遠(yuǎn)古時(shí)代varboxdocument.getElementById(box);// 只能找一個(gè)且 id 寫(xiě)死現(xiàn)代標(biāo)配constboxdocument.querySelector(#box);// CSS 選擇器會(huì)就能找到constallItemsdocument.querySelectorAll(.list-item);// 返回 NodeList不會(huì) live性能八卦getElementById依舊是最快畢竟瀏覽器給 id 建了哈希表querySelector要解析選擇器稍慢但可維護(hù)性高——省得你寫(xiě)一堆ifgetElementsByClassName/TagName返回live HTMLCollection頁(yè)面一邊改、集合一邊變小心死循環(huán)// 死循環(huán)現(xiàn)場(chǎng)邊遍歷邊新增constitemsdocument.getElementsByClassName(item);for(leti0;iitems.length;i){constdivdocument.createElement(div);div.classNameitem;document.body.appendChild(div);// length 實(shí)時(shí) 1循環(huán)到地老天荒}動(dòng)手改內(nèi)容innerHTML、textContent 和 innerText 的三角戀innerHTML能把字符串當(dāng) HTML 解析方便但危險(xiǎn)——像給陌生人開(kāi)門(mén)textContent純文本不解析標(biāo)簽安全、快速innerText看似同 textContent但會(huì)觸發(fā)重排、忽略隱藏元素老瀏覽器還愛(ài)搞兼容差// XSS 慘案constname-IMG-0-;box.innerHTMLdiv歡迎${name}/div;// 執(zhí)行了 alert(xss)// 安全寫(xiě)法box.textContentname;// 把標(biāo)簽當(dāng)字符串瀏覽器不會(huì)解析性能對(duì)比console.time(innerHTML);box.innerHTMLa.repeat(10000);console.timeEnd(innerHTML);// 慢因?yàn)榻馕鲎址甤onsole.time(textContent);box.textContenta.repeat(10000);console.timeEnd(textContent);// 快直接替換文本節(jié)點(diǎn)動(dòng)態(tài)增刪改查 DOM 節(jié)點(diǎn)——拆遷辦的一天創(chuàng)建節(jié)點(diǎn)constlidocument.createElement(li);li.textContent新鄰居;插入節(jié)點(diǎn)// 尾部ul.appendChild(li);// 指定位置ul.insertBefore(li,ul.firstChild);// HTML 字符串大法ul.insertAdjacentHTML(beforeend,li隔壁老王/li);替換 刪除oldNode.replaceWith(newNode);oldNode.remove();// IE 不服需 polyfillDocumentFragment —— 虛擬搬家箱constfragdocument.createDocumentFragment();for(leti0;i1000;i){constlidocument.createElement(li);li.textContenti;frag.appendChild(li);}ul.appendChild(frag);// 只觸發(fā)一次重排監(jiān)聽(tīng)用戶(hù)行為事件綁定的正確姿勢(shì)——?jiǎng)e再用 οnclick“fun()” 了!-- 遠(yuǎn)古寫(xiě)法HTML 與邏輯耦合差評(píng) --buttononclickhandle()點(diǎn)我/button現(xiàn)代標(biāo)準(zhǔn)button.addEventListener(click,handle,false);// 冒泡階段事件流三階段捕獲 - 目標(biāo) - 冒泡Delegation 委托把監(jiān)聽(tīng)器綁定在父級(jí)省內(nèi)存、支持動(dòng)態(tài)子元素// 動(dòng)態(tài)列表點(diǎn) li 彈出內(nèi)容ul.addEventListener(click,e{if(e.target.matches(li)){alert(e.target.textContent);}});阻止冒泡 默認(rèn)行為link.addEventListener(click,e{e.preventDefault();// 阻止跳轉(zhuǎn)e.stopPropagation();// 阻止冒泡});批量操作 DOM 時(shí)的性能陷阱——?jiǎng)e讓頁(yè)面卡成 PPT讀寫(xiě)分離// 壞每次循環(huán)都讀、寫(xiě)觸發(fā)重排for(leti0;i100;i){boxes[i].style.widthboxes[i].offsetWidth10px;}// 好先讀光、再寫(xiě)光constwidths[];for(leti0;i100;i)widths.push(boxes[i].offsetWidth);for(leti0;i100;i)boxes[i].style.widthwidths[i]10px;用requestAnimationFrame做動(dòng)畫(huà)functionslideLeft(el,distance){letstartnull;functionstep(timestamp){if(!start)starttimestamp;constprogresstimestamp-start;constleftMath.min(progress/10,distance);el.style.transformtranslateX(-${left}px);if(leftdistance)requestAnimationFrame(step);}requestAnimationFrame(step);}CSS 類(lèi)切換代替一行行改 style// 壞box.style.backgroundred;box.style.fontSize20px;box.style.padding10px;// 好.box-hot{background:red;font-size:20px;padding:10px;}box.classList.add(box-hot);常見(jiàn)“DOM 操作失靈”問(wèn)題排查清單——一把瑞士軍刀querySelector返回 null腳本跑在元素前面 → 用defer或DOMContentLoaded動(dòng)態(tài)加載的 HTML 找不到Ajax / fetch 插入后節(jié)點(diǎn)才出現(xiàn)監(jiān)聽(tīng)回調(diào)里再查找事件不觸發(fā)檢查是否stopPropagation誤殺檢查目標(biāo)元素是否被其他透明層蓋住內(nèi)存泄漏全局變量保存 DOM 引用、閉包不釋放、事件未removeEventListener讓 DOM 操作更絲滑的小技巧——老鳥(niǎo)的不傳之秘dataset—— 原生版自定義屬性div iduserdata-age18data-cityChengdu/divconstdivdocument.querySelector(#user);console.log(div.dataset.age);// 18closest—— 向上找祖先e.target.closest(li);// 從點(diǎn)擊的 span 找到包裹的 limatches—— 檢查選擇器if(e.target.matches(a.external)){/* 只處理外部鏈接 */}classList.toggle帶強(qiáng)制狀態(tài)btn.addEventListener(click,(){panel.classList.toggle(show,!panel.classList.contains(show));// 第二個(gè)參數(shù)可強(qiáng)制});當(dāng)心這些 DOM 操作習(xí)慣正在拖慢你的應(yīng)用——面試常問(wèn)循環(huán)里直接改 DOM→ 用 DocumentFragment 或字符串拼接后一次性插入濫用innerHTML做純文本賦值→ 用textContent安全又快速事件監(jiān)聽(tīng)器不清理→ 單頁(yè)應(yīng)用路由切換時(shí)removeEventListener或使用AbortControllerconstacnewAbortController();btn.addEventListener(click,handler,{signal:ac.signal});// 路由離開(kāi)時(shí)ac.abort();// 一鍵移除玩轉(zhuǎn)現(xiàn)代 APIMutationObserver 與 IntersectionObserver——給城市裝上監(jiān)控MutationObserver —— 監(jiān)聽(tīng)“拆遷”constmonewMutationObserver(muts{muts.forEach(m{if(m.typechildList){console.log(新增節(jié)點(diǎn):,m.addedNodes);}});});mo.observe(document.body,{childList:true,subtree:true});實(shí)戰(zhàn)實(shí)現(xiàn)“元素一出現(xiàn)就自動(dòng)聚焦”mo.observe(container,{childList:true,subtree:true});functionfocusInput(muts){muts.forEach(m{m.addedNodes.forEach(n{if(n.nodeNameINPUT)n.focus();});});}IntersectionObserver —— 懶加載神器constionewIntersectionObserver(entries{entries.forEach(en{if(en.isIntersecting){constimgen.target;img.srcimg.dataset.src;io.unobserve(img);}});});document.querySelectorAll(img[data-src]).forEach(imgio.observe(img));結(jié)語(yǔ)把 DOM 當(dāng)成自家客廳DOM 不是冷冰冰的“API 列表”它是瀏覽器遞給你的遙控器。寫(xiě)前端就是把用戶(hù)的每一次點(diǎn)擊、每一次輸入轉(zhuǎn)化成對(duì)這棵“城市樹(shù)”的溫柔改造。記住先選準(zhǔn)節(jié)點(diǎn)再動(dòng)手批量操作先緩存再寫(xiě)入事件委托省內(nèi)存又不怕動(dòng)態(tài)內(nèi)容用新 API如IntersectionObserver代替“古老輪詢(xún)”。把上面代碼抄三遍、跑通、再舉一反三你會(huì)發(fā)現(xiàn)——曾經(jīng)“不會(huì)動(dòng)”的頁(yè)面如今跳得比廣場(chǎng)舞大媽還歡。祝你 30 分鐘后順利脫離“DOM 小白”稱(chēng)號(hào)成為能“讓城市聽(tīng)指揮”的合格拆遷隊(duì)長(zhǎng)。歡迎來(lái)到我的博客很高興能夠在這里和您見(jiàn)面希望您在這里可以感受到一份輕松愉快的氛圍不僅可以獲得有趣的內(nèi)容和知識(shí)也可以暢所欲言、分享您的想法和見(jiàn)解。推薦DTcode7的博客首頁(yè)。一個(gè)做過(guò)前端開(kāi)發(fā)的產(chǎn)品經(jīng)理經(jīng)歷過(guò)睿智產(chǎn)品的折磨導(dǎo)致脫發(fā)之后勵(lì)志要翻身農(nóng)奴把歌唱一邊打入敵人內(nèi)部一邊持續(xù)提升自己為我們廣大開(kāi)發(fā)同胞謀福祉堅(jiān)決抵制睿智產(chǎn)品折磨我們碼農(nóng)兄弟專(zhuān)欄系列點(diǎn)擊解鎖學(xué)習(xí)路線(xiàn)(點(diǎn)擊解鎖知識(shí)定位《微信小程序相關(guān)博客》持續(xù)更新中~結(jié)合微信官方原生框架、uniapp等小程序框架記錄請(qǐng)求、封裝、tabbar、UI組件的學(xué)習(xí)記錄和使用技巧等《AIGC相關(guān)博客》持續(xù)更新中~AIGC、AI生產(chǎn)力工具的介紹例如stable diffusion這種的AI繪畫(huà)工具安裝、使用、技巧等總結(jié)《HTML網(wǎng)站開(kāi)發(fā)相關(guān)》《前端基礎(chǔ)入門(mén)三大核心之html相關(guān)博客》前端基礎(chǔ)入門(mén)三大核心之html板塊的內(nèi)容入坑前端或者輔助學(xué)習(xí)的必看知識(shí)《前端基礎(chǔ)入門(mén)三大核心之JS相關(guān)博客》前端JS是JavaScript語(yǔ)言在網(wǎng)頁(yè)開(kāi)發(fā)中的應(yīng)用負(fù)責(zé)實(shí)現(xiàn)交互效果和動(dòng)態(tài)內(nèi)容。它與HTML和CSS并稱(chēng)前端三劍客共同構(gòu)建用戶(hù)界面。通過(guò)操作DOM元素、響應(yīng)事件、發(fā)起網(wǎng)絡(luò)請(qǐng)求等JS使頁(yè)面能夠響應(yīng)用戶(hù)行為實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)展示和頁(yè)面流暢跳轉(zhuǎn)是現(xiàn)代Web開(kāi)發(fā)的核心《前端基礎(chǔ)入門(mén)三大核心之CSS相關(guān)博客》介紹前端開(kāi)發(fā)中遇到的CSS疑問(wèn)和各種奇妙的CSS語(yǔ)法同時(shí)收集精美的CSS效果代碼用來(lái)豐富你的web網(wǎng)頁(yè)《canvas繪圖相關(guān)博客》Canvas是HTML5中用于繪制圖形的元素通過(guò)JavaScript及其提供的繪圖API開(kāi)發(fā)者可以在網(wǎng)頁(yè)上繪制出各種復(fù)雜的圖形、動(dòng)畫(huà)和圖像效果。Canvas提供了高度的靈活性和控制力使得前端繪圖技術(shù)更加豐富和多樣化《Vue實(shí)戰(zhàn)相關(guān)博客》持續(xù)更新中~詳細(xì)總結(jié)了常用UI庫(kù)elementUI的使用技巧以及Vue的學(xué)習(xí)之旅《python相關(guān)博客》持續(xù)更新中~Python簡(jiǎn)潔易學(xué)的編程語(yǔ)言強(qiáng)大到足以應(yīng)對(duì)各種應(yīng)用場(chǎng)景是編程新手的理想選擇也是專(zhuān)業(yè)人士的得力工具《sql數(shù)據(jù)庫(kù)相關(guān)博客》持續(xù)更新中~SQL數(shù)據(jù)庫(kù)高效管理數(shù)據(jù)的利器學(xué)會(huì)SQL輕松駕馭結(jié)構(gòu)化數(shù)據(jù)解鎖數(shù)據(jù)分析與挖掘的無(wú)限可能《算法系列相關(guān)博客》持續(xù)更新中~算法與數(shù)據(jù)結(jié)構(gòu)學(xué)習(xí)總結(jié)通過(guò)JS來(lái)編寫(xiě)處理復(fù)雜有趣的算法問(wèn)題提升你的技術(shù)思維《IT信息技術(shù)相關(guān)博客》持續(xù)更新中~作為信息化人員所需要掌握的底層技術(shù)涉及軟件開(kāi)發(fā)、網(wǎng)絡(luò)建設(shè)、系統(tǒng)維護(hù)等領(lǐng)域的知識(shí)《信息化人員基礎(chǔ)技能知識(shí)相關(guān)博客》無(wú)論你是開(kāi)發(fā)、產(chǎn)品、實(shí)施、經(jīng)理只要是從事信息化相關(guān)行業(yè)的人員都應(yīng)該掌握這些信息化的基礎(chǔ)知識(shí)可以不精通但是一定要了解避免日常工作中貽笑大方《信息化技能面試寶典相關(guān)博客》涉及信息化相關(guān)工作基礎(chǔ)知識(shí)和面試技巧提升自我能力與面試通過(guò)率擴(kuò)展知識(shí)面《前端開(kāi)發(fā)習(xí)慣與小技巧相關(guān)博客》持續(xù)更新中~羅列常用的開(kāi)發(fā)工具使用技巧,如 Vscode快捷鍵操作、Git、CMD、游覽器控制臺(tái)等《photoshop相關(guān)博客》持續(xù)更新中~基礎(chǔ)的PS學(xué)習(xí)記錄含括PPI與DPI、物理像素dp、邏輯像素dip、矢量圖和位圖以及幀動(dòng)畫(huà)等的學(xué)習(xí)總結(jié)日常開(kāi)發(fā)辦公生產(chǎn)【實(shí)用工具】分享相關(guān)博客》持續(xù)更新中~分享介紹各種開(kāi)發(fā)中、工作中、個(gè)人生產(chǎn)以及學(xué)習(xí)上的工具豐富閱歷給大家提供處理事情的更多角度學(xué)習(xí)了解更多的便利工具如Fiddler抓包、辦公快捷鍵、虛擬機(jī)VMware等工具吾輩才疏學(xué)淺摹寫(xiě)之作恐有瑕疵。望諸君海涵賜教。望輕噴嚶嚶嚶非常期待和您一起在這個(gè)小小的網(wǎng)絡(luò)世界里共同探索、學(xué)習(xí)和成長(zhǎng)。愿斯文對(duì)汝有所裨益縱其簡(jiǎn)陋未及淵博亦足以略盡綿薄之力。倘若尚存闕漏敬請(qǐng)不吝斧正俾便精進(jìn)