DOM нужен для того, чтобы манипулировать страницей – читать информацию из HTML, создавать и изменять элементы. Получив узел, мы можем что-то сделать с ним. Все узлы в документе имеют иерархическое отношение друг к другу. Существует несколько специальных терминов для описания отношений между узлами:
● родительский узел (parent node) – родительским узлом по отношению к рассматриваемому объекту является узел, в который вложен рассматриваемый объект.
На примере выше по отношению к узлам ,
и элемент является родительским. Для узла </i>родительским является узел <b><head></b>.</p><p>● <b>узлы-потомки (child node) </b>– узлом-потомком по отношению к рассматриваемому объекту является узел, который вложен в рассматриваемый объект. На нашей схеме по отношению к узлу <i><body> </i><b><h2>, <p> </b>и <b><table> </b>являются потомками. Для узла <i><head> </i>потомками являются <b><title> </b>и атрибут <b>“meta”</b>.</p><p>● <b>узлы-братья (sibling node) </b>– узлы, находящиеся на одинаковом уровне вложенности по отношению к их родительскому узлу. На нашей схеме узлами-братьями являются <b><body> </b>и <b><head> </b>по отношению к корневому <i><html></i>, а также <b><h2>, <p> </b>и <b><table> </b>по отношению к родительскому узлу <i><body></i>.</p><p>Самый верхний узел в DOM называется корневым. Так как объект document не является частью DOM, в нашем примере корневым является <b><html></b>. Он не имеет родителей и сам является родительским узлом по отношению к <i><head> </i>и <i><body></i>.</p><p>В интернете в различных материалах можно встретить разные термины – предок, потомок (прямой и непрямой), сыновья, дочери, дети, ребенок, братья, сестры, правнуки и т.д. По сути, это одно и тоже. То, как вы привыкнете их называть, не имеет значения. Главное – это правильно понимать взаимосвязь между ними и уметь к ним обращаться.</p><p>Каждый объект HTML, кроме текстовых узлов, имеет свойства (атрибуты) и методы. Например:</p><br><image href="#_36.png"><p>Рис. 36. Фрагмент кода</p><br><p>● <b><a> </b>– это элемент HTML;</p><p>● <b>href, class </b>– атрибуты элемента <a>;</p><p>● <b>dataLayer.push () </b>– это метод, который выполняется в ответ на событие <b>onclick </b>(возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick).</p><p>Google Tag Manager по умолчанию отслеживает все основные элементы и атрибуты, но не отслеживает кастомные (пользовательские) атрибуты.</p><p>Когда мы используем CSS-селекторы, мы находим элементы в DOM. для управления внешним видом HTML-документа существует формальный язык CSS. CSS это аббревиатура <b>«Cascading Style Sheets» </b>или <b>«Каскадные Таблицы Стилей»</b>. Обычно CSS называют просто «стили». На текущий момент существует несколько спецификаций (CSS1, CSS2, CSS2.1, CSS3, CSS4). Последняя содержит незначительные изменения, и поэтому самой популярной и часто используемой на данный момент является CSS3.</p></div></div>
</div>
</div>
<div class="reader-panel-bottom">
<div class="reader-pages-number">Страница 17</div>
</div>
</div>
</div>
</div>
<section class="books-reader-wrapper">
<div class="container">
<!-- Yandex.RTB R-A-15257142-7 -->
<div id="yandex_rtb_R-A-15257142-7" class="rkl-wrapp"><div class="rkl-inn"></div></div>
<script>
window.yaContextCb.push(() => {
Ya.Context.AdvManager.render({
"blockId": "R-A-15257142-7",
"renderTo": "yandex_rtb_R-A-15257142-7"
})
})
</script>
</div>
</section>
<div>
<div class="show-more">
<a
class="books-btn"
href="/online/google-tag-manager-dlya-googlyat-rukovodstvo-po-upravleniyu-tegami-yakov-osipenkov/18"
>
На следующую страницу
</a>
</div>
</div>
<div class="pagination reader-pagination">
<section>
<div class="pagination-container">
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="/book/google-tag-manager-dlya-googlyat-rukovodstvo-po-upravleniyu-tegami-yakov-osipenkov#tx">1</a>
</li>
<li class="page-item disabled">
<span class="page-link">…</span>
</li>
<li class="page-item">
<a class="page-link" href="/online/google-tag-manager-dlya-googlyat-rukovodstvo-po-upravleniyu-tegami-yakov-osipenkov/16">16</a>
</li>
<li class="page-item">
<span class="page-link active">17</span>
</li>
<li class="page-item">
<a class="page-link" href="/online/google-tag-manager-dlya-googlyat-rukovodstvo-po-upravleniyu-tegami-yakov-osipenkov/18">18</a>
</li>
<li class="page-item">
<a class="page-link" href="/online/google-tag-manager-dlya-googlyat-rukovodstvo-po-upravleniyu-tegami-yakov-osipenkov/19">19</a>
</li>
<li class="page-item disabled">
<span class="page-link">…</span>
</li>
</ul>
</nav>
</div>
</section>
</div>
</main>
</div>
<script src="/build/runtime.5332280c.js" defer></script><script src="/build/site.9ca01c8e.js" defer></script>
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js", "ym");
ym(97711753, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/97711753" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</div>
</body>
</html>
