Доступ к элементу после модификации HTML inner и outer

[Nexus]

xShift, что мешает объявить селекту id (или data-id) и обращаться к нему по id?
Желание спорить отсутствует.

[xShift]

Nexus, у меня тоже нету. Но того требует не только быстрый доступ к свойствам, а хотя бы сущность к примеру БЕМ методологии или OOCSS, который мне в последнее время не нравится изза размножения id. Так удобнее изолировать стили от pre defined и задавать свои политики отображения. Что вы будете горбатого лепить аля замена + оригинал вместо оборачивания?

[Nexus]

xShift, положите ссылку на селект в свойство класса-кастомизатора.

[ruslan_mart]

Ну обычно ссылка на select может храниться где-то в замыкании или в контексте, смотря какая реализация. А обращаться постоянно к элементам через getElemetns*/querySelector, ну или тому подобные - методика для быдлокодеров, аля jQuery головного мозга. Я вообще не признаю innerHTML для перезаписи элементов, а outerHTML уж тем более, это слишком как-то маньячно.

[xShift]

ruslan_mart, а unwrap/wrap это не маньячно?

К примеру:

for(let i of e) {

			let parent = i.parentElement;
		
			while (i.firstChild) {
				parent.insertBefore(i.firstChild, i);
			}

			parent.removeChild(i);
		}

против

i.outerHTML = '<div class="wrapper">'+ i.outerHTML +'</div>';

Я просто как-то элегантнее не видел. Ладно уж parentElement может перестроиться, но closest обязан работать, чтобы не было таких вот while головного мозга.

> querySelector для быдлокодеров

Не правда. Очень крутая фишка, о которой вы возможно не знали это поиск в элементе другого элемента. Это и было круто в jQuery $('.some', '.some-wrapper') - оно отсекало все ненужное.

Но jQuery и сам Sizzle стали не нужна когда появился querySelectorAll.

То же самое:

let element = document.querySelectorAll('#shell');

element[0].querySelectorAll('.somethin-in-shell');

или еще прикольнее:

let element = document.querySelectorAll('#shell');

element[0].querySelectorAll('*'); // вообще все что внутри

И тогда не понятно как вы их умудряетесь получать? везде тыкаете id а потом прямо пишете для div#shell обращение типа shell.dataset.shit-code = 'ololo'; ?

Без этих остается только прямое обращение к объекту в window ...

[j0hnik]

i.outerHTML = '<div class="wrapper">'+ i.outerHTML +'</div>';

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

[xShift]

j0hnik, оберта в функцию + callback перезапускающий ее(нагрузки там не много - процессор этим не сожрет и память). я вот кстати промисы не люблю.

[Alexandroppolus]

for(let i of e) {

			let parent = i.parentElement;
		
			while (i.firstChild) {
				parent.insertBefore(i.firstChild, i);
			}

			parent.removeChild(i);
		}

вот, способ с сохранением объектов-узлов:

var elem = document.querySelector('#id1');
var range = document.createRange();
range.selectNodeContents(elem);
elem.parentNode.replaceChild(range.extractContents(), elem);

это unwrap, то что у тебя в цикле. Собственно, вытаскиваем весь контент из элемента, и заменяем элемент на него. Два изменения дома - вытаскивание контента и замена.

wrap аналогично.

outerHTML/innerHTML тут нафиг не нужен.

матчасцъ - https://learn.javascript.ru/range-textrange-selection

[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');
});

[ruslan_mart]

let element = document.querySelectorAll('#shell');
 
element[0].querySelectorAll('.somethin-in-shell');

Даже если рассматривать Ваш пример, то тут очень много противоречий.

1. id уникален, он должен быть только один на странице. Следовательно, запись document.querySelectorAll('#shell') не имеет смысла, так как мы хотим получить один единственный элемент, а не коллекцию. Получается, что лучше тогда использовать document.querySelector (без "All"), но опять же, куда быстрее и правильней будет заюзать document.getElementById.

2. Нет смысла в два шага искать элементы с определённым классом внутри элемента с определённым id. Можно сразу:

document.querySelectorAll('#shell .somethin-in-shell')

Но это если конечно Вам не нужны оба элемента.