Почему html документ не видит список

Поиск: getElement, querySelector

Свойства навигации по DOM хороши, когда элементы расположены рядом. А что, если нет? Как получить произвольный элемент страницы?

Для этого в DOM есть дополнительные методы поиска.

document.getElementById или просто id

Если у элемента есть атрибут id , то мы можем получить его вызовом document.getElementById(id) , где бы он ни находился.

Также есть глобальная переменная с именем, указанным в id :

…Но это только если мы не объявили в JavaScript переменную с таким же именем, иначе она будет иметь приоритет:

Пожалуйста, не используйте такие глобальные переменные для доступа к элементам

Это поведение соответствует стандарту, но поддерживается в основном для совместимости, как осколок далёкого прошлого.

Браузер пытается помочь нам, смешивая пространства имён JS и DOM. Это удобно для простых скриптов, которые находятся прямо в HTML, но, вообще говоря, не очень хорошо. Возможны конфликты имён. Кроме того, при чтении JS-кода, не видя HTML, непонятно, откуда берётся переменная.

В этом учебнике мы будем обращаться к элементам по id в примерах для краткости, когда очевидно, откуда берётся элемент.

В реальной жизни лучше использовать document.getElementById .

Значение id должно быть уникальным

Значение id должно быть уникальным. В документе может быть только один элемент с данным id .

Если в документе есть несколько элементов с одинаковым значением id , то поведение методов поиска непредсказуемо. Браузер может вернуть любой из них случайным образом. Поэтому, пожалуйста, придерживайтесь правила сохранения уникальности id .

Только document.getElementById , а не anyElem.getElementById

Метод getElementById можно вызвать только для объекта document . Он осуществляет поиск по id по всему документу.

querySelectorAll

Самый универсальный метод поиска – это elem.querySelectorAll(css) , он возвращает все элементы внутри elem , удовлетворяющие данному CSS-селектору.

Этот метод действительно мощный, потому что можно использовать любой CSS-селектор.

Псевдоклассы тоже работают

Псевдоклассы в CSS-селекторе, в частности :hover и :active , также поддерживаются. Например, document.querySelectorAll(‘:hover’) вернёт коллекцию (в порядке вложенности: от внешнего к внутреннему) из текущих элементов под курсором мыши.

querySelector

Метод elem.querySelector(css) возвращает первый элемент, соответствующий данному CSS-селектору.

Иначе говоря, результат такой же, как при вызове elem.querySelectorAll(css)[0] , но он сначала найдёт все элементы, а потом возьмёт первый, в то время как elem.querySelector найдёт только первый и остановится. Это быстрее, кроме того, его короче писать.

matches

Предыдущие методы искали по DOM.

Метод elem.matches(css) ничего не ищет, а проверяет, удовлетворяет ли elem CSS-селектору, и возвращает true или false .

Этот метод удобен, когда мы перебираем элементы (например, в массиве или в чём-то подобном) и пытаемся выбрать те из них, которые нас интересуют.

. .

closest

Предки элемента – родитель, родитель родителя, его родитель и так далее. Вместе они образуют цепочку иерархии от элемента до вершины.

Метод elem.closest(css) ищет ближайшего предка, который соответствует CSS-селектору. Сам элемент также включается в поиск.

Другими словами, метод closest поднимается вверх от элемента и проверяет каждого из родителей. Если он соответствует селектору, поиск прекращается. Метод возвращает либо предка, либо null , если такой элемент не найден.

getElementsBy*

Существуют также другие методы поиска элементов по тегу, классу и так далее.

На данный момент, они скорее исторические, так как querySelector более чем эффективен.

Здесь мы рассмотрим их для полноты картины, также вы можете встретить их в старом коде.

elem.getElementsByTagName(tag) ищет элементы с данным тегом и возвращает их коллекцию. Передав «*» вместо тега, можно получить всех потомков.
elem.getElementsByClassName(className) возвращает элементы, которые имеют данный CSS-класс.
document.getElementsByName(name) возвращает элементы с заданным атрибутом name . Очень редко используется.

// получить все элементы div в документе let divs = document.getElementsByTagName('div');

Давайте найдём все input в таблице:

 Ваш возраст:    младше 18  от 18 до 50  старше 60  
 
 let inputs = table.getElementsByTagName('input'); for (let input of inputs)

Не забываем про букву «s» !

Одна из самых частых ошибок начинающих разработчиков (впрочем, иногда и не только) – это забыть букву «s» . То есть пробовать вызывать метод getElementByTagName вместо getElementsByTagName .

Буква «s» отсутствует в названии метода getElementById , так как в данном случае возвращает один элемент. Но getElementsByTagName вернёт список элементов, поэтому «s» обязательна.

Возвращает коллекцию, а не элемент!

Другая распространённая ошибка – написать:

// не работает document.getElementsByTagName('input').value = 5;

Попытка присвоить значение коллекции, а не элементам внутри неё, не сработает.

Нужно перебрать коллекцию в цикле или получить элемент по номеру и уже ему присваивать значение, например, так:

// работает (если есть input) document.getElementsByTagName('input')[0].value = 5;

Ищем элементы с классом .article :

 Long article

Живые коллекции

Все методы «getElementsBy*» возвращают живую коллекцию. Такие коллекции всегда отражают текущее состояние документа и автоматически обновляются при его изменении.

В приведённом ниже примере есть два скрипта.

Первый создаёт ссылку на коллекцию . На этот момент её длина равна 1 .
Второй скрипт запускается после того, как браузер встречает ещё один , теперь её длина – 2 .

First div
  Second div

Напротив, querySelectorAll возвращает статическую коллекцию. Это похоже на фиксированный массив элементов.

Если мы будем использовать его в примере выше, то оба скрипта вернут длину коллекции, равную 1 :

First div
  Second div

Теперь мы легко видим разницу. Длина статической коллекции не изменилась после появления нового div в документе.

Итого

Есть 6 основных методов поиска элементов в DOM:

Метод	Ищет по.	Ищет внутри элемента?	Возвращает живую коллекцию?
querySelector	CSS-selector	✔	—
querySelectorAll	CSS-selector	✔	—
getElementById	id	—	—
getElementsByName	name	—	✔
getElementsByTagName	tag or ‘*’	✔	✔
getElementsByClassName	class	✔	✔

Безусловно, наиболее часто используемыми в настоящее время являются методы querySelector и querySelectorAll , но и методы getElement(s)By* могут быть полезны в отдельных случаях, а также встречаются в старом коде.

Есть метод elem.matches(css) , который проверяет, удовлетворяет ли элемент CSS-селектору.
Метод elem.closest(css) ищет ближайшего по иерархии предка, соответствующему данному CSS-селектору. Сам элемент также включён в поиск.

И, напоследок, давайте упомянем ещё один метод, который проверяет наличие отношений между предком и потомком:

elemA.contains(elemB) вернёт true , если elemB находится внутри elemA ( elemB потомок elemA ) или когда elemA==elemB .

Задачи

Поиск элементов

важность: 4

Вот документ с таблицей и формой.

Таблицу с id=»age-table» .
Все элементы label внутри этой таблицы (их три).
Первый td в этой таблице (со словом «Age»).
Форму form с именем name=»search» .
Первый input в этой форме.
Последний input в этой форме.

Откройте страницу table.html в отдельном окне и используйте для этого браузерные инструменты разработчика.

Есть много путей как это сделать.

// 1. Таблица с `id="age-table"`. let table = document.getElementById('age-table') // 2. Все label в этой таблице table.getElementsByTagName('label') // или document.querySelectorAll('#age-table label') // 3. Первый td в этой таблице table.rows[0].cells[0] // или table.getElementsByTagName('td')[0] // или table.querySelector('td') // 4. Форма с name="search" // предполагаем, что есть только один элемент с таким name в документе let form = document.getElementsByName('search')[0] // или, именно форма: document.querySelector('form[name="search"]') // 5. Первый input в этой форме form.getElementsByTagName('input')[0] // или form.querySelector('input') // 6. Последний input в этой форме let inputs = form.querySelectorAll('input') // найти все input inputs[inputs.length-1] // взять последний

HTML не видит файл CSS

Всем привет! Друзья, очень нужна помощь. Я начинающий программист , только изучаю всё. Решил создать свой первый сайт. Попробовать, так сказать. Вот пишу код и понимаю , что ничего не происходит на сайте, тупо не подключается файл css к html. Решил заново написать путь , но снова ничего , даже менял местами файлы, клал в одну папку и т.д. Но , к сожалению, ничего. Проверьте пожалуйста, может я что-то не правильно всё таки сделал? Вот скрин: Вложение 945551
Очень буду благодарен за ответ!)

Скрин папок, где находятся файлы:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

 html lang="rus"> head> meta charset="UTF-8"> title>Киномостр/title> meta name="description" content="Киномостр- это портал о кино и сериалах"> meta name="keywords" content="Кино;сериалы;Киномостр;kinomonst> link rel="stylesheet" href="style.css"> /head> body> div class="main"> div class="header"> div class="logo"> div class="logo_text"> h1>a href="/">Киномонстрa>/h1> h2>Кино-наша страсть/h2> /div> /div> /div> /div> /body> /html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

*{ margin: 0; padding: 0; } .header { width: 100% ; height: 180px ; background-color: #7b1fa2 ; font-size: 0.7em ; } .logo, .logo_text, .menubar { margin-left: auto ; margin-right: auto ; } .logo_text{ padding-left: 15%; padding-top: 25px; }

html файл не видит css документа ну или просто не читает его [закрыт]

Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.

Закрыт 3 года назад .

html code css code Пробовал перекидывать из папки с русскими символами в папку без

HTML шаблон не видит CSS файл в PyCharm, что делать?

Такая вот ситуация сложилась, решил я взять пример сайта на Bootstrap’е, взял оттуда пример с названием Cover. Скачал по этой ссылке .zip файл, достал оттуда папку assets и cover. В assets хранились все нужные файлы, а в cover сам HTML шаблон и CSS файл. Перекинул эти две папки в новую отдельную папку на рабочем столе, ну и вижу что HTML файл можно открыть в хроме, что я и сделал. Увидел то, что и предполагал увидеть: тот же сайт, всё правильно. Идём дальше, захожу в PyCharm, прошу заметить, именно Community Edition v2019.3, где у меня в проекте есть django, и его приложение. Я перенес папку с рабочего стола в папку рабочей среды templates/main, сделал так чтобы на главной странице появлялся index.html, и ожидал увидеть, что опять откроется тот сайт, код которого я брал с бутстрапа, но нет. Там был текст, думаю, в чём проблема. Смотрю, а он не видит css файл, хотя до этого видел, когда был на рабочем столе. Почему в PyCharm не видит — а когда открываю HTML шаблон в браузере всё работает корректно?

Вопрос задан более трёх лет назад
1355 просмотров

Комментировать
Решения вопроса 2

Mi11er

А пути то верно указаны ?
Static файлы подключены ?
Настройки сделаны ?

Слшком много вопросов и так мало инфы =)

Ответ написан более трёх лет назад
megared @megared Автор вопроса

Пути указаны верно. Статик подключен, хотя не до конца понимаю как с ним работать. Попробую поковырять что-то.