2018-10-12 16:00:59 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								---
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								title: HTML DOM querySelector()
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								localeTitle: HTML DOM querySelector ()
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								---
							 
						 
					
						
							
								
									
										
										
										
											2019-04-15 22:03:01 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Метод объекта Document `querySelector()`  возвращает `первый`  элемент в документе, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращается null.
							 
						 
					
						
							
								
									
										
										
										
											2018-10-12 16:00:59 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								**Содержание HTML:**
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								```html
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< div  id = "id-example" > < / div >   
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								 < div  class = "class-example" > < / div >  
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								 < a > element-example< / a >  
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								```
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								**Содержание JavaScript:**
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								```javascript
							 
						 
					
						
							
								
									
										
										
										
											2019-04-15 22:03:01 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								document.querySelector("#id -example"); // Возвращает элемент с 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
										 
							
							
								 document.querySelector(".class-example"); // Возвращает элемент с 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								 document.querySelector("a"); // Возвращает элемент "a" 
							 
						 
					
						
							
								
									
										
										
										
											2018-10-12 16:00:59 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								```
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-04-15 22:03:01 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Заметим, что `querySelector()`  возвращает первый соответствующий элемент, чтобы вернуть все совпадения, используйте метод querySelectorAll ().
							 
						 
					
						
							
								
									
										
										
										
											2018-10-12 16:00:59 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								```html
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< div  id = "example" > First< / div >   
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								 < div  id = "example" > Second< / div >  
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								```
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								```javascript
							 
						 
					
						
							
								
									
										
										
										
											2019-04-15 22:03:01 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								document.querySelector("#example "); // Возвращает только элемент с 
							 
						 
					
						
							
								
									
										
										
										
											2018-10-12 16:00:59 -04:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								```
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								#### Дополнительная информация:
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-04-15 22:03:01 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								[MDN - document.querySelector () ](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector )