Как получить элемент в дочернем массиве DOM, который возвращается в getElementsByTagName

Причина в том, что эти svg элементы, очевидно, добавляются в документ асинхронно. К тому времени, когда вы смотрите на консоль и открываете структуру svgs, элементы svg уже загружены, но это не имело место в тот момент, когда ваш код запускался и создавал массив. Вы видите их из-за ленивой загрузки консоли .

Если элементы svg загружаются при загрузке страницы, то вам может повезти, и вы можете просто обернуть свой код во что-то вроде:

window.onload = () => { /* your code */ }

Но, скорее всего, этот контент загружен через некоторые Ajax-вызовы, и вышеописанное не поможет.

Вы можете прослушивать события мутации DOM:

const svgs = document.getElementsByTagName('svg');
console.log(svgs.length); // <-- presumably outputs 0

const listener = new MutationObserver(updated);
// This listens to changes under the BODY element. If you can be more 
// precise, then do so (to save resources). If you can do without
// the subtree option, then that is also preferred:
listener.observe(document.body, { childList: true, subtree: true });

function updated() {
    console.log(svgs.length); // <-- notice the increased length
    // Do whatever else you want to do with this collection.

    // If you are sure you have all you need, then stop the listener:
    listener.disconnect();
}

Если элементы заполнены все «сразу», и вы просто хотите один вызов прослушивателя событий, то вам все равно может потребоваться его настройка. с некоторым шаблоном ослабления .