鍢夸紮璁′滑锛佷綘鐭ラ亾鎵撳紑涓€涓綉椤垫椂锛屾祻瑙堝櫒鑳屽悗钘忕潃澶氬皯鍏冪礌鑺傜偣鍚楋紵闅忎究涓€涓寜閽€佷竴娈垫枃瀛楃敋鑷崇┖鐧界紳闅欓兘鏄妭鐐光€斺€斺€?strong>鈥嬪厜B绔欓椤靛氨鏈夎秴杩?000涓狣OM鑺傜偣鈥?/strong>鈥嬶紒浠婂ぉ鍜变滑灏辨潵鑱婅亰鎬庝箞鐢↗avaScript鎶婂畠浠尐涓彧鍑烘潵銆?/p>

锛堝徏鐫€鍐版鐨勭爜鍐滅獊鐒跺潗鐩达級鍏堣В鍐充竴涓伒榄傛嫹闂細鈥?strong>鈥嬩负浠€涔堥潪寰楅亶鍘嗗厓绱狅紵鈥?/strong>鈥嬩妇涓牀瀛愷煂帮紝浣犳兂缁欐墍鏈夊晢鍝佷环鏍煎姞涓垹闄ょ嚎锛屾€讳笉鑳芥墜鍔ㄦ敼100娆″惂锛熻繖鏃跺€欓亶鍘嗗氨鏄綘鐨勬晳鍛界ɑ鑽夛紒

涓€銆佹柊鎵嬪繀鐭ョ殑涓夊ぇ鍩虹鏂规硶

鈥?strong>鈥嬫柟娉?锛歡etElementsBy绯诲垪锛堜紶瀹跺疂绾ф搷浣滐級鈥?/strong>鈥?/p>

javascript澶嶅埗
// 鎶撳彇鎵€鏈?p>鏍囩

let paragraphs = document.getElementsByTagName('p');

杩欎釜鑰佷紮璁＄殑鐗圭偣鏄€?strong>鈥嬪疄鏃舵洿鏂伴泦鍚堚€?/strong>鈥嬶紝浣嗚娉ㄦ剰瀹冭繑鍥炵殑鏄疕TMLCollection锛屾兂鐢ㄦ暟缁勬柟娉曞緱鍏堣浆锛?/p>

javascript澶嶅埗
Array.from(paragraphs).forEach(p => p.style.color = "red");

鈥?strong>鈥嬫柟娉?锛歲uerySelectorAll锛堢幇浠ｄ竾閲戞补锛夆€?/strong>鈥?/p>

javascript澶嶅埗
// 鎶撳彇绫诲悕涓篿tem鐨勬墍鏈夊厓绱?/span>
let items = document.querySelectorAll('.item');

杩欎釜鏂规硶鏀寔CSS閫夋嫨鍣ㄨ娉曪紝杩斿洖鐨勬槸闈欐€丯odeList锛岀洿鎺ュ氨鑳界敤forEach閬嶅巻銆備笉杩囪娉ㄦ剰鈥?strong>鈥婭E8鍙婁互涓嬩笉鍏煎鈥?/strong>鈥嬶紝浣?023骞翠簡璋佽繕鐞咺E锛?/p>

鈥?strong>鈥嬫柟娉?锛歝hildren灞炴€э紙浜插瓙閴村畾鍣級鈥?/strong>鈥?/p>

javascript澶嶅埗
let parent = document.getElementById('container');
let kids = parent.children;

涓撻棬鐢ㄦ潵鎶撳彇鏌愪釜鍏冪礌鐨勭洿绯诲瓙鍏冪礌锛屾瘮childNodes鏇村共鍑€锛堜笉浼氭姄鍒版枃鏈妭鐐癸級銆傞€傚悎澶勭悊鍍忓鑸彍鍗曡繖绉嶅眰绾ф槑纭殑缁撴瀯銆?/p>

浜屻€佸綋鏅€氶亶鍘嗕笉澶熺敤鏃?/h3>

閬囧埌澶氬眰宓屽缁撴瀯鎬庝箞鍔烇紵姣斿璐村惂鐨勬ゼ涓ゼ璇勮锛岃繖鏃跺€欓渶瑕佲€?strong>鈥嬮€掑綊澶ф硶鈥?/strong>鈥嬶細

javascript澶嶅埗
function digDom(root) {
    console.log('鎸栧埌锛?, root);
    Array.from(root.children).forEach(child => digDom(child));
}
digDom(document.body);

涓嶈繃瑕佹敞鎰忊€?strong>鈥嬮€掑綊娣卞害闄愬埗鈥?/strong>鈥嬶紝Chrome鏈€澶氭敮鎸?涓囧眰璋冪敤鏍堬紝浣嗘甯哥綉椤垫牴鏈敤涓嶅埌杩欎箞娣便€?/p>

鈥?strong>鈥嬫€ц兘瀵规瘮琛ㄦ潵浜嗭紒鈥?/strong>鈥?/p>

鏂规硶	閫熷害鎺掑悕	鍐呭瓨鍗犵敤	閫傜敤鍦烘櫙
getElementsByTagName	馃	浣?/td>	绠€鍗曢〉闈㈡壒閲忔搷浣?/td>
querySelectorAll	馃	涓?/td>	澶嶆潅閫夋嫨鏉′欢
閫掑綊閬嶅巻	馃	楂?/td>	鏍戝舰缁撴瀯鍒嗘瀽

---

涓夈€侀偅浜涘勾鎴戣俯杩囩殑鍧?/h3>

1. 鈥?strong>鈥嬩负浠€涔堟垜鐨刦orEach鎶ラ敊锛熲€?/strong>鈥?br/> 鍥犱负HTMLCollection涓嶈兘鐩存帴鐢╢orEach锛屽緱鍏堣浆鏁扮粍銆備笉杩嘚odeList鍦ㄨ緝鏂版祻瑙堝櫒鍙互鐩存帴鐢ㄢ€斺€旇繖涓吋瀹规€ч棶棰樺潙杩囪嚦灏?0%鐨勬柊鎵嬶紒

2. 鈥?strong>鈥嬪姩鎬佹坊鍔犵殑鍏冪礌鎬庝箞鍔烇紵鈥?/strong>鈥?br/> 鐢∕utationObserver鐩戝惉DOM鍙樺寲锛屾瘮瀹氭椂杞妫€娴嬩紭闆?00鍊嶏細

   javascript澶嶅埗
   const observer = new MutationObserver(mutations => {
       mutations.forEach(mutation => {
           console.log('鎶撳埌鏂版潵鐨勶細', mutation.addedNodes);
       });
   });
   observer.observe(document.body, { childList: true });

3. 鈥?strong>鈥嬮亶鍘嗗埌涓€鍗婂崱姝绘祻瑙堝櫒锛熲€?/strong>鈥?br/> 閬囧埌瓒呭ぇDOM鏍戯紙姣斿琛ㄦ牸鏈?0涓囪锛夛紝璇曡瘯鈥?strong>鈥嬪垎鐗囧鐞嗏€?/strong>鈥嬶細

   javascript澶嶅埗
   function chunkProcess(list, chunkSize) {
       let i = 0;
       function processChunk() {
           for (let j = 0; j < chunkSize; j++, i++) {
               if(i >= list.length) return;
               // 澶勭悊姣忎釜鍏冪礌
           }
           setTimeout(processChunk, 0);
       }
       processChunk();
   }

---

鍥涖€佹潵鑷€佸徃鏈虹殑绉佹埧璇?/h3>

鎴戜釜浜虹幇鍦ㄦ洿鍋忕埍鐢ㄢ€?strong>鈥嬮€掑綊+鐢熸垚鍣ㄢ€?/strong>鈥嬬殑缁勫悎鎷筹紝鐗瑰埆鏄鐞嗚秴娣卞眰绾ф椂锛?/p>

javascript澶嶅埗
function* walkDom(root) {
    yield root;
    for(let child of root.children) {
        yield* walkDom(child);
    }
}

for(let node of walkDom(document.body)) {
    if(node.tagName === 'IMG') {
        console.log('閫埌涓€寮犲浘锛?, node.src);
    }
}

杩欑鍐欐硶涓嶄粎鐪嬬潃浼橀泤锛岃繕鑳介殢鏃朵腑鏂亶鍘嗏€斺€斿氨鍍忓湪DOM妫灄閲岃浜咷PS瀵艰埅銆?/p>

鏈€鍚庤鍙ユ帍蹇冪獫鐨勮瘽锛氣€?strong>鈥嬮亶鍘咲OM灏卞儚鍦ㄨ秴甯傛壘璐ф灦锛屽厛鎼炴竻妤氬竷灞€鍐嶅姩鎵嬫晥鐜囩炕鍊嶁€?/strong>鈥嬨€備笅娆￠亣鍒拌鎵归噺鎿嶄綔鍏冪礌鏃讹紝璁板緱鍏堟繁鍚镐竴鍙ｆ皵锛屾妸杩欎簺鏂规硶鍦ㄨ剳瀛愰噷杩囦竴閬嶏紝淇濆噯浣犲啓浠ｇ爜鏃跺儚寮€浜嗛€忚鎸傦紒

本文由嘻道妙招独家原创，未经允许，严禁转载