2. <cite id="e6arf"></cite>
        1. <blockquote id="e6arf"><p id="e6arf"></p></blockquote>
        <\/code> —simple and effective.<\/p>
         9. Custom Utility Function (Mini jQuery Substitute)<\/strong><\/h3>
         If you miss the convenience, write a lightweight wrapper:<\/p>
         const $ = (selector, context = document) => context.querySelector(selector);\nconst $$ = (selector, context = document) => [...context.querySelectorAll(selector)];\n\n\/\/ Usage:\nconst header = $('.header');\nconst links = $$('nav a');\n\n\/\/ Add methods\n$.on = (target, event, selector, handler) => {\n  target.addEventListener(event, (e) => {\n    if (e.target.matches(selector)) handler.call(e.target, e);\n  });\n};\n\n\/\/ Use it:\n$.on(document, 'click', '.btn', (e) => alert('Clicked!'));<\/pre>
         This gives you jQuery-like syntax without the overhead.<\/p>
         10. Performance Tips<\/strong><\/h3>
        •  Cache selectors<\/strong> when used repeatedly.<\/li>
        •  Use event delegation<\/strong> for dynamic or large lists.<\/li>
        •  Avoid frequent DOM reads\/writes— batch changes<\/strong> when possible.<\/li>
        •  Use DocumentFragment<\/strong> for inserting many elements:<\/li><\/ul>
           const fragment = document.createDocumentFragment();\nfor (let i = 0; i < 100; i ) {\n  const li = document.createElement('li');\n  li.textContent = `Item ${i}`;\n  fragment.appendChild(li);\n}\nlist.appendChild(fragment); \/\/ One reflow<\/pre>
          \n
           Basically, modern JavaScript gives you everything jQuery offered—and more—without the extra library. With querySelector<\/code> , classList<\/code> , addEventListener<\/code> , and insertAdjacentHTML<\/code> , you can do advanced DOM manipulation cleanly and efficiently.<\/p>\n
           It's not complex, but it's easy to overlook how far vanilla JS has come.<\/p>"}	
	







          亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱
          
	

          
    

          

	
	
          
		
          
			
          
							
          
					
          
						
          目錄
          
						
          
							
															
          
									 2. Event Delegation Without jQuery
								
          
																
          
									 3. Creating and Inserting Elements
								
          
																
          
									 4. Updating Attributes, Classes, and Styles
								
          
																
          
									 Attributes
								
          
																
          
									 Classes (with classList )
								
          
																
          
									 Inline Styles
								
          
																
          
									 5. Traversing the DOM
								
          
																
          
									 6. Removing Elements
								
          
																
          
									 7. Working with HTML and Text Content
								
          
																
          
									 8. Waiting for DOM Ready (Without jQuery Ready)
								
          
																
          
									 9. Custom Utility Function (Mini jQuery Substitute)
								
          
																
          
									 10. Performance Tips
								
          
														
          
					
          
				
          
							
          
					
          
						首頁
						
												web前端
						
												js教程
						
						沒有jQuery的高級DOM操縱
					
          
					
					
          
						
          
							
          沒有jQuery的高級DOM操縱
          
							
							Jul 27, 2025 am	 12:52 AM
															
          
																			java
																			程式設(shè)計
																	
          
														
						
          
					
          
					
          
					
          
						
          
						
						
						

					
          現(xiàn)代JavaScript已取代jQuery，通過原生API即可高效操作DOM。 1. 使用document.querySelector()和querySelectorAll()選擇元素，支持複雜選擇器；2. 利用事件委託，在父元素監(jiān)聽事件並用e.target.matches()判斷目標，提升動態(tài)內(nèi)容性能；3. 通過document.createElement()創(chuàng)建元素，或用insertAdjacentHTML()插入HTML；4. 使用setAttribute()、classList和style屬性分別操作屬性、類名和樣式；5. 原生DOM遍歷如parentNode、nextElementSibling、querySelector等對應(yīng)jQuery的遍歷方法；6. 調(diào)用el.remove()刪除元素，兼容舊瀏覽器可使用parentNode.removeChild()；7. 用textContent獲取或設(shè)置文本內(nèi)容，更安全高效，innerHTML用於插入HTML；8. 通過document.addEventListener('DOMContentLoaded')等待DOM加載完成；9. 可編寫$和$$函數(shù)模擬jQuery選擇器，並封裝$.on實現(xiàn)事件代理；10. 性能優(yōu)化建議包括緩存選擇器、使用事件委託、批量DOM操作及DocumentFragment減少重排。現(xiàn)代JavaScript憑藉強大API已無需依賴jQuery，代碼更輕量、高效且易維護。 
          

          Advanced DOM Manipulation without jQuery
          

           Modern web development has largely moved away from jQuery, especially as native JavaScript (ES6 ) and modern DOM APIs have become powerful and consistent across browsers. Advanced DOM manipulation without jQuery is not only possible—it's often faster, cleaner, and more maintainable. Here's how to handle common and advanced tasks using vanilla JavaScript. 
          
Advanced DOM Manipulation without jQuery
          

           1. Selecting Elements Like jQuery

          

           jQuery made element selection easy with its flexible $() syntax. Modern JavaScript offers equally expressive methods:
           // Single element (like $(&#39;selector&#39;).get(0) or $(&#39;selector&#39;)[0])
const el = document.querySelector(&#39;.my-class&#39;);

// Multiple elements (returns NodeList, like jQuery collection)
const els = document.querySelectorAll(&#39;.my-items&#39;);

// Match on data attributes, states, etc.
const activeLinks = document.querySelectorAll(&#39;a.active[data-toggle]&#39;);
           ? Tip : Use Array.from() or spread syntax to convert NodeList to an array for map , filter , etc.: 
          Advanced DOM Manipulation without jQuery
           const texts = [...document.querySelectorAll(&#39;li&#39;)].map(li => li.textContent);
           2. Event Delegation Without jQuery
           Instead of attaching events to each element, use event delegation on a parent—especially useful for dynamic content.
           document.addEventListener(&#39;click&#39;, (e) => {
  // Check if the clicked element matches a selector
  if (e.target.matches(&#39;button.delete&#39;)) {
    console.log(&#39;Deleting item:&#39;, e.target.dataset.id);
  }
});
           ? Works even for elements added later.
           ? Avoids memory leaks from orphaned event listeners. 
          Advanced DOM Manipulation without jQuery
           3. Creating and Inserting Elements
           jQuery: $(&#39;<div class="box">Content</div>&#39;).appendTo(&#39;#container&#39;);
           Vanilla JS:
           const div = document.createElement(&#39;div&#39;);
div.className = &#39;box&#39;;
div.textContent = &#39;Content&#39;;

document.getElementById(&#39;container&#39;).appendChild(div);
           Or use insertAdjacentHTML() for quick HTML injection:
           document.body.insertAdjacentHTML(&#39;beforeend&#39;, &#39;<div class="alert">New message</div>&#39;);
           ? Positions: &#39;beforebegin&#39; , &#39;afterbegin&#39; , &#39;beforeend&#39; , &#39;afterend&#39;
           4. Updating Attributes, Classes, and Styles
           Attributes
           el.setAttribute(&#39;data-id&#39;, 123);
el.getAttribute(&#39;href&#39;);
el.removeAttribute(&#39;disabled&#39;);
           Classes (with classList )
           el.classList.add(&#39;active&#39;);
el.classList.remove(&#39;hidden&#39;);
el.classList.toggle(&#39;visible&#39;);
el.classList.contains(&#39;selected&#39;);
           Inline Styles
           el.style.opacity = &#39;0.5&#39;;
el.style.display = &#39;none&#39;;

// For multiple styles, consider using CSS classes instead
el.classList.add(&#39;fade-out&#39;);
           5. Traversing the DOM
           jQuery made traversal intuitive. Native equivalents:
           jQuery Vanilla JS
           $(el).parent() el.parentNode
           $(el).children() el.children (HTMLCollection)
           $(el).next() el.nextElementSibling
           $(el).prev() el.previousElementSibling
           $(el).find(&#39;.child&#39;) el.querySelector(&#39;.child&#39;) or el.querySelectorAll()
           Example:
           const parent = el.parentNode;
const firstChild = parent.firstElementChild;
const lastChild = parent.lastElementChild;
           6. Removing Elements
           jQuery: $(&#39;#item&#39;).remove();
           Vanilla JS:
           el.remove(); // Modern browsers
           For older browser support:
           if (el.parentNode) {
  el.parentNode.removeChild(el);
}
           7. Working with HTML and Text Content
           Purpose Method
           Get inner HTML el.innerHTML
           Set inner HTML el.innerHTML = &#39;<b>new</b>&#39;
           Get text only el.textContent
           Set text only el.textContent = &#39;Plain text&#39;
           ?? Use textContent when possible—it's safer and faster than innerHTML .
           8. Waiting for DOM Ready (Without jQuery Ready)
           jQuery: $(document).ready(fn)
           Vanilla JS:
           document.addEventListener(&#39;DOMContentLoaded&#39;, () => {
  console.log(&#39;DOM is ready&#39;);
});
           Or just place your script at the end of <body> —simple and effective.
           9. Custom Utility Function (Mini jQuery Substitute)
           If you miss the convenience, write a lightweight wrapper:
           const $ = (selector, context = document) => context.querySelector(selector);
const $$ = (selector, context = document) => [...context.querySelectorAll(selector)];

// Usage:
const header = $(&#39;.header&#39;);
const links = $$(&#39;nav a&#39;);

// Add methods
$.on = (target, event, selector, handler) => {
  target.addEventListener(event, (e) => {
    if (e.target.matches(selector)) handler.call(e.target, e);
  });
};

// Use it:
$.on(document, &#39;click&#39;, &#39;.btn&#39;, (e) => alert(&#39;Clicked!&#39;));
           This gives you jQuery-like syntax without the overhead.
           10. Performance Tips
          •  Cache selectors when used repeatedly.
          •  Use event delegation for dynamic or large lists.
          •  Avoid frequent DOM reads/writes— batch changes when possible.
          •  Use DocumentFragment for inserting many elements:
           const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i ) {
  const li = document.createElement(&#39;li&#39;);
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
list.appendChild(fragment); // One reflow
          

           Basically, modern JavaScript gives you everything jQuery offered—and more—without the extra library. With querySelector , classList , addEventListener , and insertAdjacentHTML , you can do advanced DOM manipulation cleanly and efficiently.
          

           It's not complex, but it's easy to overlook how far vanilla JS has come.
          以上是沒有jQuery的高級DOM操縱的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
          


						
          
					
          
					
          
						
          本網(wǎng)站聲明
          
						
          本文內(nèi)容由網(wǎng)友自願投稿，版權(quán)歸原作者所有。本站不承擔相應(yīng)的法律責任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請聯(lián)絡(luò)admin@php.cn
          
					
          
				
          

				



				
          


				
    


					


											
          
							
          
								
          
									
									
          熱AI工具
          
								
          
								
          
																		
          
											
												Undress AI Tool
											
											
          
												
													
          Undress AI Tool
          
												          
												
          免費脫衣圖片
          
											
          
										
          
																		
          
											
												Undresser.AI Undress
											
											
          
												
													
          Undresser.AI Undress
          
												          
												
          人工智慧驅(qū)動的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
          
											
          
										
          
																		
          
											
												AI Clothes Remover
											
											
          
												
													
          AI Clothes Remover
          
												          
												
          用於從照片中去除衣服的線上人工智慧工具。
          
											
          
										
          
																		
          
											
												Clothoff.io
											
											
          
												
													
          Clothoff.io
          
												          
												
          AI脫衣器
          
											
          
										
          
																		
          
											
												Video Face Swap
											
											
          
												
													
          Video Face Swap
          
												          
												
          使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
          
											
          
										
          
																
          
								
							
          
						
          
					


					


											
          
							
          
								
          
									
									
          熱工具
          
								
          
								
          
																		
          
											
												記事本++7.3.1
											
											
          
												
													
          記事本++7.3.1
          
												          
												
          好用且免費的程式碼編輯器
          
											
          
										
          
																			
          
											
												SublimeText3漢化版
											
											
          
												
													
          SublimeText3漢化版
          
												          
												
          中文版，非常好用
          
											
          
										
          
																			
          
											
												禪工作室 13.0.1
											
											
          
												
													
          禪工作室 13.0.1
          
												          
												
          強大的PHP整合開發(fā)環(huán)境
          
											
          
										
          
																			
          
											
												Dreamweaver CS6
											
											
          
												
													
          Dreamweaver CS6
          
												          
												
          視覺化網(wǎng)頁開發(fā)工具
          
											
          
										
          
																			
          
											
												SublimeText3 Mac版
											
											
          
												
													
          SublimeText3 Mac版
          
												          
												
          神級程式碼編輯軟體(SublimeText3)
          
											
          
										
          
																	
          
								
							
          
						
          
										

					
					
          
						
          
							
          
								
								
          熱門話題
          
							
          
							
          
															
          
									Laravel 教程
									
          
										
          
											
											1597
										
          
										
          
											
											29
										
          
									
          
								
          
															
          
									PHP教程
									
          
										
          
											
											1488
										
          
										
          
											
											72
										
          
									
          
								
          
														
          
							
						
          
					
          
				
          
			
          
							
          
					
          
						
						
          

													
          
								
									VSCODE設(shè)置。 JSON位置
								
								VSCODE設(shè)置。 JSON位置
								Aug 01, 2025 am	 06:12 AM
								
          settings.json文件位於用戶級或工作區(qū)級路徑，用於自定義VSCode設(shè)置。 1.用戶級路徑：Windows為C:\Users\\AppData\Roaming\Code\User\settings.json，macOS為/Users//Library/ApplicationSupport/Code/User/settings.json，Linux為/home//.config/Code/User/settings.json；2.工作區(qū)級路徑：項目根目錄下的.vscode/settings
          
							
          
														
          
								
									如何使用JDBC處理Java的交易？
								
								如何使用JDBC處理Java的交易？
								Aug 02, 2025 pm	 12:29 PM
								
          要正確處理JDBC事務(wù)，必須先關(guān)閉自動提交模式，再執(zhí)行多個操作，最後根據(jù)結(jié)果提交或回滾；1.調(diào)用conn.setAutoCommit(false)以開始事務(wù)；2.執(zhí)行多個SQL操作，如INSERT和UPDATE；3.若所有操作成功則調(diào)用conn.commit()，若發(fā)生異常則調(diào)用conn.rollback()確保數(shù)據(jù)一致性；同時應(yīng)使用try-with-resources管理資源，妥善處理異常並關(guān)閉連接，避免連接洩漏；此外建議使用連接池、設(shè)置保存點實現(xiàn)部分回滾，並保持事務(wù)盡可能短以提升性能。
          
							
          
														
          
								
									在Java的掌握依賴注入春季和Guice
								
								在Java的掌握依賴注入春季和Guice
								Aug 01, 2025 am	 05:53 AM
								
          依賴性（di）IsadesignpatternwhereObjectsReceivedenciesenciesExtern上，推廣looseSecouplingAndEaseerTestingThroughConstructor，setter，orfieldInjection.2.springfraMefringframeWorkSannotationsLikeLikeLike@component@component，@component，@service，@autowiredwithjava-service和@autowiredwithjava-ligatiredwithjava-lase-lightike
          
							
          
														
          
								
									Python Itertools組合示例
								
								Python Itertools組合示例
								Jul 31, 2025 am	 09:53 AM
								
          itertools.combinations用於生成從可迭代對像中選取指定數(shù)量元素的所有不重複組合（順序無關(guān)），其用法包括：1.從列表中選2個元素組合，如('A','B')、('A','C')等，避免重複順序；2.對字符串取3個字符組合，如"abc"、"abd"，適用於子序列生成；3.求兩數(shù)之和等於目標值的組合，如1 5=6，簡化雙重循環(huán)邏輯；組合與排列的區(qū)別在於順序是否重要，combinations視AB與BA為相同，而permutations視為不同；
          
							
          
														
          
								
									數(shù)據(jù)工程ETL的Python
								
								數(shù)據(jù)工程ETL的Python
								Aug 02, 2025 am	 08:48 AM
								
          Python是實現(xiàn)ETL流程的高效工具，1.數(shù)據(jù)抽?。和ㄟ^pandas、sqlalchemy、requests等庫可從數(shù)據(jù)庫、API、文件等來源提取數(shù)據(jù)；2.數(shù)據(jù)轉(zhuǎn)換：使用pandas進行清洗、類型轉(zhuǎn)換、關(guān)聯(lián)、聚合等操作，確保數(shù)據(jù)質(zhì)量並優(yōu)化性能；3.數(shù)據(jù)加載：利用pandas的to_sql方法或云平臺SDK將數(shù)據(jù)寫入目標系統(tǒng)，注意寫入方式與批次處理；4.工具推薦：Airflow、Dagster、Prefect用於流程調(diào)度與管理，結(jié)合日誌報警與虛擬環(huán)境提升穩(wěn)定性與可維護性。
          
							
          
														
          
								
									故障排除常見的java`ofmemoryError`場景''
								
								故障排除常見的java`ofmemoryError`場景''
								Jul 31, 2025 am	 09:07 AM
								
          java.lang.OutOfMemoryError:Javaheapspace表示堆內(nèi)存不足，需檢查大對象處理、內(nèi)存洩漏及堆設(shè)置，通過堆轉(zhuǎn)儲分析工具定位並優(yōu)化代碼；2.Metaspace錯誤因類元數(shù)據(jù)過多，常見於動態(tài)類生成或熱部署，應(yīng)限制MaxMetaspaceSize並優(yōu)化類加載；3.Unabletocreatenewnativethread因係統(tǒng)線程資源耗盡，需檢查線程數(shù)限制、使用線程池、調(diào)整棧大??；4.GCoverheadlimitexceeded指GC頻繁但回收少，應(yīng)分析GC日誌，優(yōu)化
          
							
          
														
          
								
									Python Pytest夾具示例
								
								Python Pytest夾具示例
								Jul 31, 2025 am	 09:35 AM
								
          fixture是用於為測試提供預(yù)設(shè)環(huán)境或數(shù)據(jù)的函數(shù)，1.使用@pytest.fixture裝飾器定義fixture；2.在測試函數(shù)中以參數(shù)形式註入fixture；3.yield之前執(zhí)行setup，之後執(zhí)行teardown；4.通過scope參數(shù)控製作用域，如function、module等；5.將共用fixture放在conftest.py中實現(xiàn)跨文件共享，從而提升測試的可維護性和復(fù)用性。
          
							
          
														
          
								
									如何使用Java的日曆？
								
								如何使用Java的日曆？
								Aug 02, 2025 am	 02:38 AM
								
          使用java.time包中的類替代舊的Date和Calendar類；2.通過LocalDate、LocalDateTime和LocalTime獲取當前日期時間；3.使用of()方法創(chuàng)建特定日期時間；4.利用plus/minus方法不可變地增減時間；5.使用ZonedDateTime和ZoneId處理時區(qū)；6.通過DateTimeFormatter格式化和解析日期字符串；7.必要時通過Instant與舊日期類型兼容；現(xiàn)代Java中日期處理應(yīng)優(yōu)先使用java.timeAPI，它提供了清晰、不可變且線
          
							
          
													
          

													
								See all articles