Возможно ли ограничение зоны поиска DOM?

180
11 февраля 2018, 01:28

Можно ли, например, для метода getElementById, сократить область поиска со всей страницы до какой-либо отдельной части HTML-документа? В примере

<div id="container">
    <div id="element">
    </div>
</div>

можно конечно, сначала найти container, а потом внутри него уже искать element, но container-то мы ищём опять же по всему документу, а это нерационально в больших документах. Можно ли как-то ограничить зону поиска?

Answer 1

Что-то мне подсказывает, что при построении дерева все ссылки на элементы ID собираю в одном месте и потом используются для быстрого поиска по дереву. Поэтому то, что вы хотите оптимизировать и так уже оптимизировано. Но не буду этого утверждать.

В общем как один из вариантов, можно натыкать меток и ограничивать ими, если уж так хочется. По крайней мере они точно собраны в одном месте и до них легко добраться.

console.log( 
  document.anchors["part_2"].innerText 
)
<div> 
  <a name="part_1"> 
    part 1 
  </a> 
</div> 
<div> 
  <a name="part_2"> 
    part 2 
  </a> 
</div> 
<div> 
  <a name="part_3"> 
    part 3 
  </a> 
</div>

Answer 2

Даже не могу сообразить для чего тебе это надо. id - идентификатор уникальный и может быть только в единственном экземпляре на все странице. И даже если данный экземпляр будет в начале страницы или где-то далеко и обернут в тысячу родительских блоков, это ни как не повлияет на скорость его обнаружения.... Ну может на миллионную долю секунды.... Так что в этом нет ни какого смысла....

Answer 3

Можно.

Это имеет смысл для поиска например по имени тега, классу или более сложному селектору.

Но для поиска по id это смысла не имеет, так как все id хранятся в хэш таблице и поиск по ней происходит очень быстро (за константное время операций), и там уже нечего ускорять.

var area = document.getElementById("searchArea"); 
 
var els = area.getElementsByTagName("p"); 
 
/* можно и по id поискать, но скорее всего это будет медленнее чем поиском через document.getElementById */ 
var el1 = area.querySelector("#id1"); 
 
console.log(Array.from(els)); 
console.log(el1);
<p> 
  some text 
</p> 
 
<div id="searchArea"> 
 
  <p id="id1">11</p> 
  <p>22</p> 
 
</div> 
 
<p> 
  some text 
</p>

READ ALSO
Как на Apache с PHP 7 запустить версию PHP 5.3

Как на Apache с PHP 7 запустить версию PHP 5.3

Есть локальный сервер на Apache с PHP версии 7 но в списке сайтов есть некоторые написаные с версией 53 и из за того что некоторый функционал не работает...

204
В sonata-admin скролл там, где он не нужен

В sonata-admin скролл там, где он не нужен

На каждой странице в Sonata-admin появляется скролл, даже если страница помещается в экранПример скролла

233
Сравнение ассоциативных массивов php

Сравнение ассоциативных массивов php

нужно сравнить несколько ассоциативных массивов, которые относятся к друг другу, как 1:мВсе реквизиты в массивах разбиты на группы с сходными...

243
получить массив POST с другого сайта в wordpress

получить массив POST с другого сайта в wordpress

Есть 2 сайта из первого надо отправить массив POST, а на втором принять и обработать, делаю таким образом: На сайте "http://test1com" отправляю таким...

241