dir.by  
  Поиск  
Программирование, разработка, тестирование
Html & CSS
document.querySelector(...) это JavaScript метод для поиска элемента из document (то есть во всем HTML)
  Посмотрели 3209 раз(а)    
 document.querySelector(...) это JavaScript метод для поиска элемента из document (то есть во всем HTML) 
последнее обновление: 28 марта 2021
  JavaScript  
var elem = document.querySelector("критерий поиска элемента или другими словами selector");
Вот какой критерий поиска (селектор) бывает: https://www.w3.org/TR/selectors
Пример 1 (ищем элемент по id)
  Html  
<div id="myhome">Hello</div>

<script>
     // ищем элемент по id
     var elem = document.querySelector("#myhome");
     // elem = <div id="myhome">Hello</div>

     alert(elem.id);
     // увидим на экране "myhome"
</script>
Пример 2 (ищем элемент по названию класса)
  Html  
<div class="bluetext">Good evening</div>

<script>
     var elem = document.querySelector(".bluetext");
     // elem = <div class="bluetext">Good evening</div>

     alert(elem.className);
     // увидим на экране "Good evening"
</script>
Пример 3 (сложный селектор т.е. ищем элемент внутри элемента по названию класса и другим параметрам)
  Html  
<div class="user-panel main">
     <input name="login"/>
</div>

<script>
     var elem = document.querySelector("div.user-panel.main input[name=login]");
     // elem = <input name="login"/>

     alert(elem.name);
     // увидим на экране "login"
</script>
Объяснение!
Селектор "div.user-panel.main input[name=login]"
означает что ищем:
Шаг 1
div.user-panel.main
ищем элемент div с классами user-panel и main
Шаг 2
пробел
еще ищем
Шаг 3
input[name=login]
элемент input с атрибутом name = "login"
 
← Предыдущая тема
style="border" В HTML
 
Следующая тема →
yourElement.querySelectorAll(...) это JavaScript метод для поиска элементов внутри другого HTML элемента
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)

  Объявления  
  Объявления  
 
HTML элементы
HTML тег <a> ссылка для перехода на другую страницу
HTML тег <abbr> показывает сокращенное название, если подвести мышку будет всплывающая надпись
HTML теги fieldset и legend. Это рамка с заголовком
HTML тег <!-- --> комментарий
style="border" В HTML

HTML поиск элемента, элементов
document.querySelector(...) это JavaScript метод для поиска элемента из document (то есть во всем HTML)
yourElement.querySelectorAll(...) это JavaScript метод для поиска элементов внутри другого HTML элемента

HTML svg (векторная графика для рисования линий, прямоугольников, эллипсов, ...)
<svg> векторная графика, рисуем линию<line>, прямоугольник <rect>, круг<circle>, текст<text>

HTML canvas (рисование картинок, текста, фигур)
HTML <canvas> рисуем прямоугольник
HTML <canvas> рисуем линии по нажатию мышкой на Canvas
HTML <canvas> рисуем картинки
HTML <canvas> рисуем картинку с поворотом
HTML <canvas> рисуем картинку с горизонтальным отражением
HTML <canvas> рисуем картинку и текст
HTML <canvas> рисуем картинку много раз в прямоугольнике (шаблон)
HTML <canvas> как получить координаты мыши ? Определяем позицию мыши.
HTML <canvas> рисуем змею линиями moveTo, lineTo
CSS
CSS описание
После изменения файла css , в браузере раз за разом отображаются старые стили. Почему?
Книги для изучения CSS
CSS flex (элемент может растягиваться или сжиматься и таким образом заполнять свободное пространство)
Что такое CSS flex
Freeze
Шапка в таблице всегда видна при скролинге | freeze header in table | HTML
Div всегда виден при скролинге (position:fixed, position:sticky) | freeze div | HTML
Делаем Popup используя HTML и Javascript
Как сделать Popup окно в HTML странице | Javascript, HTML, CSS
Движение и анимация картинок
Анимация человечка на месте. Используем HTML элемент <div>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
Анимация человечка в движении (sprite). Используем HTML элементы <div>, <img>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
Рисуем картинку с движением. Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval
Рисуем картинку с движением и анимацией (sprite). Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval
Web страница на телефоне
Открываю web страницу на телефоне в Google Chrome. Почему при двойном нажатии размер страницы увеличивается?
Верстка, дизайн страницы
Что такое Front-end разработка?
Как определить устройство (планшет, компьютер, телефон) сейчас используется в JavaScript, HTML
Как сделать чтобы ваш сайт работал на телефоне, планшете, компьютере используем css media и max-device-width и min-device-width | HTML | CSS
Как сделать чтобы ваш сайт соответствовал по размерам на телефоне, планшете ? (HTML meta с атрибутом name='viewport')
Правильная верстка HTML. Плохо использовать table. Нужно использовать div
Что такое Adaptive design (адаптивный дизайн)? Что такое Responsive design (отзывчивый дизайн) ?
Меняем цвет scrollbar (полосы прокрутки) для HTML страницы. Используем CSS
WWW сайты для изучения
Сайты для изучения HTML

  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика