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

Последнее обновление: 1.11.2015

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
<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>
</body>
</html>

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

Перебор элементов в JavaScript

Свойства innerText и innerHTML

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
<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>
</body>
</html>
innerHTML и innerText в JavaScript

Надо отметить, что свойство 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 и его значение

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
<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>
</body>
</html>
Работы с атрибутами в JavaScript

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

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

Свойства 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>
<div id="rect"></div>
<script>
var rect = document.getElementById("rect");
console.log("offsetHeight: " + rect.offsetHeight);
console.log("offsetWidth: " + rect.offsetWidth);
console.log("clientHeight: " + rect.clientHeight);
console.log("clientWidth: " + rect.clientWidth);
</script>
</body>
</html>
Размер элемента в javascript

Поскольку у блока div определена граница в 3 пикселя, то по сравнению с clientHeight/clientWidth к offsetHeight/offsetWidth добавляет по 6 пикселей.

Для определения позиции элемента наиболее эффективным способом является метод getBoundingClientRect().

Этот метод возвращает объект со свойствами top, bottom, left, right, которые указывают на смещение элемента относительно верхнего левого угла браузера:

var rect = document.getElementById("rect");
var clientRect  = rect.getBoundingClientRect();
console.log("top: " + clientRect.top);
console.log("bottom: " + clientRect.bottom);
console.log("left: " + clientRect.left);
console.log("right: " + clientRect.right);
Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850