xShift, что мешает объявить селекту id (или data-id) и обращаться к нему по id?
Желание спорить отсутствует. |
Nexus, у меня тоже нету. Но того требует не только быстрый доступ к свойствам, а хотя бы сущность к примеру БЕМ методологии или OOCSS, который мне в последнее время не нравится изза размножения id. Так удобнее изолировать стили от pre defined и задавать свои политики отображения. Что вы будете горбатого лепить аля замена + оригинал вместо оборачивания?
|
xShift, положите ссылку на селект в свойство класса-кастомизатора.
|
Ну обычно ссылка на select может храниться где-то в замыкании или в контексте, смотря какая реализация. А обращаться постоянно к элементам через getElemetns*/querySelector, ну или тому подобные - методика для быдлокодеров, аля jQuery головного мозга. Я вообще не признаю innerHTML для перезаписи элементов, а outerHTML уж тем более, это слишком как-то маньячно.
|
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, оберта в функцию + callback перезапускающий ее(нагрузки там не много - процессор этим не сожрет и память). я вот кстати промисы не люблю.
|
Цитата:
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 |
xShift, про querySelector я другое имел ввиду.. Что получать один и тот же элемент через querySelector при каком-либо событии - не есть хорошо. Если Вы создаёте какой-то модуль/плагин, то у Вас должна быть инициализация на динамическом уровне, а не на уровне получения элементов "туда-сюда" из вёрстки.
Цитата:
Не нужны никакие 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');
});
|
Цитата:
1. id уникален, он должен быть только один на странице. Следовательно, запись document.querySelectorAll('#shell') не имеет смысла, так как мы хотим получить один единственный элемент, а не коллекцию. Получается, что лучше тогда использовать document.querySelector (без "All"), но опять же, куда быстрее и правильней будет заюзать document.getElementById. 2. Нет смысла в два шага искать элементы с определённым классом внутри элемента с определённым id. Можно сразу:
document.querySelectorAll('#shell .somethin-in-shell')
Но это если конечно Вам не нужны оба элемента. |
| Часовой пояс GMT +3, время: 16:29. |