Javascript поиск на странице: Организация поиска по веб-странице на JavaScript (без jQuery) / Хабр

Javascript
22 Мар, 2023
0

Содержание

Универсальный поиск 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.

💭💭💭💭💭💭💭💭💭💭💭

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

Создание базовых файлов
Создание основ HTML-файла
Создание простых данных
Установка прослушивателей событий

Отображение результатов на странице
Очистка результатов со страницы
Нет результатов/неверный ввод
Тестирование нашего кода

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

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

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

index.js
index.html
стиль.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. Нам обязательно понадобятся:

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

Вот пример:

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

<скрипт src="index.

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

Для каждого элемента укажите имя «класса» и/или «идентификатор». Убедитесь, что имена классов или имена идентификаторов отражают то, что делает или предоставляет элемент.

Снаружи внутрь я создал элемент div под названием «form-container»; это обычный стандарт в JavaScript. Мы хотим, чтобы наши разные разделы, у которых есть определенные роли, были вложены в свои собственные контейнеры. Итак, наш контейнер формы содержит форму и прилегающие к ней кнопки. Затем у нас есть еще один div под названием «results-container», в нем будут храниться наши результаты.

В нашем контейнере формы я создал элемент формы. Это содержит наши последующие элементы формы. Я создал тег ввода с типом «текст». Это позволяет пользователю печатать внутри формы ввода. Я также предоставил имя класса, идентификатор и заполнитель. Затем я создал кнопку «отправить» с типом «отправить»; эта кнопка также имеет имя класса. Текст между тегами кнопки будет отображать «поиск» на кнопке в браузере. То же самое относится и к кнопке «очистить».

Наш браузер должен выглядеть примерно так:

Итак, наш файл HTML настроен: давайте продолжим наш файл JavaScript.

Создание простых данных

Поскольку мы не ссылаемся на API, поскольку это простой проект, мы собираемся создать некоторые простые данные, которые будут отображаться на странице в качестве результатов поиска. Зайдите в свой файл index.js.

Мне нравится создавать данные с помощью вложенных массивов JavaScript. Для сегодняшнего примера нашими данными будут имена людей. Итак, наш массив будет называться «люди».

 константа люди = []

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

Каждый элемент массива будет объектом — это означает, что каждый элемент массива будет иметь свойство и значение.

 const люди = [
    {имя: 'адри'},
    {имя: 'Бекки'},
    {имя: 'Крис'},
    {имя: 'Диллон'},
    {имя: 'Эван'},
    {имя: 'Фрэнк'},
    {имя: 'жоржет'},
    {имя: 'Хью'},
    {имя: 'Игорь'},
    {имя: 'Джейкоби'},
    {имя: 'Кристина'},
    {название: 'лимон'},
    {имя: 'матильда'},
    {имя: 'Нил'},
    {имя: 'Офелия'},
    {имя: 'патрик'},
    {имя: 'куинси'},
    {имя: 'Рослин'},
    {имя: 'солене'},
    {имя: Тимоти},
    {имя: 'уфф'},
    {имя: 'фиолетовый'},
    {имя: 'Вятт'},
    {имя: 'х'},
    {имя: 'ядри'},
    {имя: 'зак'},
]

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

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

Установка прослушивателей событий

Мы должны установить два (2) прослушивателя событий. Слушатель событий ожидает, когда произойдет событие («щелчок», «нажатие клавиши», «ввод»), а затем вызывает действие. В этом случае нам нужно, чтобы что-то происходило, когда ввод вводится в форму ввода и когда нажимается кнопка очистки. В JavaScript синтаксис прослушивателя событий выглядит примерно так:

 whatElement.addEventListener("тип события", () => {
}

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

Итак, чтобы к нашей форме ввода был прикреплен прослушиватель событий, я собираюсь использовать querySelector для извлечения кнопки по имени ее класса и установить ее в константу (чтобы ее можно было использовать позже).

 const searchInput = document.querySelector('.input')

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

Теперь я собираюсь присоединить прослушиватель событий к константе, которую мы объявили и назначили:

 searchInput. addEventListener («вход», (e) => {
    // внутри нам нужно добиться нескольких вещей:
    // 1. объявить и присвоить значение цели события переменной AKA независимо от того, что введено в строке поиска
    пусть значение = e.target.value
    // 2. проверяем: существуют ли входные данные и если входные данные больше 0
    если (значение && value.trim().length > 0){
        // 3. переопределить 'значение', чтобы исключить пробелы и изменить ввод на все строчные буквы
         значение = значение.trim().toLowerCase()
        // 4. вернуть результаты, только если значение поиска входит в имя человека
        // нам нужно написать код (функция для фильтрации наших данных, чтобы включить входное значение поиска)
    } еще {
        // 5. ничего не возвращать
        // ввод недействителен -- показать сообщение об ошибке или не показать никаких результатов
    }
}

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

Создадим основу для кнопки очистки:

 const clearButton = document. getElementById('clear')
clearButton.addEventListener("щелчок", () => {
    // 1. написать функцию, которая удаляет все предыдущие результаты со страницы
})

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

Отображение результатов на странице

Чтобы показать наши результаты, мы должны, в конечном счете, перебрать наши простые данные и, если какие-либо данные совпадают с входным значением, добавить данные на страницу (явно).

Давайте создадим функцию, которая сначала добавляет результаты на веб-страницу.

 // создание и объявление функции с именем "setList"
// setList принимает параметр "результаты"
функция setList (результаты) {
    for (const person of results){
        // создание элемента li для каждого элемента результата
        константный объект результата = document.createElement('li')
        // добавление класса к каждому элементу результатов
        resultItem.classList.add('результат-элемент')
        // получение имени текущей точки цикла и добавление имени в качестве текста элемента списка
        константный текст = document. createTextNode(person.name)
        // добавление текста к элементу результата
        resultItem.appendChild(текст)
        // добавление элемента результата в список
        list.appendChild (элемент результата)
    }
}

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

Теперь, когда мы написали как добавлять результаты на страницу; нам нужно сосредоточиться на выяснении того, что должно быть , добавленным к странице.

Если мы вернемся к нашему прослушивателю событий, мы остановимся на #4.
Мы собираемся вызвать «setList()» и передать наш массив людей, но не весь массив. Мы собираемся отфильтровать массив людей и использовать только элементы «людей», значение имени которых включает значение ввода поиска.

 searchInput.addEventListener («вход», (e) => {
    пусть значение = e.target.value
    если (значение && value.trim().length > 0){
         значение = значение.trim().toLowerCase()
        //возврат только результатов setList, если значение поиска включено в имя человека
        setList(люди. фильтр(человек => {
            вернуть person.name.includes (значение)
        }))

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

Давайте проверим это, если мы введем «быть» в нашу строку поиска, «Бекки» должно появиться на странице под строкой поиска.

Что ты видишь?

Удаление результатов со страницы

Чтобы удалить результаты со страницы, нам нужно вызвать наш элемент «список» и удалить каждый дочерний элемент, потому что прямо сейчас наши элементы результатов — это дочерних элементов «списка».

Простой и быстрый способ сделать это — удалить первый дочерний элемент родительского элемента до тех пор, пока больше не останется… мы можем сделать это с помощью цикла «пока».

** Циклы While: пока условие истинно, выполните описанное действие. **

 функция ClearList(){
    // проходим по каждому дочернему элементу списка результатов поиска и удаляем каждый дочерний элемент
    в то время как (список. firstChild) {
        list.removeChild (список.firstChild)
    }
}

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

Мы можем ссылаться на эту функцию, clearList(), в наших прослушивателях событий —

 searchInput.addEventListener("input", (e) => {
    // внутри нам нужно добиться нескольких вещей:
    // 1. объявить и присвоить значение цели события переменной AKA независимо от того, что введено в строке поиска
    пусть значение = e.target.value
    // 2. проверяем: существуют ли входные данные и если входные данные больше 0
    если (значение && value.trim().length > 0){
        // 3. переопределить 'значение', чтобы исключить пробелы и изменить ввод на все строчные буквы
         значение = значение.trim().toLowerCase()
        // 4. вернуть результаты, только если значение поиска входит в имя человека
        // нам нужно написать код (функция для фильтрации наших данных, чтобы включить входное значение поиска)
    } еще {
        // 5. ничего не возвращать
        Очистить список()
    }
}

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

 clearButton. addEventListener("click", () => {
    Очистить список()
})

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

Нет результатов

Ну, мы должны спросить себя, что произойдет, если входное значение не соответствует? Нет результатов? Мы должны сказать пользователю именно это!

Давайте создадим функцию с именем «noResults()». Эта функция отобразит сообщение об ошибке на странице, где должны быть результаты.

 функция noResults(){
    // создаем элемент для ошибки; элемент списка ("li")
    константная ошибка = document.createElement('li')
    // добавление имени класса "error-message" к нашему элементу ошибки
    error.classList.add('сообщение об ошибке')
    // создание текста для нашего элемента
    const text = document.createTextNode('Результаты не найдены. Извините!')
    // добавляем текст к нашему элементу
    error.appendChild(текст)
    // добавление ошибки в наш элемент списка
    list.appendChild (ошибка)
}

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

Мы можем использовать эту функцию в нашей функции setList():

 function setList(results){
    Очистить список()
    for (const person of results){
        константный объект результата = document. createElement('li')
        resultItem.classList.add('результат-элемент')
        константный текст = document.createTextNode(person.name)
        resultItem.appendChild(текст)
        list.appendChild (элемент результата)
    }
    если (результаты.длина === 0 ){
        Нет результатов()
    }
}

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

Тестирование нашего кода

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

Зайдите в свой браузер… в терминале введите:

open index.html

Вот что я вижу… Я добавил заголовок и сделал небольшой стиль…

Случай № 1: Нет входных данных (пока)

Дело №2: Результаты!

Случай № 3: Нет совпадений результатов

Большое спасибо, что читаете и пишете вместе со мной. Надеюсь, вы узнали столько же, сколько и я, благодаря этому мини-JavaScript-проекту.

Пожалуйста, оставляйте комментарии, вопросы или предложения. Продолжаем учиться вместе.
💭💭💭💭💭💭💭💭💭💭💭💭💭💭💭

Система поиска исходного кода

Найдите любой буквенно-цифровой фрагмент, подпись или ключевое слово в коде веб-страниц HTML, JS и CSS.

Синтаксис запроса : RegEx, ccTLD и т. д. Идет поиск…

500 057 999 веб-страниц
10 марта 2023 г.

Идеальное решение для цифрового маркетинга и исследований партнерского маркетинга, PublicWWW позволяет вам выполнять поиск таким образом, то, что невозможно с другими обычными поисковыми системами:

Любой HTML, JavaScript, CSS и обычный текст в исходном коде веб-страницы
Ссылки на вопросы StackOverflow в HTML, .CSS и .JS-файлы
Веб-дизайнеры и разработчики, ненавидящие IE
Сайты с одинаковым идентификатором аналитики: «UA-19778070-»
Сайты, использующие следующую версию nginx: «Сервер: nginx/1. 4.7»
Пользователи рекламных сетей: «adserver.adtech.de»
Сайты, использующие одну и ту же учетную запись AdSense: «pub-9533414948433288»
WordPress с темой: «/wp-content/themes/twentysixteen/»
Найдите похожие веб-сайты с помощью уникальных общих HTML-кодов, т. е. виджетов и идентификаторов издателя
Идентифицировать сайты с помощью определенных изображений или значков
Узнайте, кто еще использует вашу тему
Определите сайты, на которых вас упоминают
Ссылки на использование библиотеки или платформы
Найдите примеры кода в Интернете
Выясните, кто какие JS-виджеты использует на своих сайтах.

Характеристики

До 1 000 000 результатов на поисковый запрос
API для разработчиков, которые хотят интегрировать наши данные
Загрузить результаты в виде файла CSV
Фрагменты результатов поиска
Результаты отсортированы по популярности веб-сайта
Поиск обычно выполняется в течение нескольких секунд
500 057 999 проиндексированных веб-страниц
HTTP-заголовки ответа веб-сервера также индексируются
Сайты из топ-1 000 000 открываются бесплатно
Результаты из топ-3 000 000 по факту регистрация, остальные платные.

Примеры использования

«angular.min.js»

«bootstrap.min.js»

«addThis_widget.js»

«Recaptcha/api.js»

«x-k-ekmamamifmifmifmi-trans»

«. «AlgoliaSearch»

hubspot

«Begin comScore Tag»

«Histats.com START»

«cmdatatagutils.js»

«api.convertkit.com»

«app.adjust.com»

Дополнительные примеры

Варианты использования

Статистика и исследования

Вы можете взаимодействовать с нашей статистикой, основанной на нашей веб-аналитике, а также получать помощь в поиске, использовании и понимании данных.

Javascript поиск на странице: Организация поиска по веб-странице на JavaScript (без jQuery) / Хабр

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

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

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

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

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

Создание простых данных

Установка прослушивателей событий

Отображение результатов на странице

Удаление результатов со страницы

Нет результатов

Тестирование нашего кода

Система поиска исходного кода

Характеристики

Примеры использования

Статистика и исследования

Добавить комментарий Отменить ответ

Рубрики

Рубрики