DOM определяет логическую структуру документа, способы доступа к элементам и их изменению. Документ может быть как HTML, так и XML. Когда DOM используется для определения логической структуры HTML-документа, значит речь идет о HTML DOM. Давайте рассмотрим пример:
Рис. 34. Пример HTML-документа
Представление DOM этого документа HTML выглядит следующим образом:
Рис. 35. Представление DOM для документа HTML
Здесь html, head, body, title, meta, h2, p, table, tr, td, Google Tag Manager для googлят, Интернет-маркетинг и веб-аналитика, 2018 и т.д. являются примерами объектов DOM. Они также называются элементами или узлами. Нижние блоки с пометкой «Текст» являются текстовыми узлами.
Чтобы отслеживать клики/события через GTM по определенным элементам на странице, необходимо понимать взаимосвязь между различными узлами документа.
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></div></div>
<!-- Yandex.RTB R-A-5585048-7 -->
<div id="yandex_rtb_R-A-5585048-7" class="rkl"><div class="rasporka"></div></div>
<script>
window.yaContextCb.push(()=>{
Ya.Context.AdvManager.render({
"blockId": "R-A-5585048-7",
"renderTo": "yandex_rtb_R-A-5585048-7"
})
})
</script>
</section>
<section>
<nav class="bottom-nav clr text-center ignore-select">
<ul class="pagination">
<li class="">
<a class="page-link" rel="prev" href="/r/200259?p_=17">« </a>
</li>
<li class="">
<a class="page-link" href="/r/200259?p_=17">17</a>
</li>
<li class="active">
<span class="page-link">18</span>
</li>
<li class="">
<a class="page-link" href="/r/200259?p_=19">19</a>
</li>
<li class="">
<a class="page-link" rel="next" href="/r/200259?p_=19"> »</a>
</li>
</ul>
</nav>
<div class="text-center">
<label for="reader-pagination-page mt-1">
Перейти на страницу
</label>
<select
name="page"
class="js-reader-pagination__page-select"
data-target-path="/r/200259"
>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
<option value="10" >10</option>
<option value="11" >11</option>
<option value="12" >12</option>
<option value="13" >13</option>
<option value="14" >14</option>
<option value="15" >15</option>
<option value="16" >16</option>
<option value="17" >17</option>
<option value="18" selected>18</option>
<option value="19" >19</option>
<option value="20" >20</option>
<option value="21" >21</option>
<option value="22" >22</option>
<option value="23" >23</option>
<option value="24" >24</option>
<option value="25" >25</option>
<option value="26" >26</option>
<option value="27" >27</option>
<option value="28" >28</option>
<option value="29" >29</option>
<option value="30" >30</option>
<option value="31" >31</option>
<option value="32" >32</option>
<option value="33" >33</option>
<option value="34" >34</option>
<option value="35" >35</option>
<option value="36" >36</option>
<option value="37" >37</option>
<option value="38" >38</option>
<option value="39" >39</option>
<option value="40" >40</option>
<option value="41" >41</option>
<option value="42" >42</option>
<option value="43" >43</option>
<option value="44" >44</option>
<option value="45" >45</option>
<option value="46" >46</option>
<option value="47" >47</option>
<option value="48" >48</option>
<option value="49" >49</option>
<option value="50" >50</option>
<option value="51" >51</option>
<option value="52" >52</option>
<option value="53" >53</option>
<option value="54" >54</option>
<option value="55" >55</option>
<option value="56" >56</option>
<option value="57" >57</option>
<option value="58" >58</option>
<option value="59" >59</option>
<option value="60" >60</option>
<option value="61" >61</option>
<option value="62" >62</option>
<option value="63" >63</option>
<option value="64" >64</option>
<option value="65" >65</option>
<option value="66" >66</option>
<option value="67" >67</option>
<option value="68" >68</option>
<option value="69" >69</option>
<option value="70" >70</option>
<option value="71" >71</option>
<option value="72" >72</option>
<option value="73" >73</option>
<option value="74" >74</option>
<option value="75" >75</option>
<option value="76" >76</option>
<option value="77" >77</option>
<option value="78" >78</option>
<option value="79" >79</option>
<option value="80" >80</option>
<option value="81" >81</option>
<option value="82" >82</option>
<option value="83" >83</option>
<option value="84" >84</option>
<option value="85" >85</option>
<option value="86" >86</option>
<option value="87" >87</option>
<option value="88" >88</option>
<option value="89" >89</option>
<option value="90" >90</option>
<option value="91" >91</option>
<option value="92" >92</option>
<option value="93" >93</option>
<option value="94" >94</option>
<option value="95" >95</option>
<option value="96" >96</option>
<option value="97" >97</option>
<option value="98" >98</option>
<option value="99" >99</option>
<option value="100" >100</option>
<option value="101" >101</option>
<option value="102" >102</option>
<option value="103" >103</option>
<option value="104" >104</option>
<option value="105" >105</option>
<option value="106" >106</option>
<option value="107" >107</option>
<option value="108" >108</option>
<option value="109" >109</option>
<option value="110" >110</option>
<option value="111" >111</option>
</select>
</div>
</section>
</div>
</main>
</div>
<div class="sect sect-popular sect-related ignore-select">
<div class="sect-header fx-row fx-middle">
<div class="sect-title fx-1">
<i class="fa fa-puzzle-piece"></i>
Книги, похожие на Google Tag Manager для googлят: Руководство по управлению тегами
</div>
</div>
<div class="sect-content">
<div class="relbooks-block">
<div class="relbook-item">
<a class="top-in img-resp-vert"
href="/b/23174"
>
<div class="top-desc fx-col fx-center anim">
<div class="top-title">Узлы - Игорь Владимирович Балабанов</div>
<div class="top-subtitle">Хобби и ремесла</div>
</div>
<img class="book_image lazyload" title="Читать онлайн Google Tag Manager для googлят: Руководство по управлению тегами - Яков Михайлович Осипенков"
data-src="/uploads/books/images/9f/9f5771d8ed159230450a0e74125fec34c4e0189a.jpg"
alt="Google Tag Manager для googлят: Руководство по управлению тегами - Яков Михайлович Осипенков">
<i class="lazyload-spinner"></i>
</a>
</div>
<div class="relbook-item">
<a class="top-in img-resp-vert"
href="/b/49965"
>
<div class="top-desc fx-col fx-center anim">
<div class="top-title">Хронология открытий в фантастике - Неизвестный Автор</div>
<div class="top-subtitle">Справочники</div>
</div>
<img class="book_image lazyload" title="Читать онлайн Google Tag Manager для googлят: Руководство по управлению тегами - Яков Михайлович Осипенков"
data-src="/build/no_cover.f2a76ebc.jpg"
alt="Google Tag Manager для googлят: Руководство по управлению тегами - Яков Михайлович Осипенков">
<i class="lazyload-spinner"></i>
</a>
</div>
<div class="relbook-item">
<a class="top-in img-resp-vert"
href="/b/63723"
>
<div class="top-desc fx-col fx-center anim">
<div class="top-title">Леваев Лев - Израильский предприниматель - Елена Борисовна Спиридонова, Юлия Петрова</div>
<div class="top-subtitle">Справочники</div>
</div>
<img class="book_image lazyload" title="Читать онлайн Google Tag Manager для googлят: Руководство по управлению тегами - Яков Михайлович Осипенков"
data-src="/build/no_cover.f2a76ebc.jpg"
alt="Google Tag Manager для googлят: Руководство по управлению тегами - Яков Михайлович Осипенков">
<i class="lazyload-spinner"></i>
</a>
</div>
<div class="relbook-item">
<a class="top-in img-resp-vert"
href="/b/76537"
>
<div class="top-desc fx-col fx-center anim">
<div class="top-title">Дагестанские народы Азербайджана: политика, история, культура - Мамед Сулейманов, Константин Игоревич Казенин</div>
<div class="top-subtitle">Справочники</div>
</div>
<img class="book_image lazyload" title="Читать онлайн Google Tag Manager для googлят: Руководство по управлению тегами - Яков Михайлович Осипенков"
data-src="/uploads/books/images/53/5383831a58e07cc9b2b665036523a291e3e1339b.jpg"
alt="Google Tag Manager для googлят: Руководство по управлению тегами - Яков Михайлович Осипенков">
<i class="lazyload-spinner"></i>
</a>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</main>
<aside class="sidebar">
<div class="side-box search-wrap">
<form id="quicksearch" method="get" action="/p">
<div class="search-box">
<input id="story"
name="text" minlength="3" placeholder="Поиск по сайту..."
type="text" autocomplete="off">
<button type="submit" class="search-btn"><span class="fa fa-search"></span></button>
</div>
</form>
</div>
<ul class="side-box side-nav to-mob">
<li><a href="/books">Книги</a>
<ul class="subcat">
<li><a href="/c/55">Боевики</a></li>
<li><a href="/c/21">Военное</a></li>
<li><a href="/c/6">Детская литература</a></li>
<li><a href="/c/74">Классика</a></li>
<li><a href="/c/50">ЛитРПГ</a></li>
<li><a href="/c/36">Любовная фантастика</a></li>
<li><a href="/c/4">Любовные романы</a></li>
<li><a href="/c/47">Попаданцы</a></li>
<li><a href="/c/35">Постапокалипсис</a></li>
<li><a href="/c/5">Приключения</a></li>
<li><a href="/c/63">Триллеры</a></li>
<li><a href="/c/1">Фантастика</a></li>
<li><a href="/c/31">Фэнтези</a></li>
</ul>
</li>
</ul>
</aside>
</div>
<footer class="footer">
<div class="footer-in wrap-center">
<div class="footer-one fx-row">
<div class="footer-col footer-col-desc">
<div class="footer-col-title title">
2025 Литфонд | Читать книги онлайн
</div>
</div>
<div class="footer-col">
<div class="footer-col-title title">Контакты</div>
<ul class="footer-col-content">
<li>Для связи и правообладателям: <a href="mailto:libs.pbn@gmail.com">libs.pbn@gmail.com</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="/build/runtime.68aa92de.js" defer></script><script src="/build/site.38e640f9.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(94963560, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/94963560" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</body>
</html>
