Возможно ли прочитать в блоке заголовки? Пример кода:
<div class="cont">
<h2>Заголовок</h2>
<p>Текст</p>
<h3 id="1">Заголовок 1</h3>
<p>Текст</p>
<p>Текст</p>
<h3 id="2">Заголовок 2</h3>
<p>Текст</p>
<h3 id="3">Заголовок 3</h3>
<p>Текст</p>
</div>
После чего сформировать маркированный список с якорями, отправляющими к этим заголовкам по id
. По итогу создать список после заголовка h2
, привязываясь только к заголовкам h3
, чтоб вышло вот так:
<div class="cont">
<h2>Заголовок</h2>
<ul class="anchor">
<li><a href="#1" title="Заголовок 1" rel="nofollow">Заголовок 1</a></li>
<li><a href="#2" title="Заголовок 2" rel="nofollow">Заголовок 2</a></li>
<li><a href="#3" title="Заголовок 3" rel="nofollow">Заголовок 3</a></li>
</ul>
<p>Текст</p>
<h3 id="1">Заголовок 1</h3>
<p>Текст</p>
<p>Текст</p>
<h3 id="2">Заголовок 2</h3>
<p>Текст</p>
<h3 id="3">Заголовок 3</h3>
<p>Текст</p>
</div>
Так же, интересует мнение о сложности решения, скорости загрузки и т.д.. Стоит ли так заморачиваться при большом количестве материала или все же руками формировать быстрый переход?
Заранее спасибо за любую помощь.
getElementsByTagName('h3')
вернет массив заголовков. Дальше его можно пробежаться и сформировать ссылки по желаемому принципу{"1": "Заголовок 1", "2": "Заголовок 2", ... }
собрав id и сам заголовок из тегов h3?