JS работа с DOM

Объект Element. Управление элементами

Кроме методов и свойств объекта Node в JavaScript мы можем использовать свойства и методы объектов Element. Важно не путать эти два объекта: Node и Element. Node представляет все узлы веб-станицы, в то время как объект Element представляет непосредственно только html-элементы. То есть объекты Element - это фактически те же самые узлы - объекты Node, у которых тип узла (свойство nodeType) равно 1.

Одним из ключевых свойств объекта Element является свойство tagName, которое возвращает тег элемента. Например, получим все элементы, которые есть на странице:

<div class="article">
<h3>Заголовок статьи</h3>
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
<script>
function getChildren(elem){
	
	for(var i in elem.childNodes){
	
		if(elem.childNodes[i].nodeType===1){
		
			console.log(elem.childNodes[i].tagName);
			getChildren(elem.childNodes[i]);
		}
	}
}
var root = document.documentElement;
console.log(root.tagName);
getChildren(root);
</script>

Здесь вначале получаем тег корневого элемента <html> и затем с помощью рекурсивной функции getChildren получаем все вложенные элементы:

Свойства innerText и innerHTML

Для получения или установки текстового содержимого элемента мы можем использовать свойство innerText, а для получения или установки кода html - свойство innerHTML:

<div class="article">
<h3>Заголовок статьи</h3>
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
<script>
var articleDiv = document.querySelector("div.article");
console.log(articleDiv.innerText);
console.log("_______________________");
console.log(articleDiv.innerHTML);
</script>

Надо отметить, что свойство innerText во многом аналогично свойству textContent. То есть следующие вызовы будут равноценны:

var pElement = document.querySelectorAll("div.article p")[0];
pElement.innerText = "hello";
pElement.textContent = "hello";

Установка кода html у элемента:

var articleDiv = document.querySelector("div.article");
articleDiv.innerHTML ="<.h2>Hello World!!!<./h2><.p>bla bla bla<./p>";

Методы объекта Element

Среди методов объекта Element можно отметить методы управления атрибутами:

getAttribute(attr): возвращает значение атрибута attr
setAttribute(attr, value): устанавливает для атрибута attr значение value.
removeAttribute(attr): удаляет атрибут attr и его значение

Работа с атрибутами:

<div class="article" style="color:red;">
<h3>Заголовок статьи</h3>
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
<script>
var articleDiv = document.querySelector("div.article");
// получаем атрибут style
var styleValue = articleDiv.getAttribute("style");
console.log("До изменения атрибута: " + styleValue);
// удаляем атрибут
articleDiv.removeAttribute("style");
// добавляем заново атрибут style
articleDiv.setAttribute("style", "color:blue;");
styleValue = articleDiv.getAttribute("style");
console.log("После изменения атрибута: " + styleValue);
</script>

Размеры и позиция элементов

Элементы имеют ряд свойств, которые позволяют определить размер элемента. Но важно понимать разницу между всеми этими свойствами

Свойства offsetWidth и offsetHeight определяют соответственно ширину и высоту элемента в пикселях. В ширину и высоту включается граница элемента.

Свойства clientWidth и clientHeight также определяют ширину и высоту элемента в пикселях, но уже без учета границы:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<style>
	#rect {
		width: 100px;
		height: 100px;
		background: #50c878;
		border: 3px solid silver;
	}
	</style>
</head>
<body>
&lydiv id="rect">