HTML DOM-документ querySelector()
Примеры
Получите первый элемент <p>:
document.querySelector("p");
Получите первый элемент с class="example":
document.querySelector(".example");
Ниже приведены дополнительные примеры.
Определение и использование
Метод querySelector()
возвращает первый элемент, соответствующий селектору CSS.
Чтобы вернуть все совпадения (не только первое), используйте querySelectorAll()
вместо этого метод .
Оба querySelector()
и querySelectorAll()
возвращают NodeList .
Оба querySelector()
и querySelectorAll()
выдают исключение SYNTAX_ERR, если селектор(ы) недействителен.
Учебники:
Учебное пособие по селекторам CSS
Учебник по списку узлов JavaScript
Методы селектора запросов:
Метод элемента querySelector()
Метод элемента querySelectorAll()
Метод Document querySelector()
Метод документа querySelectorAll()
Методы GetElement:
Метод документа getElementById()
HTML DOM NodeList/HTMLCollection
Различия между HTMLCollection и NodeList
NodeList и HTMLCollection — это похожие на массивы коллекции (списки) узлов (элементов), извлеченных из документа. Доступ к узлам можно получить по порядковым номерам. Индекс начинается с 0.
Оба объекта имеют свойство длины , которое возвращает количество элементов в списке.
HTMLCollection — это живая коллекция : если вы добавите элемент <li> в список в DOM, список в HTMLCollection также изменится.
NodeList — это статическая коллекция : если вы добавите элемент <li> в список в DOM, список в NodeList не изменится.
Методы getElementsByClassName()
и getElementsByTagName()
возвращают HTMLCollection.
Методы querySelector()
и querySelectorAll()
возвращают NodeList.
Синтаксис
document.querySelector(CSS selectors)
Параметры
Parameter | Description |
CSS selectors |
Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Возвращаемое значение
Тип | Описание |
Объект | NodeList с первым элементом, который соответствует селектору (селекторам) CSS. Если совпадений не найдено, null возвращается. |
Дополнительные примеры
Получите первый элемент <p> с class="example":
document.querySelector("p.example");
Измените текст элемента с id="demo":
document.querySelector("#demo").innerHTML = "Hello World!";
Выберите первый элемент <p> с родительским элементом <div>.
document.querySelector("div > p");
Выберите первый элемент <a> с атрибутом target:
document.querySelector("a[target]");
Выберите первый <h3> или первый <h4>:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
Выберите первый <h3> или первый <h4>:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
Поддержка браузера
document.querySelector()
является функцией DOM уровня 1 (1998 г.).
Он полностью поддерживается во всех браузерах:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |