Сегодня небольшой лайфхак. Ок очень пригодится тем, кто интересуется таким вопросом, как SEO оптимизация Белореченск. Разберемся как без каких-либо зависимостей (jQuery и т.п.) можно добавить какой-нибудь важный параметр к ссылкам без jQuery, например данные, выбранные пользователем в форме.
Только Javascript
В javascript есть замечательные функции querySelector и querySelectorAll. Они позволяют выполнять поиск элементов в дереве DOM при помощи CSS селекторов. То есть по сути выполняет одну из основных фишек jQuery, и позволяет отказаться от него вообще.
Примеры
Посмотрим что с этим можно сделать, например document.querySelector(‘a.out’) вернет вам элемент тэга a, у которых есть класс out.
В чем разница между querySelector и querySelectorAll
Всё очень просто и очевидно из названия, querySelector вернет первый найденный элемент, querySelectorAll – массив всех найденных.
Перейдем к нашей задаче
Нам нужно добавить параметр из поля для ввода во все ссылки, которые содержат слово download, например, все ссылки на файл download.php должны получить в конце _GET параметр с именем файла из поля для ввода.
document.querySelector(‘input’).addEventListener(‘keyup’, function(el){
var val = el.value
document.querySelectorAll(‘a[href*=»download»]’).forEach(function(a){
a.href += «?file=»+val
})
})
Вот и всё. Добавили.
Также давайте посмотрим, как это можно сделать используя анонимные функции. Преимущество этих функций том, что они не требуют дополнительного объявления, позволяют сделать код более читабельным и коротким, а также имеют область видимости той области в которой они вызваны (то есть область видимости проходит в них «насквозь»), что позволяет сделать их универсальными бойцами, которые можно легко применить в нужном месте кода (особенно, если эта функция будет срабатывать только в этом месте, и не будет использоваться в других областях кода).
Итак перепишем код выше в код с анонимными функциями.
document.querySelector(‘input’).addEventListener(‘keyup’,el=>{
var val = el.value
document.querySelectorAll(‘a[href*=»download»]’).forEach(a=>{
a.href += «?file=»+val
})
})
По сути тоже самое, только короче и удобнее.
Также обратите внимание, что в коде мы используем функцию addEventListener, которая привязывает действие на событие, которое происходит с элементом. В нашем случае, это событие keyup у input, и в нём вызывается функция.
