Для работы с элементами на веб-странице мы можем использовать как функциональность типа Node, который представляет любой узел веб-страницы, так и функциональность типа HTMLElement, который собственно представляет элемент. То есть объекты HTMLElement - это фактически те же самые узлы - объекты Node, у которых тип узла (свойство nodeType) равно 1.
Каждый элемент веб-страницы соответствует определенному типу в JavaScript. Но все эти типы являются пол типами типа HTMLElement, который определяет базовую функциональность элементов. Вкратце перечислю актуальные типы элементов:
<a>: тип HTMLAnchorElement
<abbr>: тип HTMLElement
<address>: тип HTMLElement
<area>: тип HTMLAreaElement
<audio>: тип HTMLAudioElement
<b>: тип HTMLElement
<base>: тип HTMLBaseElement
<bdo>: тип HTMLElement
<blockquote>: тип HTMLQuoteElement
<body>: тип HTMLBodyElement
<br>: тип HTMLBRElement
<button>: тип HTMLButtonElement
<caption>: тип HTMLTableCaptionElement
<canvas>: тип HTMLCanvasElement
<cite>: тип HTMLElement
<code>: тип HTMLElement
<col>, <colgroup>: тип HTMLTableColElement
<data>: тип HTMLDataElement
<datalist>: тип HTMLDataListElement
<dd>: тип HTMLElement
<del>: тип HTMLModElement
<dfn>: тип HTMLElement
<div>: тип HTMLDivElement
<dl>: тип HTMLDListElement
<dt>: тип HTMLElement
<em>: тип HTMLElement
<embed>: тип HTMLEmbedElement
<fieldset>: тип HTMLFieldSetElement
<form>: тип HTMLFormElement
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: тип HTMLHeadingElement
<head>: тип HTMLHeadElement
<hr>: тип HTMLHRElement
<html>: тип HTMLHtmlElement
<i>: тип HTMLElement
<iframe>: тип HTMLIFrameElement
<img>: тип HTMLImageElement
<input>: тип HTMLInputElement
<ins>: тип HTMLModElement
<kbd>: тип HTMLElement
<keygen>: тип HTMLKeygenElement
<label>: тип HTMLLabelElement
<legend>: тип HTMLLegendElement
<li>: тип HTMLLIElement
<link>: тип HTMLLinkElement
<map>: тип HTMLMapElement
<media>: тип HTMLMediaElement
<meta>: тип HTMLMetaElement
<meter>: тип HTMLMeterElement
<noscript>: тип HTMLElement
<object>: тип HTMLObjectElement
<ol>: тип HTMLOListElement
<optgroup>: тип HTMLOptGroupElement
<option>: тип HTMLOptionElement
<output>: тип HTMLOutputElement
<p>: тип HTMLParagraphElement
<param>: тип HTMLParamElement
<pre>: тип HTMLPreElement
<progress>: тип HTMLProgressElement
<q>: тип HTMLQuoteElement
<s>: тип HTMLElement
<samp>: тип HTMLElement
<script>: тип HTMLScriptElement
<select>: тип HTMLSelectElement
<small>: тип HTMLElement
<source>: тип HTMLSourceElement
<span>: тип HTMLSpanElement
<strong>: тип HTMLElement
<style>: тип HTMLStyleElement
<sub>: тип HTMLElement
<sup>: тип HTMLElement
<table>: тип HTMLTableElement
<tbody>: тип HTMLTableSectionElement
<td>: тип HTMLTableCellElement
<textarea>: тип HTMLTextAreaElement
<tfoot>: тип HTMLTableSectionElement
<th>: тип HTMLTableHeaderCellElement
<thead>: тип HTMLTableSectionElement
<time>: тип HTMLTimeElement
<title>: тип HTMLTitleElement
<tr>: тип HTMLTableRowElement
<track>: тип HTMLTrackElement
<ul>: тип HTMLUListElement
<var>: тип HTMLElement / HTMLUnknownElement
<video>: тип HTMLVideoElement
Мы можем получить конкретный тип элемента с помощью метода Object.getPrototypeOf():
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<h1 id="header">Home Page</h1>
<script>
const header = document.getElementById("header");
console.log(Object.getPrototypeOf(header)); // HTMLHeadingElement
</script>
</body>
</html>
Тип Element предоставляет ряд свойств, которые хранят информацию об элементе:
tagName: возвращает тег элемента
textContent: представляет текстовое содержимое элемента
innerText: представляет текстовое содержимое элемента (аналогично textContent)
innerHTML: представляет html-код элемента
Одним из ключевых свойств объекта Element является свойство tagName, которое возвращает тег элемента:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<h1 id="header">Home Page</h1>
<script>
const header = document.getElementById("header");
console.log(header.tagName); // H1
</script>
</body>
</html>
Свойство textContent позволяет получить или изменить текстовое содержимое элемента:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<h1 id="header">Home Page</h1>
<script>
const header = document.getElementById("header");
// получаем текст элемента
console.log(header.textContent); // Home Page
// изменяем текст элемента
header.textContent = "Hello World";
</script>
</body>
</html>
Аналогично можно использовать другое свойство для управление текстом - innerText:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<h1 id="header">Home Page</h1>
<script>
const header = document.getElementById("header");
// получаем текст элемента
console.log(header.innerText); // Home Page
// изменяем текст элемента
header.innerText = "Hello World2";
</script>
</body>
</html>
Тем не менее между textContent и innerText есть некоторые различия:
textContent получает содержимое всех элементов, включая <script> и <style, тогда как
innerText этого не делает
innerText умеет считывать стили и не возвращает содержимое скрытых элементов, тогда как textContent этого не делает.
innerText позволяет получить CSS, а textContent — нет.
Ни textContent, ни innerText не позволяют ни получить, ни изменить код html элемента. Например:
header.innerText = "<span style='color:navy;'>Hello World</span>";
Это изменит только текст, но не html код. Для управления html применяется свойство innerHTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<h1 id="header">Home Page</h1>
<script>
const header = document.getElementById("header");
// получаем html-код элемента
console.log(header.innerHTML); // Home Page
// изменяем html-код элемента
header.innerHTML = "<span style='color:navy;'>Hello World</span>";
</script>
</body>
</html>