2025年高頻dom面試題及答案Q：DOM節(jié)點(diǎn)有哪些常見(jiàn)類型？如何區(qū)分元素節(jié)點(diǎn)與文本節(jié)點(diǎn)？A：DOM節(jié)點(diǎn)共有12種類型（由nodeType屬性標(biāo)識(shí)），開(kāi)發(fā)中最常用的4類是：元素節(jié)點(diǎn)（nodeType=1，如div、p）、文本節(jié)點(diǎn)（nodeType=3，如標(biāo)簽內(nèi)的文字內(nèi)容）、注釋節(jié)點(diǎn)（nodeType=8，如<!--注釋-->）、文檔節(jié)點(diǎn)（nodeType=9，即document對(duì)象）。元素節(jié)點(diǎn)與文本節(jié)點(diǎn)的核心區(qū)別在于：元素節(jié)點(diǎn)是HTML標(biāo)簽的抽象（如<div>對(duì)應(yīng)元素節(jié)點(diǎn)），可包含子節(jié)點(diǎn)；文本節(jié)點(diǎn)是純文本內(nèi)容的載體（如"HelloWorld"），無(wú)嵌套結(jié)構(gòu)?？赏ㄟ^(guò)nodeType直接判斷：元素節(jié)點(diǎn)nodeType為1，文本節(jié)點(diǎn)為3；或通過(guò)nodeName屬性——元素節(jié)點(diǎn)的nodeName是標(biāo)簽名大寫(xiě)（如DIV），文本節(jié)點(diǎn)的nodeName固定為"text"。Q：如何獲取一個(gè)元素的所有子節(jié)點(diǎn)？子元素與子節(jié)點(diǎn)有何區(qū)別？A：獲取子節(jié)點(diǎn)的常用方法：1.parentNode.childNodes：返回包含所有子節(jié)點(diǎn)的NodeList（包括元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)等）；2.parentElement.children：返回僅包含子元素節(jié)點(diǎn)的HTMLCollection（過(guò)濾了文本、注釋等非元素節(jié)點(diǎn)）。子元素（子元素節(jié)點(diǎn)）是子節(jié)點(diǎn)的子集。例如，若父元素內(nèi)有空格或換行符（會(huì)被解析為文本節(jié)點(diǎn)），childNodes會(huì)包含這些文本節(jié)點(diǎn)，而children僅保留元素節(jié)點(diǎn)。例如：```html<divid="parent"><p>文本</p><!--注釋--></div>```此時(shí)parent.childNodes包含文本節(jié)點(diǎn)（換行）、p元素節(jié)點(diǎn)、文本節(jié)點(diǎn)（換行）、注釋節(jié)點(diǎn)；而parent.children僅包含p元素節(jié)點(diǎn)。Q：動(dòng)態(tài)創(chuàng)建DOM元素有哪些方式？各自的優(yōu)缺點(diǎn)是什么？A：常見(jiàn)方式及對(duì)比：1.document.createElement('tagName')：優(yōu)點(diǎn)：直接創(chuàng)建元素節(jié)點(diǎn)，可通過(guò)屬性/方法精確設(shè)置（如setAttribute、textContent），安全性高（避免XSS風(fēng)險(xiǎn)）；缺點(diǎn)：復(fù)雜結(jié)構(gòu)需多層嵌套時(shí)代碼量較大（如創(chuàng)建包含多個(gè)子元素的結(jié)構(gòu)需多次appendChild）。2.innerHTML賦值：優(yōu)點(diǎn)：通過(guò)字符串快速提供復(fù)雜結(jié)構(gòu)（如`div.innerHTML='<p>內(nèi)容</p>'`），適合動(dòng)態(tài)渲染大量重復(fù)元素；缺點(diǎn)：存在XSS風(fēng)險(xiǎn)（若內(nèi)容包含用戶輸入需嚴(yán)格轉(zhuǎn)義）；會(huì)破壞原有DOM結(jié)構(gòu)（重新解析時(shí)原元素的事件監(jiān)聽(tīng)器、子節(jié)點(diǎn)會(huì)被清除）。3.insertAdjacentHTML(position,htmlString)：優(yōu)點(diǎn)：在指定位置插入HTML字符串（position可選'beforebegin'/'afterbegin'/'beforeend'/'afterend'），避免覆蓋原內(nèi)容；性能優(yōu)于多次appendChild（一次性解析）；缺點(diǎn)：同樣存在XSS風(fēng)險(xiǎn)，需謹(jǐn)慎處理用戶輸入。4.cloneNode(deep)：優(yōu)點(diǎn)：復(fù)制現(xiàn)有元素（deep為true時(shí)復(fù)制子節(jié)點(diǎn)），適合快速?gòu)?fù)用結(jié)構(gòu)；缺點(diǎn)：復(fù)制后的元素需重新綁定事件（原事件監(jiān)聽(tīng)器不會(huì)自動(dòng)復(fù)制）。實(shí)際開(kāi)發(fā)中，創(chuàng)建簡(jiǎn)單元素推薦createElement；復(fù)雜結(jié)構(gòu)且需高性能時(shí)用insertAdjacentHTML；需復(fù)用現(xiàn)有結(jié)構(gòu)時(shí)用cloneNode。Q：setAttribute與直接設(shè)置DOM屬性（如element.className）有何區(qū)別？A：核心區(qū)別在于操作的對(duì)象不同：setAttribute操作的是HTML屬性（即標(biāo)簽上的屬性），設(shè)置的屬性值始終是字符串類型。例如：`input.setAttribute('value','123')`會(huì)修改HTML中的value屬性，但不會(huì)改變input元素當(dāng)前的輸入值（若用戶已手動(dòng)修改過(guò)輸入框內(nèi)容）。直接設(shè)置DOM屬性操作的是JS對(duì)象的屬性，可能與HTML屬性不同步。例如：`input.value='456'`會(huì)直接修改元素的當(dāng)前值（即input框顯示的內(nèi)容），但此時(shí)HTML中的value屬性仍為初始值（除非通過(guò)getAttribute獲取，否則不會(huì)更新）。典型場(chǎng)景：input的value屬性。HTML中的value是初始值（通過(guò)getAttribute('value')獲取），而DOM的value屬性是當(dāng)前輸入值（通過(guò)element.value獲?。?。設(shè)置setAttribute('value','x')僅修改初始值，不影響用戶當(dāng)前輸入；設(shè)置element.value則直接改變當(dāng)前顯示值。Q：DOM事件流分為幾個(gè)階段？如何阻止事件傳播？A：DOM事件流包含3個(gè)階段：1.捕獲階段（CapturePhase）：事件從window開(kāi)始，沿DOM樹(shù)向下傳播到目標(biāo)元素的父級(jí)（不包括目標(biāo)元素自身）；2.目標(biāo)階段（TargetPhase）：事件到達(dá)目標(biāo)元素；3.冒泡階段（BubblePhase）：事件從目標(biāo)元素開(kāi)始，沿DOM樹(shù)向上傳播到window。阻止事件傳播的方法：阻止冒泡：在事件處理函數(shù)中調(diào)用event.stopPropagation()，但不會(huì)阻止捕獲階段的傳播；完全阻止事件流：調(diào)用event.stopImmediatePropagation()，不僅阻止冒泡/捕獲，還會(huì)阻止當(dāng)前元素上后續(xù)同類型事件監(jiān)聽(tīng)器的執(zhí)行（如同一元素綁定了多個(gè)click監(jiān)聽(tīng)器，調(diào)用后后續(xù)監(jiān)聽(tīng)器不再觸發(fā)）。注意：默認(rèn)情況下，事件監(jiān)聽(tīng)器在冒泡階段觸發(fā)（addEventListener的第三個(gè)參數(shù)useCapture默認(rèn)為false）。若需在捕獲階段觸發(fā)，需將useCapture設(shè)為true。Q：事件委托（事件代理）的原理是什么？適用場(chǎng)景及實(shí)現(xiàn)方式？A：原理：利用事件冒泡機(jī)制，將子元素的事件監(jiān)聽(tīng)器綁定到父元素上。當(dāng)子元素觸發(fā)事件時(shí)，事件會(huì)冒泡到父元素，父元素通過(guò)event.target判斷實(shí)際觸發(fā)事件的子元素，從而執(zhí)行相應(yīng)邏輯。適用場(chǎng)景：子元素?cái)?shù)量多（如列表項(xiàng)），減少監(jiān)聽(tīng)器數(shù)量以提升性能；子元素動(dòng)態(tài)添加（如異步加載的列表項(xiàng)），無(wú)需為新元素重復(fù)綁定事件；統(tǒng)一處理同類型元素的事件（如多個(gè)按鈕的點(diǎn)擊事件）。實(shí)現(xiàn)示例（列表項(xiàng)點(diǎn)擊委托到ul）：```javascriptconstul=document.querySelector('ul');ul.addEventListener('click',(e)=>{consttarget=e.target;if(target.tagName==='LI'){//確保目標(biāo)是li元素console.log('點(diǎn)擊了列表項(xiàng)：',target.textContent);}});//動(dòng)態(tài)添加li時(shí)無(wú)需重新綁定事件ul.innerHTML+='<li>新項(xiàng)</li>';```優(yōu)勢(shì)：減少內(nèi)存占用（一個(gè)父級(jí)監(jiān)聽(tīng)器替代多個(gè)子監(jiān)聽(tīng)器），自動(dòng)處理動(dòng)態(tài)元素，代碼更簡(jiǎn)潔。Q：什么是重排（Reflow）和重繪（Repaint）？如何優(yōu)化以減少其發(fā)生？A：重排（回流）：瀏覽器重新計(jì)算元素的幾何屬性（位置、尺寸）并重新布局的過(guò)程。觸發(fā)場(chǎng)景包括：修改元素尺寸（width/height）、位置（margin/padding）、顯示狀態(tài)（display）、查詢布局屬性（offsetWidth/scrollTop）等。重繪：元素外觀變化（如顏色、背景、透明度）但不影響布局時(shí)，瀏覽器重新繪制的過(guò)程。重繪代價(jià)低于重排，但頻繁重繪仍會(huì)影響性能。優(yōu)化策略：1.合并樣式修改：將多次樣式修改合并為一次（如通過(guò)class添加多個(gè)樣式，或設(shè)置cssText）。反例：```javascriptelement.style.width='100px';element.style.height='200px';//兩次重排```正例：```javascriptelement.style.cssText='width:100px;height:200px;';//一次重排```2.避免頻繁讀取會(huì)觸發(fā)重排的屬性：如offsetWidth、scrollTop等。若需多次讀取，可先緩存值。反例：```javascriptfor(leti=0;i<100;i++){console.log(element.offsetWidth);//每次讀取觸發(fā)重排}```正例：```javascriptconstwidth=element.offsetWidth;for(leti=0;i<100;i++){console.log(width);//僅一次重排}```3.使用脫離文檔流的元素：將頻繁變動(dòng)的元素設(shè)為position:absolute或fixed，使其不影響其他元素布局（重排僅發(fā)生在自身）。4.使用requestAnimationFrame：將DOM操作放入動(dòng)畫(huà)幀中，瀏覽器會(huì)合并多個(gè)操作，減少重排次數(shù)。5.批量操作DOM：如需要添加多個(gè)子元素，先創(chuàng)建文檔片段（documentFragment），在片段中完成所有操作后再一次性添加到DOM樹(shù)。Q：虛擬DOM（VirtualDOM）的作用是什么？與直接操作真實(shí)DOM相比有何優(yōu)勢(shì)？A：虛擬DOM是真實(shí)DOM的輕量級(jí)JS對(duì)象表示（如React中的fiber節(jié)點(diǎn)），通過(guò)記錄DOM的結(jié)構(gòu)和狀態(tài)，在狀態(tài)變更時(shí)提供新的虛擬DOM，與舊虛擬DOM進(jìn)行diff算法對(duì)比，僅將變化的部分同步到真實(shí)DOM。優(yōu)勢(shì)：1.減少真實(shí)DOM操作次數(shù)：直接操作真實(shí)DOM（如頻繁appendChild、修改樣式）會(huì)觸發(fā)多次重排/重繪，虛擬DOM通過(guò)diff計(jì)算最小更新集，僅更新變化的節(jié)點(diǎn)。2.跨平臺(tái)支持：虛擬DOM的JS對(duì)象結(jié)構(gòu)可映射到不同平臺(tái)（如ReactNative將虛擬DOM轉(zhuǎn)換為原生組件），而真實(shí)DOM僅適用于瀏覽器。3.性能可預(yù)測(cè)：diff算法的時(shí)間復(fù)雜度為O(n)（n為節(jié)點(diǎn)數(shù)），相比直接操作真實(shí)DOM的不可控性能消耗更穩(wěn)定。注意：虛擬DOM并非在所有場(chǎng)景下都更快。對(duì)于簡(jiǎn)單的DOM操作（如單個(gè)元素修改），直接操作真實(shí)DOM可能更高效；但在復(fù)雜應(yīng)用（如大量狀態(tài)變更的列表）中，虛擬DOM的批量更新優(yōu)勢(shì)顯著。Q：MutationObserver的作用是什么？與舊版MutationEvents有何區(qū)別？A：MutationObserver是用于監(jiān)聽(tīng)DOM樹(shù)變化的API，可觀察元素的子節(jié)點(diǎn)增減、屬性修改、文本內(nèi)容變更等。與舊版MutationEvents（如DOMNodeInserted、DOMAttrModified）的區(qū)別：1.異步觸發(fā)：MutationObserver在所有DOM變更完成后異步觸發(fā)回調(diào)（通過(guò)微任務(wù)隊(duì)列），避免阻塞渲染；而MutationEvents是同步觸發(fā)（變更時(shí)立即觸發(fā)），可能導(dǎo)致性能問(wèn)題。2.可配置性：MutationObserver支持細(xì)粒度配置（如只監(jiān)聽(tīng)子節(jié)點(diǎn)變化、只監(jiān)聽(tīng)屬性變化等）；MutationEvents固定監(jiān)聽(tīng)所有類型的變更。3.兼容性與棄用：MutationEvents已被W3C棄用（部分瀏覽器已停止支持），MutationObserver是現(xiàn)代標(biāo)準(zhǔn)方案。使用步驟：```javascript//1.創(chuàng)建觀察者實(shí)例，定義回調(diào)（接收mutationRecords數(shù)組）constobserver=newMutationObserver((mutations)=>{mutations.forEach(mutation=>{console.log('變更類型：',mutation.type);//'childList'/'attributes'等console.log('變更目標(biāo)：',mutation.target);});});//2.配置觀察選項(xiàng)（需指定要觀察的變更類型）constconfig={childList:true,//監(jiān)聽(tīng)子節(jié)點(diǎn)增減attributes:true,//監(jiān)聽(tīng)屬性變更attributeFilter:['class'],//僅監(jiān)聽(tīng)class屬性（可選）subtree:true,//監(jiān)聽(tīng)目標(biāo)的所有后代節(jié)點(diǎn)（可選）characterData:true//監(jiān)聽(tīng)文本內(nèi)容變更（可選）};//3.開(kāi)始觀察目標(biāo)元素consttarget=document.querySelector('container');observer.observe(target,config);//4.停止觀察（如組件卸載時(shí)）//observer.disconnect();```典型場(chǎng)景：實(shí)現(xiàn)自動(dòng)保存（監(jiān)聽(tīng)文本框內(nèi)容變更）、響應(yīng)式布局（監(jiān)聽(tīng)容器尺寸變化觸發(fā)重排）、第三方組件的DOM變更監(jiān)聽(tīng)（如富文本編輯器）。Q：自定義元素（CustomElements）的實(shí)現(xiàn)步驟是什么？生命周期鉤子有哪些？A：自定義元素是WebComponents標(biāo)準(zhǔn)的一部分，允許開(kāi)發(fā)者創(chuàng)建可復(fù)用的自定義HTML標(biāo)簽。實(shí)現(xiàn)步驟：1.定義類并繼承HTMLElement（或其擴(kuò)展類如HTMLButtonElement）；2.在類中定義生命周期鉤子（如connectedCallback）；3.使用customElements.define('標(biāo)簽名',類)注冊(cè)元素（標(biāo)簽名必須包含連字符，如my-component）。生命周期鉤子：connectedCallback：元素被插入DOM樹(shù)時(shí)觸發(fā)（可在此初始化事件監(jiān)聽(tīng)、渲染內(nèi)容）；disconnectedCallback：元素被移除DOM樹(shù)時(shí)觸發(fā)（可在此清理事件監(jiān)聽(tīng)、定時(shí)器）；attributeChangedCallback(attrName,oldVal,newVal)：元素屬性被修改時(shí)觸發(fā)（需通過(guò)staticgetobservedAttributes()指定要監(jiān)聽(tīng)的屬性）；adoptedCallback()：元素被移動(dòng)到新文檔（如通過(guò)document.adoptNode）時(shí)觸發(fā)（較少使用）。示例（計(jì)數(shù)器組件）：```javascriptclassCounterElementextendsHTMLElement{staticgetobservedAttributes(){return['count'];}constructor(){super();this.attachShadow({mode:'open'});//可選：使用ShadowDOM封裝樣式this.shadowRoot.innerHTML=`<style>.counter{padding:8px;}</style><divclass="counter"><button>減</button><span>${this.count}</span><button>加</button></div>`;}getcount(){returnparseInt(this.getAttribute('count'))||0;}setcount(val){this.setAttribute('count',val);}connectedCallback(){this.shadowRoot.querySelectorAll('button').forEach((btn,index)=>{btn.addEventListener('click',()=>{this.count+=index===0?-1:1;});});}attributeChangedCallback(attr,oldVal,newVal){if(attr==='count'){this.shadowRoot.querySelector('span').textContent=newVal;}}disconnectedCallback(){//清理事件監(jiān)聽(tīng)（若未使用ShadowDOM，需手動(dòng)移除）}}customElements.define('my-counter',CounterElement);```使用：`<my-countercount="0"></my-counter>`Q：ShadowDOM的作用是什么？如何實(shí)現(xiàn)樣式封裝？A：ShadowDOM是WebComponents的核心特性之一，用于將組件的內(nèi)部結(jié)構(gòu)和樣式與外部隔離，避免樣式?jīng)_突。其作用：樣式封裝：組件內(nèi)部的CSS僅作用于ShadowDOM內(nèi)的元素，外部CSS無(wú)法穿透（除非使用::part()或::slotted()）；結(jié)構(gòu)隔離：ShadowDOM內(nèi)的元素不會(huì)被外部選擇器（如document.querySelector）直接訪問(wèn)，需通過(guò)element.shadowRoot獲??；內(nèi)容分發(fā)：通過(guò)<slot>元素允許外部?jī)?nèi)容插入到組件內(nèi)部指定位置。實(shí)現(xiàn)樣式封裝的關(guān)鍵：1.在自定義元素的構(gòu)造函數(shù)中調(diào)用attachShadow({mode:'open'})（mode為'closed'時(shí)外部無(wú)法訪問(wèn)shadowRoot）；2.內(nèi)部樣式寫(xiě)在shadowRoot的<style>標(biāo)簽中，不會(huì)影響外部DOM；3.外部樣式若需影響ShadowDOM內(nèi)的元素，需使用穿透選擇器（如:host()匹配自定義元素本身，::slotted()匹配slot中的外部元素）。示例（按鈕組件的ShadowDOM）：```javascriptclassCustomButtonextendsHTMLElement{constructor(){super();this.attachShadow({mode:'open'});this.shadowRoot.innerHTML=`<style>/僅作用于ShadowDOM內(nèi)的button/button{padding:8px16px;background:007bff;color:white;border:none;}/匹配自定義元素本身（:host）/:host(:hover)button{background:0056b3;}/匹配外部傳入slot的內(nèi)容/::slotted(span){font-weight:bold;}</style><button><slot>默認(rèn)按鈕</slot><!-外部?jī)?nèi)容插入位置--></button>`;}}customElements.define('custom-button',CustomButton);```使用：```html<custom-button><span>點(diǎn)擊我</span><!-會(huì)被插入到slot位置，受::slotted樣式影響--></custom-button>```此時(shí)，外部CSS`.button{color:red;}`不會(huì)影響custom-button內(nèi)部的按鈕樣式。Q：IntersectionObserver的作用是什么？如何實(shí)現(xiàn)元素的視口可見(jiàn)性監(jiān)聽(tīng)？A：IntersectionObserver用于異步監(jiān)聽(tīng)目標(biāo)元素與其祖先元素或視口（viewport）的交叉狀態(tài)（即是否進(jìn)入可視區(qū)域）。傳統(tǒng)實(shí)現(xiàn)需監(jiān)聽(tīng)scroll事件并計(jì)算元素位置，性能較差；IntersectionObserver通過(guò)瀏覽器底層優(yōu)化，高效觸發(fā)回調(diào)。核心配置參數(shù)：root：監(jiān)聽(tīng)的祖先元素（默認(rèn)是視口）；rootMargin：根元素的邊距（類似CSS的margin，用于擴(kuò)展/收縮監(jiān)聽(tīng)區(qū)域，如'100px0'表示提前100px觸發(fā)）；threshold：交叉比例閾值（0-1之間的數(shù)組，如[0,0.5,1]表示當(dāng)目標(biāo)元素與根元素交叉比例達(dá)到0%、50%、100%時(shí)觸發(fā)回調(diào)）。實(shí)現(xiàn)步驟（圖片懶加載）：```javascript//1.創(chuàng)建觀察者實(shí)例constobserver=newIntersectionObserver((entries)=>{entries.forEach(entry=>{if(entry.isIntersecting){//元素進(jìn)入視口constimg=entry.target;img.src=img.dataset.src;//將data-src賦值給src觸發(fā)加載observer.unobserve(img);//加載后停止監(jiān)聽(tīng)}});},{rootMargin:'0px0px200px0px',//提前200px加載threshold:0.1});//2.觀察所有懶加載圖片document.querySelectorAll('img.lazy').forEach(img=>{observer.observe(img);});```適用場(chǎng)景：圖片/視頻懶加載、無(wú)限滾動(dòng)加載更多內(nèi)容、廣告曝光統(tǒng)計(jì)、動(dòng)畫(huà)觸發(fā)（如元素進(jìn)入視口時(shí)播放動(dòng)畫(huà)）。Q：DOM樹(shù)與渲染樹(shù)（RenderTree）的區(qū)別是什么？A：DOM樹(shù)是HTML文檔的節(jié)點(diǎn)層次結(jié)構(gòu)（包含所有元素、文本、注釋節(jié)點(diǎn)）；渲染樹(shù)是瀏覽器用于繪制頁(yè)面的結(jié)構(gòu)，僅包含可見(jiàn)節(jié)點(diǎn)（排除display:none、script、meta等不可見(jiàn)節(jié)點(diǎn)）。兩者的核心區(qū)別：1.節(jié)點(diǎn)范圍：DOM樹(shù)包含所有節(jié)點(diǎn)；渲染樹(shù)僅包含需要渲染的節(jié)點(diǎn)（visibility:hidden的節(jié)點(diǎn)會(huì)被包含，因?yàn)槿哉紦?jù)空間）。2.結(jié)構(gòu)關(guān)聯(lián)：渲染樹(shù)的節(jié)點(diǎn)與DOM樹(shù)節(jié)點(diǎn)并非一一對(duì)應(yīng)。例如，文本節(jié)點(diǎn)被分割成多個(gè)盒（textspan）時(shí)，渲