Как получить измененный HTML элемент без прямого вызова document.querySelector?

Question

[FlatUser]

Вообщем суть такая, в конструкторе находятся html элементы, которые были найдены через document.querySelector('), значения ключей links и block являются результатом вызова 'функции' querySelector(').

class App {
   constructor (elements) {
      this.block = elements.block;
      this.links = elements.links;
   }
   
   addLink () {
      console.log(`Длинна ноды ссылок ${this.links.length}`);
      // результат 3
      this.block.innerHTML = '<a href="#">Новая ссылка</a>';
      // добавляем ссылку в блок
      console.log(`Длинна ноды ссылок с ссылками ${this.links.length}`);
      // результат 3
   }
}

let app = new App({
   block: document.querySelector('.block'),
   links: document.querySelectorAll('.block a'),
});

app.addLink();

Происходит так что при добавлении ссылки в блок длинна ноды со ссылками не меняется.
Каким образом имея старый html элемент получить обновленный?

Есть такой вариант, присвоить новый результат querySelector , но он не подходит так this.links в каждом объекте должен быть разным.

this.links = document.querySelectorAll('.block a');

Answer 1

[Владимир Сартаков]

class App {
   constructor (block) {
		this.block = block;
		this.links = block.getElementsByTagName("a");
   }

   addLink () {
		console.log(`Длинна ноды ссылок ${this.links.length}`);
		// результат 3
		this.block.innerHTML = '<a href="#">Новая ссылка</a>';
		// добавляем ссылку в блок
		console.log(`Длинна ноды ссылок с ссылками ${this.links.length}`);
		// результат 1
   }
}

let app = new App(document.querySelector('.block'));

app.addLink();