Универсальный поиск DOM элементов

В предыдущих уроках мы разбирали с вами методы поиска по Id, классам и тегам. В этом уроке мы рассмотрим универсальный вариант, которым можно заменить все предыдущие. Есть два метода document.querySelector и document.querySelectorAll

<div>
  Test
</div>
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<button>Change</button>

В нашем html у меня написаны 4 дива с классом article и див с id container.

Давайте рассмотрим как мы можем найти див по id и поменять в нем цвет текста.

function changeColor () {
  var element = document.querySelector('#container')
  element.style.color = 'red'
}

Мы ищем наш елемент с помощью querySelector. Чтобы указать, что мы хотим найти именно елемент по id мы ставим перед названием решетку. Дальше мы можем менять цвет как обычно.

Точно также мы можем искать по тегу все елементы с помощью querySelectorAll

 
function changeColor () {
  var elements = document. querySelectorAll('div')
  for(var i = 0; i < elements.length; i++) {
    elements[i].style.color = 'red'
  }
}

Здесь мы использовали просто тег div и циклом поменяли цвет у всех елементов.

Единственная разница между querySelectorAll и querySelector в том, что первый возвращает массив елементов, а второй только первый елемент найденный на странице.

Для поиска по классам впереди названия класса нужно ставить точку.

function changeColor () {
  var elements = document.querySelectorAll('.article')
  for(var i = 0; i < elements.length; i++) {
    elements[i].style.color = 'red'
  }
}

Давайте теперь попробуем более сложный пример. Например в html сделаем вот такую разметку

<body>
  <div>
    <p>
      Text
    </p>
  </div>
  <button>Change</button>
</body>

И теперь мы можем найти елемент вот так

function changeColor () {
  var element = document.querySelector('.description p')
  element. style.border = '1px solid green'
}

То есть мы указали, что хотим найти класс description и потом в нем найти тег p.

И такие селекторы могут быть достаточно сложными.

Давайте напишем еще один пример в котором будем менять цвет у чекбоксов, которые отмечены.

<body>
  <div>
    <div>
      <input type='checkbox' />
      Movies
    </div>
    <div>
      <input type='checkbox' /> Sports
    </div>
    <div>
      <input type='checkbox' /> Reading
    </div>
    <div>
      <input type='checkbox' /> Sleeping
    </div>
  </div>
  <button>Change</button>
</body>

Теперь найдем все инпуты внутри класса container, которые типа checkbox и которые checked.

function changeColor () {
  var elements= document.querySelectorAll('.container input[type="checkbox"]:checked')
  for(var i = 0; i < elements.length; i++) {
    elements[i].parentElement.style.
 
 color = 'red'
  }
}

Потом мы проходимся по ним циклом и задаем цвет на паренте с помощью метода .parentElement.

Если мы посмотрим в браузер, то у нас подсвечиваются красным выбраные чекбоксы.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео и я обязательно на них отвечу.

Поиск DOM элементов по тегам и классам

В предыдущем уроке мы с вами рассмотрели метод document.getElementById, который позволяет нам находить уникальный елемент и потом мы можем менять его свойства.

Как еще можно находить елементы на странице? Очень часто нам приходится находить не один елемент, а массив елементов на странице.

Давайте добавим в наш html 4 дива

<body>
  <p>
    Some text
  </p>
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
  <button>Change</button>
</body>

Теперь мы можем использовать специальную функцию getElementsByTagName, чтобы найти эти елементы по тегу div.

function changeColor () {
  var elements = document.getElementsByTagName('div')
  console.log(elements)
}

Как мы видим в консоли, у нас вывелся массив из 4 елементов. И если мы хотим поменять свойство первого, то мы должны обратиться к елементу по индексу, как мы делали в уроке «Массивы в Javascript». Ссылку на него я оставлю в тексте видео.

Обращаясь к елементу по индексу мы получаем обычный DOM елемент и можем менять его свойста.

function changeColor () {
  var elements = document.getElementsByTagName('div')
  console.log(elements)
  elements[0].style.color = 'red'
}

Если мы посмотрим в браузер, то елемент у нас стал красным.

Что же делать если елементов много и мы хотим поменять их все? В этом нам поможет цикл for. Циклы вы также можете посмотреть в уроке «Циклы в Javascript».

Давайте напишем цикл от нуля до длины массива. Длину массива можно узнать с помощью свойста length. И внутри цикла поменяем цвет каждого елемента на красный.

function changeColor () {
  var elements = document.getElementsByTagName('div')
  console.log(elements)
  for(var i = 0; i < elements.length; i++) {
    elements[i].style.color = 'red'
  }
}

Если мы посмотрим в браузер, то цвет поменялся у всех елементов.

Но по тегу обращаться к елементам не всегда удобно, так как тегов мало, а елементов, которые вы хотите модифицировать на странице много и их нужно как-то уникально различать. Именно поэтому большинство елементов всегда ищут по классу.

Давайте перепишем этот же код используя классы. Добавим класс к всем div елементам.

<body>
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
  <button>Change</button>
</body>

Теперь давайте заменим метод getElementsByTagName на getElementsByClassName.

function changeColor () {
  var elements = document.getElementsByClassName('article')
  console.log(elements)
  for(var i = 0; i < elements.
 
 length; i++) {
    elements[i].style.color = 'red'
  }
}

Как мы видим в браузере, цвета все так же меняются, хотя елементы мы ищем уже по классу.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео и я обязательно на них отвечу.

Как создать простую строку поиска на JavaScript

Привет всем!

Сегодня мы рассмотрим, как создать функциональную, но очень простую панель поиска на JavaScript. Этот мини-проект также будет использовать CSS и HTML.

💭💭💭💭💭💭💭💭💭💭💭

Давайте посмотрим на наши цели:

  1. Создание базовых файлов
  2. Создание основ HTML-файла
  3. Создание простых данных
  4. Установка прослушивателей событий
  5. Отображение результатов на странице
  6. Очистка результатов со страницы
  7. Нет результатов/неверный ввод
  8. Тестирование нашего кода

Теперь, когда у нас есть четкое представление о том, чего нам нужно достичь. .. приступим!

Создание базовых файлов

Помните: это простой проект. Вы можете добавить и украсить это, как вы хотите. Но для сегодняшних нужд нам понадобится всего три (3) файла:

  1. index.js
  2. index.html
  3. стиль.css

У нас есть один (1) файл JavaScript, в котором будут храниться наши прослушиватели событий, функции, объявления переменных + назначения и наши основные данные.

У нас есть один (1) HTML-файл, который будет содержать наши элементы DOM и отображать наш код в видимом формате на веб-странице.

И у нас есть один (1) файл CSS, который мы будем использовать для стилизации наших HTML-элементов и добавления стиля + креативности.

Вы можете создать эти файлы непосредственно в редакторе кода (щелкнув правой кнопкой мыши и выбрав «новый файл» или используя кнопку «Новый файл») или в своем терминале: 

 сенсорный index.html
сенсорный index.js
сенсорный стиль.css
Войти в полноэкранный режимВыйти из полноэкранного режима

Построение основ HTML

Для начала я обычно использую стандартный шаблон HTML5; это выглядит примерно так: 

 
   
      <голова>
        <мета-кодировка="UTF-8">
        
         0">
        Панель поиска
        
      
      <тело>
        <скрипт src="index.js">
Войти в полноэкранный режимВыйти из полноэкранного режима

В тегах title вы можете назвать свой проект как угодно. Это не обязательно отображается на странице браузера, но отображается как метка вкладки в вашем браузере. 

 Панель поиска
Войти в полноэкранный режимВыйти из полноэкранного режима

Две (2) важные вещи, которые нужно изначально добавить (и под изначально я имею в виду сразу !) — это необходимые ссылка и теги скрипта . Попрактикуйтесь в добавлении тега ссылки к файлу style.css и тега скрипта к файлу index.js, когда вы начнете создавать свой HTML-файл. 

 <голова>
Войти в полноэкранный режимВыйти из полноэкранного режима

Таблицы стилей должны располагаться в теге заголовка вашего файла HTML. Этот тег позволяет любому стилю, который вы программируете в файле CSS, отображаться в браузере.

Хотя тег script для вашего файла JavaScript должен находиться в теге body. Обычно его кладут вниз. Важно связать ваш HTML-файл с любым из ваших JS-файлов. Ваши файлы JS будут ссылаться на элементы DOM из вашего HTML. 

 <тело>
    <скрипт src="index.js">
Войти в полноэкранный режимВыйти из полноэкранного режима

Теперь нам понадобятся некоторые элементы, вложенные в тело нашего HTML. Нам обязательно понадобятся:

  • элемент формы с полем ввода
  • кнопка «очистить», чтобы очистить наши результаты
  • элемент ненумерованного списка для хранения наших результатов

Вот пример: 

 <тело>
    <дел>
              <форма>