Для каждого фронтенд-разработчика Javascript - самый важный навык. Независимо от того, сколько библиотек существует, каждый разработчик должен хорошо разбираться в javascript.
Фреймворки будут появляться и исчезать, но в долгосрочной перспективе вы должны знать, как работает Javascript. Под капотом каждый фреймворк и библиотека - это только javascript. Если вы проверите вопросы собеседований большинства компаний, они также относятся к вашим знаниям только в javascript.
В этой статье я собираюсь поделиться некоторыми основами, но наиболее часто используемым кодом javascript, который каждый фронтенд-разработчик использует в своей повседневной кодовой жизни. Большую часть времени мы ищем jQuery или другие фреймворки / библиотеки для этих задач, но они также могут быть легко выполнены с помощью Javascript.
1. Доступ к элементам DOM на основе класса
Наиболее часто используемый метод доступа к элементам DOM в Javascript - document.getElementById. Для этого нам нужно присвоить ID элементу DOM, к которому мы хотим получить доступ. Но что, если вы хотите получить доступ к элементу на основе класса или просто имени тега.
document.getElementsByClassName (‘classname’);
Это вернет массив результатов, соответствующих классу. Поскольку классов в DOM может быть более одного раза, мы всегда будем получать массив.
2. Прочтите значение поля ввода
Когда мы разрабатываем интерактивные веб-сайты или приложения. Получение пользовательского ввода и управление ими - наиболее часто используемая задача. В большинстве случаев мы просим пользователей заполнить форму или ввести некоторую информацию, на основании которой мы показываем им результаты. С помощью javascript сделать это очень просто.
document.getElementsByTagName («вход») [0] .value;
3. Добавьте стили CSS к элементам DOM
Есть много ситуаций, когда нам нужно добавить собственный CSS через Javascript. От изменения цвета, размера шрифта или изменения видимости элементов на лету при каком-либо взаимодействии требуется, чтобы javascript добавлял стили в DOM.
Сделать то же самое в Javascript очень просто. Боль может заключаться в написании повторяющегося синтаксиса.
document.getElementsByClassName («имя класса»). style.backgroundColor = «красный»;
4. Добавить / удалить / добавить классы в DOM
Когда дело доходит до добавления интерактивности, Javascript сильно зависит от игры с классами в DOM. Вы можете многого добиться, просто играя с CSS. Кроме того, если вы пишете слишком много - «‹element› .style. ‹StyleProperty›», вам следует подумать о создании класса и добавлении / удалении его из DOM.
document.getElementsById («имя класса»). className = «newClassName»;
Вот - работающий код - наслаждайтесь !!
Спасибо, ребята, что прочитали это. Я хотел бы услышать ваши мысли по этому поводу. Если вы jslovers, не забудьте присоединиться - meetup.com/jslovers.
