44 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
		
		
			
		
	
	
			44 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
| 
								 | 
							
								---
							 | 
						|||
| 
								 | 
							
								title: HTML Dom
							 | 
						|||
| 
								 | 
							
								localeTitle: HTML Dom
							 | 
						|||
| 
								 | 
							
								---
							 | 
						|||
| 
								 | 
							
								## HTML Dom
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								С HTML DOM JavaScript может получить доступ и изменить все элементы HTML-документа.
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								Когда веб-страница загружается, браузер создает **D** ocument **O** bject **M** odel на странице.
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								Модель HTML DOM построена как дерево объектов:
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								Каждый элемент в DOM также называется узлом.
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								```html
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								<html> 
							 | 
						|||
| 
								 | 
							
								 <head> 
							 | 
						|||
| 
								 | 
							
								  <title> My title </title> 
							 | 
						|||
| 
								 | 
							
								 </head> 
							 | 
						|||
| 
								 | 
							
								 <body> 
							 | 
						|||
| 
								 | 
							
								  <a href="#">My Link</a> 
							 | 
						|||
| 
								 | 
							
								  <h1> My header </h1> 
							 | 
						|||
| 
								 | 
							
								 </body> 
							 | 
						|||
| 
								 | 
							
								 </html> 
							 | 
						|||
| 
								 | 
							
								```
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								DOM для вышеуказанного HTML выглядит следующим образом:
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								С объектной моделью JavaScript получает все необходимое для создания динамического HTML:
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								*   JavaScript может изменять все элементы HTML на странице
							 | 
						|||
| 
								 | 
							
								*   JavaScript может изменить все атрибуты HTML на странице
							 | 
						|||
| 
								 | 
							
								*   JavaScript может изменять все стили CSS на странице
							 | 
						|||
| 
								 | 
							
								*   JavaScript может удалить существующие элементы и атрибуты HTML
							 | 
						|||
| 
								 | 
							
								*   JavaScript может добавлять новые HTML-элементы и атрибуты
							 | 
						|||
| 
								 | 
							
								*   JavaScript может реагировать на все существующие HTML-события на странице
							 | 
						|||
| 
								 | 
							
								*   JavaScript может создавать новые HTML-события на странице
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								#### Дополнительная информация:
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								[W3C - HTML DOM](https://www.w3schools.com/js/js_htmldom.asp)
							 |