Просмотр всех элементов html

JavaScript HTML DOM Элементы

На этой странице вы узнаете, как находить элементы HTML на странице HTML и обращаться к ним.

Поиск элементов HTML

Часто с помощью JavaScript вы хотите манипулировать элементами HTML.

Для этого вам нужно сначала найти элементы. Есть несколько способов сделать это:

• Поиск элементов HTML по идентификатору
• Поиск элементов HTML по имени тега
• Поиск элементов HTML по имени класса
• Поиск элементов HTML с помощью селекторов CSS
• Поиск элементов HTML по коллекциям объектов HTML

Поиск элемента HTML по идентификатору

Самый простой способ найти HTML элемент в DOM — использовать идентификатор элемента.

В этом примере выполняется поиск элемента с id=»intro» :

Пример

Если элемент найден, метод вернет элемент как объект (в myElement).

Если элемент не найден, myElement будет содержать null .

Поиск элементов HTML по имени тега

Этот пример находит все элементы

:

Пример

Этот пример находит элемент с id=»main» , а затем находит все

элементы внутри «main» :

Пример

Поиск элементов HTML по имени класса

Если вы хотите найти все элементы HTML с одинаковым именем класса, используйте getElementsByClassName() .

В этом примере возвращается список всех элементов с class=»intro» .

Пример

Поиск элементов по имени класса не работает в Internet Explorer 8 и более ранних версиях.

Поиск элементов HTML с помощью селекторов CSS

Если вы хотите найти все элементы HTML, соответствующие указанному селектору CSS (идентификатор, имена классов, типы, атрибуты, значения атрибутов и т.д.), используйте этот метод querySelectorAll() method.

В этом примере возвращается список всех

элементов с class=»intro» .

Пример

Этот querySelectorAll() метод не работает в Internet Explorer 8 и более ранних версиях.

Поиск HTML элементов по коллекциям HTML объектов

В этом примере выполняется поиск элемента формы с id=»frm1″ , в коллекции форм и отображение всех значений элементов:

Пример

var x = document.forms[«frm1»];
var text = «»;
var i;
for (i = 0; i < x.length; i++) text += x.elements[i].value + "
«;
>
document.getElementById(«demo»).innerHTML = text;

Также доступны следующие HTML объекты (и коллекции объектов):

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

JavaScript | Как получить список каких-либо HTML-элементов из документа?

Объектная модель документа (DOM) имеет интерфейс Document . В интерфейсе Document есть метод getElementsByTagName() , который позволяет получать объекты HTMLCollection — нужные нам списки элементов. Причём элементы коллекции тянут за собой всех потомков. Забор осуществляется в древовидном порядке, т. е. в том порядке, в котором они встречаются в разметке документа сверху вниз. Они никак не отфильтрованы и никак не структурированы.

На этой странице перечислены все возможные вариации получения каких-либо коллекций HTML-элементов из документа. Элементы пространства имён HTML упорядочены и идут в алфавитном порядке. Так сделано для простоты нахождения нужной комбинации кода.

Всего насчитывается 114 имён элементов HTML (2020 год): (кликай на нужный элемент, чтобы посмотреть JavaScript код)

Как получить все элементы a?

document.getElementsByTagName("a")

Как получить все элементы abbr?

document.getElementsByTagName("abbr")

Как получить все элементы address?

document.getElementsByTagName("address")

Как получить все элементы area?

document.getElementsByTagName("area")

Как получить все элементы article?

document.getElementsByTagName("article")

Как получить все элементы aside?

document.getElementsByTagName("aside")

Как получить все элементы audio?

document.getElementsByTagName("audio")

Как получить все элементы b?

document.getElementsByTagName("b")

Как получить все элементы base?

document.getElementsByTagName("base")

Как получить все элементы bdi?

document.getElementsByTagName("bdi")

Как получить все элементы bdo?

document.getElementsByTagName("bdo")

Как получить все элементы blockquote?

document.getElementsByTagName("blockquote")

Как получить все элементы body?

document.getElementsByTagName("body")

Как получить все элементы br?

document.getElementsByTagName("br")

Как получить все элементы button?

document.getElementsByTagName("button")

Как получить все элементы canvas?

document.getElementsByTagName("canvas")

Как получить все элементы caption?

document.getElementsByTagName("caption")

Как получить все элементы cite?

document.getElementsByTagName("cite")

Как получить все элементы code?

document.getElementsByTagName("code")

Как получить все элементы col?

document.getElementsByTagName("col")

Как получить все элементы colgroup?

document.getElementsByTagName("colgroup")

Как получить все элементы data?

document.getElementsByTagName("data")

Как получить все элементы datalist?

document.getElementsByTagName("datalist")

Как получить все элементы dd?

document.getElementsByTagName("dd")

Как получить все элементы del?

document.getElementsByTagName("del")

Как получить все элементы details?

document.getElementsByTagName("details")

Как получить все элементы dfn?

document.getElementsByTagName("dfn")

Как получить все элементы dialog?

document.getElementsByTagName("dialog")

Как получить все элементы div?

document.getElementsByTagName("div")

Как получить все элементы dl?

document.getElementsByTagName("dl")

Как получить все элементы dt?

document.getElementsByTagName("dt")

Как получить все элементы em?

document.getElementsByTagName("em")

Как получить все элементы embed?

document.getElementsByTagName("embed")

Как получить все элементы fieldset?

document.getElementsByTagName("fieldset")

Как получить все элементы figcaption?

document.getElementsByTagName("figcaption")

Как получить все элементы figure?

document.getElementsByTagName("figure")

Как получить все элементы footer?

document.getElementsByTagName("footer")

Как получить все элементы form?

document.getElementsByTagName("form")

Как получить все элементы h1?

document.getElementsByTagName("h1")

Как получить все элементы h2?

document.getElementsByTagName("h2")

Как получить все элементы h3?

document.getElementsByTagName("h3")

Как получить все элементы h4?

document.getElementsByTagName("h4")

Как получить все элементы h5?

document.getElementsByTagName("h5")

Как получить все элементы h6?

document.getElementsByTagName("h6")

Как получить все элементы head?

document.getElementsByTagName("head")

Как получить все элементы header?

document.getElementsByTagName("header")

Как получить все элементы hgroup?

document.getElementsByTagName("hgroup")

Как получить все элементы hr?

document.getElementsByTagName("hr")

Как получить все элементы html?

document.getElementsByTagName("html")

Как получить все элементы i?

document.getElementsByTagName("i")

Как получить все элементы iframe?

document.getElementsByTagName("iframe")

Как получить все элементы img?

document.getElementsByTagName("img")

Как получить все элементы input?

document.getElementsByTagName("input")

Как получить все элементы ins?

document.getElementsByTagName("ins")

Как получить все элементы kbd?

document.getElementsByTagName("kbd")

Как получить все элементы label?

document.getElementsByTagName("label")

Как получить все элементы legend?

document.getElementsByTagName("legend")

Как получить все элементы li?

document.getElementsByTagName("li")

Как получить все элементы link?

document.getElementsByTagName("link")

Как получить все элементы main?

document.getElementsByTagName("main")

Как получить все элементы map?

document.getElementsByTagName("map")

Как получить все элементы mark?

document.getElementsByTagName("mark")

Как получить все элементы math?

document.getElementsByTagName("math")

Как получить все элементы menu?

document.getElementsByTagName("menu")

Как получить все элементы meta?

document.getElementsByTagName("meta")

Как получить все элементы meter?

document.getElementsByTagName("meter")

Как получить все элементы nav?

document.getElementsByTagName("nav")

Как получить все элементы noscript?

document.getElementsByTagName("noscript")

Как получить все элементы object?

document.getElementsByTagName("object")

Как получить все элементы ol?

document.getElementsByTagName("ol")

Как получить все элементы optgroup?

document.getElementsByTagName("optgroup")

Как получить все элементы option?

document.getElementsByTagName("option")

Как получить все элементы output?

document.getElementsByTagName("output")

Как получить все элементы p?

document.getElementsByTagName("p")

Как получить все элементы param?

document.getElementsByTagName("param")

Как получить все элементы picture?

document.getElementsByTagName("picture")

Как получить все элементы pre?

document.getElementsByTagName("pre")

Как получить все элементы progress?

document.getElementsByTagName("progress")

Как получить все элементы q?

document.getElementsByTagName("q")

Как получить все элементы rp?

document.getElementsByTagName("rp")

Как получить все элементы rt?

document.getElementsByTagName("rt")

Как получить все элементы ruby?

document.getElementsByTagName("ruby")

Как получить все элементы s?

document.getElementsByTagName("s")

Как получить все элементы samp?

document.getElementsByTagName("samp")

Как получить все элементы script?

document.getElementsByTagName("script")

Как получить все элементы section?

document.getElementsByTagName("section")

Как получить все элементы select?

document.getElementsByTagName("select")

Как получить все элементы slot?

document.getElementsByTagName("slot")

Как получить все элементы small?

document.getElementsByTagName("small")

Как получить все элементы source?

document.getElementsByTagName("source")

Как получить все элементы span?

document.getElementsByTagName("span")

Как получить все элементы strong?

document.getElementsByTagName("strong")

Как получить все элементы style?

document.getElementsByTagName("style")

Как получить все элементы sub?

document.getElementsByTagName("sub")

Как получить все элементы summary?

document.getElementsByTagName("summary")

Как получить все элементы sup?

document.getElementsByTagName("sup")

Как получить все элементы svg?

document.getElementsByTagName("svg")

Как получить все элементы table?

document.getElementsByTagName("table")

Как получить все элементы tbody?

document.getElementsByTagName("tbody")

Как получить все элементы td?

document.getElementsByTagName("td")

Как получить все элементы template?

document.getElementsByTagName("template")

Как получить все элементы textarea?

document.getElementsByTagName("textarea")

Как получить все элементы tfoot?

document.getElementsByTagName("tfoot")

Как получить все элементы th?

document.getElementsByTagName("th")

Как получить все элементы thead?

document.getElementsByTagName("thead")

Как получить все элементы time?

document.getElementsByTagName("time")

Как получить все элементы title?

document.getElementsByTagName("title")

Как получить все элементы tr?

document.getElementsByTagName("tr")

Как получить все элементы track?

document.getElementsByTagName("track")

Как получить все элементы u?

document.getElementsByTagName("u")

Как получить все элементы ul?

document.getElementsByTagName("ul")

Как получить все элементы var?

document.getElementsByTagName("var")

Как получить все элементы video?

document.getElementsByTagName("video")

Как получить все элементы wbr?

document.getElementsByTagName("wbr")

Ссылки

DOM стандарт на русском языке — https://efim360.ru/dom/

Читайте перевод полной версии стандарта «объектной модели документа», чтобы ознакомиться со всеми концепциями и интерфейсами.

DOM — Living Standard — https://dom.spec.whatwg.org

Читайте официальную документацию живого стандарта «объектной модели документа», чтобы быть в курсе последних изменений.

Источник