[ruslan_mart]

xShift, про querySelector я другое имел ввиду.. Что получать один и тот же элемент через querySelector при каком-либо событии - не есть хорошо. Если Вы создаёте какой-то модуль/плагин, то у Вас должна быть инициализация на динамическом уровне, а не на уровне получения элементов "туда-сюда" из вёрстки.

element[0].querySelectorAll('*');

element[0].getElementsByTagName('*') работает куда быстрее. Но в принципе, в 99.9% случаев никогда нет надобности получать всех потомков всех уровней, так что эта затея не имеет смысла. Обычно есть необходимость получать потомков первого уровня, а делается это элементарно через element.childNodes/children.

Не нужны никакие id при правильном подходе. Если Вы создаёте элемент или дерево элементов, то уже знаете об этом элементе.

this.wrapper = document.createElement('div');

this.wrapper //-> вот она, ссылка на элемент.

Всё что касается innerHTML/outerHTML - это безусловно нужные вещи, но при написании модулей/плагинов использовать это будет не совсем грамотно.

Вернёмся к теме jQuery или querySelector. Вот типичный пример быдлокода:

document.querySelector('#button').onclick = function() {
    document.querySelectorAll('.foo .bar')[0].style.display = 'none';
};

//Не правильно
$('#button').on('click', function() {
   $('.block-1').css('display', 'block');
   $('.block-1').css('color', 'red');
   $('.block-2').html('Bla');
});


//Правильно
var block_1 = $('.block-1'),
   block_2 = $('.block-2');

$('#button').on('click', function() {
   block_1.css({display: 'block', color: 'red'});
   block_2.html('Bla');
});