Това е вторият път, когато отново влизам в JavaScript след дълга пауза от една година. Още през първата година в моя колеж изследвах JS в уеб разработката. Точно като всеки друг човек, аз също бях поразен. По някакви причини го изоставих, но отново след една година проучване на толкова много акаунти в Twitter намирам, че наистина си струва да го науча.
В JS първото нещо, което трябва да знаете, е да създадете препратка между уеб страници и скриптове, това е мястото, където концепцията за DOM (документен обектен модел) и селектори на заявки влиза в картината.
DOM представлява документ с логическо дърво. Всеки клон на дървото завършва с възел и всеки възел съдържа обекти. Възлите могат също да имат манипулатори на събития, прикачени към тях. След като потребителят извърши каквато и да е дейност като превъртане, щракване, задържане на мишката и т.н., това се счита за задействано събитие, след което манипулаторите на събития се изпълняват.
За да изпълнимeventHandlers() трябва да прикачим eventListeners към конкретния елемент, върху който потребителят ще изпълни някакво събитие. За да изберем тези елементи, имаме селектори на заявки в JavaScript.
Методът Document querySelector() връща първия елемент в документа, който съответства на посочения селектор или група от селектори. Ако нищо не съвпада, връща се нула.
Syntax : element = document.querySelector(selectors);
селектори: Низ, който съдържа един или повече селектори за съвпадение. Трябва да са валидни CSS селектори, в противен случай ще покаже синтактична грешка.
Елементът представлява първия елемент в документа, който съответства на посочения набор от CSS селектори, или се връща null, ако нищо не съвпада.
Ако имате нужда от списък с всички елементи, съответстващи на посочените CSS селектори, трябва да използвате querySelectorAll() на мястото на querySelector().
примери:
<textarea></textarea> :
var el=document.querySelector(“textarea”);
<button class=“btn-selected”>click me</button> :
var el = document.querySelector(“.btn-selected”);
<a id=“input-btn” href=“/”></a> :
var el=document.querySelector(“#input-btn”);
<div class=“select-main”><input name=“translate”></div> :
var el = document.querySelector(“div.select-main input[name=‘translate’]”);
точки, които трябва да имате предвид:
- Не всички селектори на псевдокласове са разрешени. Селектор, съставен от :visited или :link, се игнорира и не се намират елементи.
- Посоченият от вас селектор се прилага само към наследниците на началния елемент, от който започвате търсенето. Самият начален елемент не е включен.
искате да научите повече за селекторите, посетете mdn документи.
нека да играем на CLI тест игра, за да тестваме вашето обучение. Покажете ми колко знаете за селекторите на заявки.
