- Поиск: getElement*, querySelector*
- document.getElementById или просто id
- querySelectorAll
- querySelector
- matches
- closest
- getElementsBy*
- Живые коллекции
- Итого
- Задачи
- Поиск элементов
- How to find index of an object by key and value in an javascript array
- 8 Answers 8
- The Functional Approach
- Update
- The (Old) Functional Approach
- TL;DR
- Explanation
- Demo:
Поиск: 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 .
Метод 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 в таблице:
Ваш возраст:
let inputs = table.getElementsByTagName('input'); for (let input of inputs)
Одна из самых частых ошибок начинающих разработчиков (впрочем, иногда и не только) – это забыть букву «s» . То есть пробовать вызывать метод getElementByTagName вместо getElementsByTagName .
Буква «s» отсутствует в названии метода getElementById , так как в данном случае возвращает один элемент. Но getElementsByTagName вернёт список элементов, поэтому «s» обязательна.
Другая распространённая ошибка – написать:
// не работает document.getElementsByTagName('input').value = 5;
Попытка присвоить значение коллекции, а не элементам внутри неё, не сработает.
Нужно перебрать коллекцию в цикле или получить элемент по номеру и уже ему присваивать значение, например, так:
// работает (если есть input) document.getElementsByTagName('input')[0].value = 5;
Ищем элементы с классом .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 .
Задачи
Поиск элементов
Вот документ с таблицей и формой.
- Таблицу с 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] // взять последний
How to find index of an object by key and value in an javascript array
Wanted: Index of object where attr === value for example attr1 === «john» or attr2 === «hummus» Update: Please, read my question carefully, i do not want to find the object via $.inArray nor i want to get the value of a specific object attribute. Please consider this for your answers. Thanks!
yes, same use case, but i find my question to be more generic eg better hit rate if you do not have a key named «id» you are searching for.
@FelixKling I don’t think this is a duplicate because it’s trying to get the index as opposed to the object (the question you point to didn’t solve my problem but this one did).
8 Answers 8
The Functional Approach
All the cool kids are doing functional programming (hello React users) these days so I thought I would give the functional solution. In my view it’s actually a lot nicer than the imperatival for and each loops that have been proposed thus far and with ES6 syntax it is quite elegant.
Update
There’s now a great way of doing this called findIndex which takes a function that return true / false based on whether the array element matches (as always, check for browser compatibility though).
var index = peoples.findIndex(function(person) < return person.attr1 == "john" >);
With ES6 syntax you get to write this:
var index = peoples.findIndex(p => p.attr1 == "john");
The (Old) Functional Approach
TL;DR
If you’re looking for index where peoples[index].attr1 == «john» use:
var index = peoples.map(function(o) < return o.attr1; >).indexOf("john");
Explanation
Use .map() to get an array of values given a particular key:
var values = object_array.map(function(o) < return o.your_key; >);
The line above takes you from here:
var values = [ "bob", "john", "larry" ];
Now we just use .indexOf() to find the index of the key we want (which is, of course, also the index of the object we’re looking for):
var index = values.indexOf(your_value);
We combine all of the above:
var index = peoples.map(function(o) < return o.attr1; >).indexOf("john");
Or, if you prefer ES6 syntax:
var index = peoples.map((o) => o.attr1).indexOf("john");
Demo:
var peoples = [ < "attr1": "bob", "attr2": "pizza" >, < "attr1": "john", "attr2": "sushi" >, < "attr1": "larry", "attr2": "hummus" >]; var index = peoples.map(function(o) < return o.attr1; >).indexOf("john"); console.log("index of 'john': " + index); var index = peoples.map((o) => o.attr1).indexOf("larry"); console.log("index of 'larry': " + index); var index = peoples.map(function(o) < return o.attr1; >).indexOf("fred"); console.log("index of 'fred': " + index); var index = peoples.map((o) => o.attr2).indexOf("pizza"); console.log("index of 'pizza' in 'attr2': " + index);
now let’s suppose you wanted to know the index of pizza within the line < "attr1": "bob", "attr2": "pizza" >, that is «1», how would you do that? Or, given the value «pizza» you wanted to know which is the corresponding property name (i.e.: attr2), given that we are in line 0, how would you do that?
If you want to check on the object itself without interfering with the prototype, use hasOwnProperty() :
var getIndexIfObjWithOwnAttr = function(array, attr, value) < for(var i = 0; i < array.length; i++) < if(array[i].hasOwnProperty(attr) && array[i][attr] === value) < return i; >> return -1; >
to also include prototype attributes, use:
var getIndexIfObjWithAttr = function(array, attr, value) < for(var i = 0; i < array.length; i++) < if(array[i][attr] === value) < return i; >> return -1; >
i suggest adding ‘return -1’ after the ‘for’ loop, in case the element wasn’t found (similar to javascript’s ‘indexOf’ or jquery’s ‘$.inArray’)
Using jQuery .each()
var peoples = [ < "attr1": "bob", "attr2": "pizza" >, < "attr1": "john", "attr2": "sushi" >, < "attr1": "larry", "attr2": "hummus" >]; $.each(peoples, function(index, obj) < $.each(obj, function(attr, value) < console.log( attr + ' == ' + value ); >); >);
var peoples = [ < "attr1": "bob", "attr2": "pizza" >, < "attr1": "john", "attr2": "sushi" >, < "attr1": "larry", "attr2": "hummus" >]; for (var i = 0; i < peoples.length; i++) < for (var key in peoples[i]) < console.log(key + ' == ' + peoples[i]Javascript поиск элемента объекта); >>
Not a direct answer to your question, though I thing it’s worth mentioning it, because your question seems like fitting in the general case of «getting things by name in a key-value storage».
If you are not tight to the way «peoples» is implemented, a more JavaScript-ish way of getting the right guy might be :
var peoples = < "bob": < "dinner": "pizza" >, "john": < "dinner": "sushi" >, "larry" < "dinner": "hummus" >>; // If people is implemented this way, then // you can get values from their name, like : var theGuy = peoples["john"]; // You can event get directly to the values var thatGuysPrefferedDinner = peoples["john"].dinner;
Hope if this is not the answer you wanted, it might help people interested in that «key/value» question.