Elementele de pe o pagină web

Pentru a lucra cu elementele de pe o pagină web, putem utiliza atât funcționalitatea tipului Node, care reprezintă orice nod al paginii web, cât și funcționalitatea tipului HTMLElement, care reprezintă propriu-zis elementul. Adică obiectele HTMLElement sunt, de fapt, aceleași noduri - obiecte Node, ale căror tip de nod (proprietatea nodeType) este egal cu 1.

Fiecare element al unei pagini web corespunde unui anumit tip în JavaScript. Dar toate aceste tipuri sunt subtipuri ale tipului HTMLElement, care definește funcționalitatea de bază a elementelor. Voi enumera pe scurt tipurile actuale de elemente:

<a>: tipul HTMLAnchorElement
<abbr>: tipul HTMLElement
<address>: tipul HTMLElement
<area>: tipul HTMLAreaElement
<audio>: tipul HTMLAudioElement
<b>: tipul HTMLElement
<base>: tipul HTMLBaseElement
<bdo>: tipul HTMLElement
<blockquote>: tipul HTMLQuoteElement
<body>: tipul HTMLBodyElement
<br>: tipul HTMLBRElement
<button>: tipul HTMLButtonElement
<caption>: tipul HTMLTableCaptionElement
<canvas>: tipul HTMLCanvasElement
<cite>: tipul HTMLElement
<code>: tipul HTMLElement
<col>, <colgroup>: tipul HTMLTableColElement
<data>: tipul HTMLDataElement
<datalist>: tipul HTMLDataListElement
<dd>: tipul HTMLElement
<del>: tipul HTMLModElement
<dfn>: tipul HTMLElement
<div>: tipul HTMLDivElement
<dl>: tipul HTMLDListElement
<dt>: tipul HTMLElement
<em>: tipul HTMLElement
<embed>: tipul HTMLEmbedElement
<fieldset>: tipul HTMLFieldSetElement
<form>: tipul HTMLFormElement
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: tipul HTMLHeadingElement
<head>: tipul HTMLHeadElement
<hr>: tipul HTMLHRElement
<html>: tipul HTMLHtmlElement
<i>: tipul HTMLElement
<iframe>: tipul HTMLIFrameElement
<img>: tipul HTMLImageElement
<input>: tipul HTMLInputElement
<ins>: tipul HTMLModElement
<kbd>: tipul HTMLElement
<keygen>: tipul HTMLKeygenElement
<label>: tipul HTMLLabelElement
<legend>: tipul HTMLLegendElement
<li>: tipul HTMLLIElement
<link>: tipul HTMLLinkElement
<map>: tipul HTMLMapElement
<media>: tipul HTMLMediaElement
<meta>: tipul HTMLMetaElement
<meter>: tipul HTMLMeterElement
<noscript>: tipul HTMLElement
<object>: tipul HTMLObjectElement
<ol>: tipul HTMLOListElement
<optgroup>: tipul HTMLOptGroupElement
<option>: tipul HTMLOptionElement
<output>: tipul HTMLOutputElement
<p>: tipul HTMLParagraphElement
<param>: tipul HTMLParamElement
<pre>: tipul HTMLPreElement
<progress>: tipul HTMLProgressElement
<q>: tipul HTMLQuoteElement
<s>: tipul HTMLElement
<samp>: tipul HTMLElement
<script>: tipul HTMLScriptElement
<select>: tipul HTMLSelectElement
<small>: tipul HTMLElement
<source>: tipul HTMLSourceElement
<span>: tipul HTMLSpanElement
<strong>: tipul HTMLElement
<style>: tipul HTMLStyleElement
<sub>: tipul HTMLElement
<sup>: tipul HTMLElement
<table>: tipul HTMLTableElement
<tbody>: tipul HTMLTableSectionElement
<td>: tipul HTMLTableCellElement
<textarea>: tipul HTMLTextAreaElement
<tfoot>: tipul HTMLTableSectionElement
<th>: tipul HTMLTableHeaderCellElement
<thead>: tipul HTMLTableSectionElement
<time>: tipul HTMLTimeElement
<title>: tipul HTMLTitleElement
<tr>: tipul HTMLTableRowElement
<track>: tipul HTMLTrackElement
<ul>: tipul HTMLUListElement
<var>: tipul HTMLElement / HTMLUnknownElement
<video>: tipul HTMLVideoElement

Putem obține tipul specific al unui element folosind metoda Object.getPrototypeOf().

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

Proprietățile elementelor

Tipul Element oferă o serie de proprietăți care stochează informații despre element:

tagName: returnează tag-ul elementului
textContent: reprezintă conținutul text al elementului
innerText: reprezintă conținutul text al elementului (similar cu textContent)
innerHTML: reprezintă codul HTML al elementului

Una dintre proprietățile cheie ale obiectului Element este tagName, care returnează tag-ul elementului:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <h1 id="header">Home Page</h1>
   <script>
   const header = document.getElementById("header");
   console.log(header.tagName);  // H1
   </script>
</body>
</html>

Similar, se poate folosi o altă proprietate pentru gestionarea textului - innerText.

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

Totuși, există unele diferențe între textContent și innerText:

textContent obține conținutul tuturor elementelor, inclusiv <script> și <style>, pe când innerText nu face acest lucru
innerText poate citi stilurile și nu returnează conținutul elementelor ascunse, în timp ce textContent nu face acest lucru
innerText permite obținerea CSS, pe când textContent nu

Controlul codului HTML

Nici textContent, nici innerText nu permit obținerea sau modificarea codului HTML al unui element. De exemplu:


header.innerText = "<span style='color:navy;'>Hello World</span>";

Aceasta va schimba doar textul, dar nu și codul HTML. Pentru controlul HTML se folosește proprietatea innerHTML:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <h1 id="header">Home Page</h1>
   <script>
   const header = document.getElementById("header");
   // obținem codul HTML al elementului
   console.log(header.innerHTML);  // Home Page
   // modificăm codul HTML al elementului
   header.innerHTML = "<span style='color:navy;'>Hello World</span>";
   </script>
</body>
</html>