Когда дело доходит до использования Javascript для управления DOM, вы часто обнаруживаете, что хотите манипулировать элементами HTML. Но для этого сначала нужно найти элементы! В этом блоге вы узнаете, как это сделать.

Найти элемент по идентификатору

Метод документа getElementById () возвращает объект Element, представляющий элемент, свойство id которого соответствует указанной строке. Поскольку идентификаторы элементов должны быть уникальными, если они указаны, они являются полезным способом быстрого доступа к определенному элементу.

Найти элемент по имени

Метод getElementsByName () возвращает коллекцию всех элементов в документе с указанным именем (значение атрибута name) в виде объекта HTMLCollection.

Найти элемент по имени тега

Метод getElementsByTagName () возвращает активную HTMLCollection элементов с заданным именем тега. Ищутся все потомки указанного элемента, но не сам элемент. Возвращенный список является активным, что означает, что он автоматически обновляется вместе с деревом DOM. Следовательно, нет необходимости повторно вызывать Element.getElementsByTagName () с одним и тем же элементом и аргументами, если DOM изменяется между вызовами.

Найти элемент по имени класса

Метод getElementsByClassName интерфейса Document возвращает объект, подобный массиву, всех дочерних элементов, которые имеют все указанные имена классов. При вызове объекта документа выполняется поиск всего документа, включая корневой узел. Вы также можете вызвать getElementsByClassName () для любого элемента; он вернет только элементы, которые являются потомками указанного корневого элемента с указанным именем (именами) класса.

Найти элемент с помощью селектора CSS

Метод Document querySelector () возвращает первый элемент в документе, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращается null. querySelector () более полезен, когда вы хотите использовать более сложные селекторы.

Важно отметить, что querySelector () возвращает первый элемент в документе, который соответствует указанному селектору. Если вы хотите выбрать все элементы, соответствующие указанному селектору, вы должны использовать querySelectorAll ()