Как [object HTMLTagElement] перевести в строку

JavaScript
Dopamine
05.10.2019 05:21:28 pm
Идея создать данную тему родилась благодаря теме Вывод элемента по которому кликнули. Суть в том, чтобы [object HTMLTagElement] перевести в строку для дальнейшей работы с данными, например, для вывода кода блока в alert. В общем, для перевода нам понадобиться свойство outerHTML.

Свойство outerHTML - содержит в себе HTML указанного элемента целиком. Для примера, возьмем HTML все из той же темы: 
<div class="region">
  <table>
    <tr>
      <td>
        <div>Первый блок</div>
      </td>
      <td>
        <div>Второй блок</div>
      </td>
  </table>
</div>

И пишем такой сценарий (прокомментировал): 
// Получаем объект по классу "region"
var region = document.querySelector('.region'); 
alert(region);                   // [object HTMLDivElement]
alert(region.outerHTML);         // HTML код блока целиком
alert(typeof(region));           // Object
alert(typeof(region.outerHTML)); // String

Как видите, свойство outerHTML помогло нам перевести объект в строку (region.outerHTML).