Содержание
elem.querySelector(query), elem.querySelectorAll(query)
Чтобы найти элементы, удовлетворяющие поисковому запросу, браузер не использует никаких сложных структур данных.
Он просто перебирает все подэлементы внутри элемента (или по всему документу, если вызов в контексте документа) и проверяет каждый элемент на соответствие запросу .
Вызов прекращает перебор после первого же найденного элемента, а собирает найденные элементы в «псевдомассив»: внутреннюю структуру данных, по сути аналогичную массиву JavaScript.
Этот перебор происходит очень быстро, так как осуществляется непосредственно движком браузера, а не JavaScript-кодом.
Оптимизации:
- В случае поиска по ID: , большинство браузеров оптимизируют поиск, используя вызов .
- Последние результаты поиска сохраняются в кеше. Но это до тех пор, пока документ как-нибудь не изменится.
More Examples
Example
Get all <p> elements inside a <div> element, and set the background color of the first <p> element (index 0):
// Get the element with id=»myDIV» (a div), then get all p elements inside divvar x = document.getElementById(«myDIV»).querySelectorAll(«p»); // Set the background color of the first <p> element (index 0) in div x.style.backgroundColor = «red»;
Example
Get all <p> elements in a <div> with class=»example», and set the background of the first <p> element:
// Get the element with id=»myDIV» (a div), then get all p elements with class=»example» inside divvar x = document.getElementById(«myDIV»).querySelectorAll(«p.example»); // Set the background color of the first <p> element with class=»example» (index 0) in div x.style.backgroundColor = «red»;
Example
Find out how many elements with class=»example» there are in a <div> element (using the length property of the NodeList object):
/* Get the element with id=»myDIV» (a div), then get all p elements with class=»example» inside div, and return the number of elements found */var x = document.getElementById(«myDIV»).querySelectorAll(«.example»).length;
Example
Set the background color of all elements with class=»example» in a <div> element:
// Get the element with id=»myDIV» (a div), then get all elements with class=»example» inside divvar x = document.getElementById(«myDIV»).querySelectorAll(«.example»);// Create a for loop and set the background color of all elements with class=»example» in divvar i;for (i = 0; i < x.length; i++) { x.style.backgroundColor = «red»;}
Example
Set the background color of all <p> elements in a <div> element:
// Get the element with id=»myDIV» (a div), then get all p elements inside divvar x = document.getElementById(«myDIV»).querySelectorAll(«p»);// Create a for loop and set the background color of all p elements in divvar i;for (i = 0; i < x.length; i++) { x.style.backgroundColor = «red»;}
Example
Set the border style of all <a> elements in a <div> element that have a «target» attribute:
// Get the element with id=»myDIV» (a div), then get all <a> elements with a «target» attribute inside divvar x = document.getElementById(«myDIV»).querySelectorAll(«a»);// Create a for loop and set the border of all <a> elements with a target attribute in divvar i;for (i = 0; i < x.length; i++) { x.style.border = «10px solid red»;}
Example
Set the background color of all <h2>, <div> and <span> elements in a <div> element:
// Get the element with id=»myDIV» (a div), then get all <h2>, <div> and <span> elements inside <div>var x = document.getElementById(«myDIV»).querySelectorAll(«h2, div, span»);// Create a for loop and set the background color of all <h2>, <div> and <span> elements in <div>var i;for (i = 0; i < x.length; i++) { x.style.backgroundColor = «red»;}
Трюки
Итак, а с чем же его можно есть?
Если Вы осуществляете траверс по селектору без использования и других специфичных для jQ псевдоклассов, можно использовать
$(document.querySelectorAll("#myDiv p"))
вместо
$("#myDiv p")
На обертывание staticNodeList в объект jQuery, конечно, уйдет какое-то время, но, в целом, такой код выполнится быстрее.
При помощи qSA можно достаточно просто определить, наведен ли курсор на элемент. Пример (Opera, Safari, Chrome):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> .samplediv { border: dashed red 1px; margin: 30px; } .samplediv #hovered {display: none} .samplediv:hover #hovered {display: inline} .samplediv:hover #nothovered {display: none} </style> </head> <body> <div class="samplediv" id="test"> <p>Javascript: <span id="status">I am not hovered</span></p> <p>Css: <span id="nothovered">I am not hovered</span><span id="hovered">I am hovered</span></p> </div> <script type="text/javascript"> function isHovered(o){return (o.parentNode && o.parentNode.querySelector(":hover") == o);} document.getElementById("test").addEventListener('mouseover', function(){ if (isHovered(this)) document.getElementById("status").innerHTML = "I am hovered"; }, false); document.getElementById("test").addEventListener('mouseout', function(){ if (!isHovered(this)) document.getElementById("status").innerHTML = "I am not hovered"; }, false); </script> </body> </html>
В Firefox 3.6 статус так и останется залипшим на «hovered». Это связано с тем, что в этом замечательном браузере на момент css-стиль еще не обновился. При этом на работает отлично. Т.е, выходит, что Firefox обновляет css между и . По-моему, это нелогично и неправильно. Разработчики Firefox, поправьте это, пожалуйста!
Но вернемся к функции . Работает она на одном достаточно простом предположении: если у родителя элемента есть элементы, на которые наведен курсор, и один из этих элементов (нулевой в массиве, траверс начинается с непсредственных детей) — сам исходный элемент, то на исходный элемент наведен курсор.
У родитель — , соответственно, код тоже работает. У же родителя нет, но и hover для него бессмысленнен.
Как Вы уже, наверное, догадались, таким же нехитрым способом можно определить, а какой же инпут имеет фокус сразу при загрузке страницы.
document.querySelector(":focus")
Получить данные с помощью querySelector через -> id
idid
Создадим тег с уникальным ид:
<div id=id_div>Здесь див с уникальным id_div</div> Взаимодействия querySelector и id<button id=id_button>получи данные из id с помощью querySelector </button>
И собственно далее… нам нужен скрипт, который все это смоежт выполнить!? А что именно выполнить!?
querySelector-а
<script>
id_button.onclick = function(){alert(document.querySelector(«#id_div»).innerHTML);};
</script>
Соберем весь код вместе, как с помощью querySelector-а взаимодействовать с селектором:
<div id=id_div>Здесь див с уникальным id_div</div>
<button id=id_button>получи данные из id с помощью querySelector </button>
<script>
id_button.onclick = function(){alert(document.querySelector(«#id_div»).innerHTML);};
</script>
Summary
There are 6 main methods to search for nodes in DOM:
Method | Searches by… | Can call on an element? | Live? |
CSS-selector | — | ||
CSS-selector | — | ||
— | — | ||
— | |||
tag or | |||
class |
By far the most used are and , but can be sporadically helpful or found in the old scripts.
Besides that:
- There is to check if matches the given CSS selector.
- There is to look for the nearest ancestor that matches the given CSS-selector. The itself is also checked.
And let’s mention one more method here to check for the child-parent relationship, as it’s sometimes useful:
elemA.contains(elemB) returns true if elemB is inside elemA (a descendant of elemA) or when elemA==elemB.
Полифилл #1 (рекурсивный метод)
Для браузеров не поддерживающих Element.closest(), но позволяющих использовать element.matches() (или префиксный эквивалент) есть полифилл:
(function(ELEMENT) { ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector; ELEMENT.closest = ELEMENT.closest || function closest(selector) { if (!this) return null; if (this.matches(selector)) return this; if (!this.parentElement) {return null} else return this.parentElement.closest(selector) }; }(Element.prototype));
Что же это такое?
Наверняка, Вы знакомы с jQuery. И наверняка знаете про функцию , возвращающую элементы, соответствующие css-селектору (в ранних версиях можно было еще использовать XPath, но потом от него отказались).
Так вот, делает то же самое, но нативными средствами браузера.
Этот метод есть у всех элементов и документа. В случае, если метод вызывается у элемента, поиск по селетору производится среди всех элементов, вложенных в него.
Тектовые ноды, комментарии, CDATA-секции выбрать этим методом нельзя, только элементы.
Поддерживается всеми современными браузерами, Internet Explorer — начиная с версии 8.
Так вот, почти то же самое, что и , но возвращает только один (первый попавшийся) элемент, либо Null.
例子
获取匹配列表
要获取文档中所有元素的。
var matches = document.querySelectorAll("p");
此示例返回文档中所有元素的列表,其中class包含»»或»»:
var matches = document.querySelectorAll("div.note, div.alert");
var container = document.querySelector("#test"); var matches = container.querySelectorAll("div.highlighted > p");
var matches = document.querySelectorAll("iframe");
这里,属性选择器用于返回ID为的列表中包含值为的属性的元素
var container = document.querySelector("#userlist"); var matches = container.querySelectorAll("li");
访问匹配项
一旦返回匹配元素的,就可以像任何数组一样检查它。 如果数组为空(即,其属性为0),则找不到匹配项。
否则,您只需使用标准数组方法来访问列表的内容。 您可以使用任何常见的循环语句,例如:
var highlightedItems = userList.querySelectorAll(".highlighted"); highlightedItems.forEach(function(userItem) { deleteUser(userItem); });
Пример
Элементы в , можно обработать следующим образом:
for (var i = 0; i < myNodeList.length; ++i) { var item = myNodeList; // Вызов myNodeList.item(i) необязателен в JavaScript }
Не следует использовать конструкции или для перечисления элементов списка. Эти способы также перечислят и свойства и , что приведёт к логическим ошибкам в случае, если скрипт ожидает только объекты . Также может перечислять свойства в любом порядке.
Циклы корректно перечисляют все объекты внутри в браузерах, в которых поддерживается (например, Firefox 13 или выше):
var list = document.querySelectorAll( 'input' ); for (var item of list) { item.checked = true; }
Живые коллекции
Все методы возвращают живую коллекцию. Такие коллекции всегда отражают текущее состояние документа и автоматически обновляются при его изменении.
В приведённом ниже примере есть два скрипта.
- Первый создаёт ссылку на коллекцию . На этот момент её длина равна .
- Второй скрипт запускается после того, как браузер встречает ещё один , теперь её длина – .
Напротив, возвращает статическую коллекцию. Это похоже на фиксированный массив элементов.
Если мы будем использовать его в примере выше, то оба скрипта вернут длину коллекции, равную :
Теперь мы легко видим разницу. Длина статической коллекции не изменилась после появления нового в документе.
CSS Properties
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index
浏览器兼容性
The compatibility table on this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 8 | Opera Full support 10 | Safari Full support 3.2 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 3 | Samsung Internet Android Full support 1.0 |
С этим читают