Javascript метод document.queryselectorall()

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:

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;
}

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

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

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

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

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

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

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

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

С этим читают

• Parentnode
• Background-size
• Width
• Background-color
• Advanced & beautiful html5 / javascript color picker
• Свойство content
• :first-child
• Element.innerhtml
• Rowspans & colspans in css tables
• Начинаем работать с css функцией calc()