Html Document. Get Element ById(String) Метод

Определение

Извлекает единственный элемент HtmlElement с использованием атрибута ID этого элемента в качестве ключа поиска. Retrieves a single HtmlElement using the element’s ID attribute as a search key.

Параметры

Атрибут идентификации извлекаемого элемента. The ID attribute of the element to retrieve.

Возвращаемое значение

Возвращает первый объект с атрибутом ID , совпадающим с указанным значением, или значение null , если идентификатор id не удалось найти. Returns the first object with the same ID attribute as the specified value, or null if the id cannot be found.

Примеры

Следующий пример кода извлекает именованный объект TABLE из документа, подсчитывает количество строк и отображает результат на веб-странице. The following code example retrieves a named TABLE from a document, counts up the number of rows, and displays the result in the Web page. В примере кода требуется, чтобы WebBrowser в проекте был элемент управления с именем WebBrowser1 и была загружена веб-страница с TABLE атрибутом, имеющим ID значение Table1 . The code example requires that you have a WebBrowser control in your project named WebBrowser1 , and that you have loaded a Web page with a TABLE whose ID attribute is Table1 .

Комментарии

Если в документе имеется несколько элементов с одинаковым значением идентификатора, GetElementById вернет первый найденный объект. If there are multiple elements in the document with the same ID value, GetElementById will return the first one it finds.

Поиск: 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 . Очень редко используется.

Давайте найдём все input в таблице:

Одна из самых частых ошибок начинающих разработчиков (впрочем, иногда и не только) – это забыть букву «s» . То есть пробовать вызывать метод getElementByTagName вместо getElementsByTagName .

Буква «s» отсутствует в названии метода getElementById , так как в данном случае возвращает один элемент. Но getElementsByTagName вернёт список элементов, поэтому «s» обязательна.

Другая распространённая ошибка – написать:

Попытка присвоить значение коллекции, а не элементам внутри неё, не сработает.

Нужно перебрать коллекцию в цикле или получить элемент по номеру и уже ему присваивать значение, например, так:

Ищем элементы с классом .article :

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

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

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

Первый создаёт ссылку на коллекцию

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

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

Теперь мы легко видим разницу. Длина статической коллекции не изменилась после появления нового 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 .

Задачи

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

Вот документ с таблицей и формой.

1. Таблицу с id=»age-table» .
2. Все элементы label внутри этой таблицы (их три).
3. Первый td в этой таблице (со словом «Age»).
4. Форму form с именем name=»search» .
5. Первый input в этой форме.
6. Последний input в этой форме.

document.getElementById()

Возвращает ссылку на элемент по его идентификатору (ID); идентификатор является строкой, которая может быть использована для идентификации элемента; она может быть определена при помощи атрибута id в HTML или из скрипта.

Синтаксис

Параметры

Возвращаемое значение

ссылка на объект типа Element соответствующий указанному ID или null , если элемент с указанным ID не найден в документе.

Пример

Замечания

Начинающим следует знать, что верхний регистр в части имени метода ‘Id’ должен быть точным для корректного вызова функции; «getElementByID» будет не корректно, как бы естественно это ни казалось.

Если элементы с указанным id отсутствуют , функция вернёт null. Заметьте, что параметр id чувствителен к регистру, так document.getElementById(«Main») вернёт null вместо элемента

Элементы вне документа не ищутся getElementById() . При создании элемента и назначении ему ID, вам следует вставить элемент в дерево документа с помощью Node.insertBefore() или подобным методом, до того как вы сможете получить к нему доступ при помощи getElementById() :

Не-HTML документы. Релизация DOM должна содержать информацию, сообщающую о том, какие атрибуты являются идентификаторами. Атрибуты с именем «id» не являются идентификаторами только если это не указано в описании типа документа (DTD). Атрибут «id» определён в качестве идентификатора в общих случаях XHTML, XUL, и других. От реализаций, которые не знают, какой атрибут является идентификатором, ожидается возврат null.

GetElementById как работает пример

Поддержи проект.

Что такое GetElementById, как использовать GetElementById , примеры, перевод. Обращение к тегу по его id

Все о методе GetElementById

Что такое GetElementById, как переводится

GetElementById это замечательный метод и из самого названия вы уже сможете понять о чем примерно будет идти речь.

Давайте в самом начале определим, «Что такое GetElementById«.

GetElementById — это метод, с помощью которого можно обратиться к элементу страницы по его идентификатору «id»

Как переводится GetElementById

«By» — из(в контексте), «id» — идентификатор селектора .

Итого получилось перевод – «GetElementById» — получить элемент из идентификатора.

Синтаксис getElementById:

Если мы сможем обратиться к тегу, то далее можем с ним и его внутренностями и внешностями делать все, что нам вздумается!

Пример использования GetElementById

Для того, чтобы показать работу метода GetElementById сделаем див(div) с id example и текстом внутри

Далее нам нужна кнопка при нажатии на которую должно срабатывать событие onclick

Сооружаем такую конструкцию, пишем document.getElementById, во внутрь кавычек помещаем наше название id-> example. И нам например нужно получить все содержание между тегами данного ид добавляем с точкой innerHTML. Полученную конструкцию оборачиваем скобками и выведем на экран результат получения данных с помощью getElementById

Соберем весь код вместе:

Получи данные с помощью GetElementById

Живой пример получения данных с помощью GetElementById:

Получение value с помощью GetElementById

Как отправить данные с помощью GetElementById

Для того, чтобы отправить данные в тег, как мы уже неоднократно говорили нужно обратиться к тегу, мы на данной странице используем для этого GetElementById

Нам в очередной раз понадобится тестовый блок/элемент с id:

Для того, чтобы увидеть передачу данных в тег с помощью GetElementById нам нужна кнопка:

Изменение документа

Модификации DOM – это ключ к созданию «живых» страниц.

Здесь мы увидим, как создавать новые элементы «на лету» и изменять уже существующие.

Пример: показать сообщение

Рассмотрим методы на примере – а именно, добавим на страницу сообщение, которое будет выглядеть получше, чем alert .

Это был пример HTML. Теперь давайте создадим такой же div , используя JavaScript (предполагаем, что стили в HTML или во внешнем CSS-файле).

Создание элемента

DOM-узел можно создать двумя методами:

Создаёт новый элемент с заданным тегом:

Создаёт новый текстовый узел с заданным текстом:

Создание сообщения

В нашем случае сообщение – это div с классом alert и HTML в нём:

Мы создали элемент, но пока он только в переменной. Мы не можем видеть его на странице, поскольку он не является частью документа.

Методы вставки

Чтобы наш div появился, нам нужно вставить его где-нибудь в document . Например, в document.body .

Для этого есть метод append , в нашем случае: document.body.append(div) .

Вот полный пример:

Вот методы для различных вариантов вставки:

• node.append(. nodes or strings) – добавляет узлы или строки в конец node ,
• node.prepend(. nodes or strings) – вставляет узлы или строки в начало node ,
• node.before(. nodes or strings) –- вставляет узлы или строки до node ,
• node.after(. nodes or strings) –- вставляет узлы или строки после node ,
• node.replaceWith(. nodes or strings) –- заменяет node заданными узлами или строками.

Вот пример использования этих методов, чтобы добавить новые элементы в список и текст до/после него:

Наглядная иллюстрация того, куда эти методы вставляют:

Итоговый список будет таким:

Эти методы могут вставлять несколько узлов и текстовых фрагментов за один вызов.

Например, здесь вставляется строка и элемент:

Весь текст вставляется как текст.

Поэтому финальный HTML будет:

Другими словами, строки вставляются безопасным способом, как делает это elem.textContent .

Поэтому эти методы могут использоваться только для вставки DOM-узлов или текстовых фрагментов.

А что, если мы хотим вставить HTML именно «как html», со всеми тегами и прочим, как делает это elem.innerHTML ?

insertAdjacentHTML/Text/Element

С этим может помочь другой, довольно универсальный метод: elem.insertAdjacentHTML(where, html) .

Первый параметр – это специальное слово, указывающее, куда по отношению к elem производить вставку. Значение должно быть одним из следующих:

• «beforebegin» – вставить html непосредственно перед elem ,
• «afterbegin» – вставить html в начало elem ,
• «beforeend» – вставить html в конец elem ,
• «afterend» – вставить html непосредственно после elem .

Второй параметр – это HTML-строка, которая будет вставлена именно «как HTML».

Так мы можем добавлять произвольный HTML на страницу.

Мы можем легко заметить сходство между этой и предыдущей картинкой. Точки вставки фактически одинаковые, но этот метод вставляет HTML.

У метода есть два брата:

• elem.insertAdjacentText(where, text) – такой же синтаксис, но строка text вставляется «как текст», вместо HTML,
• elem.insertAdjacentElement(where, elem) – такой же синтаксис, но вставляет элемент elem .

Они существуют, в основном, чтобы унифицировать синтаксис. На практике часто используется только insertAdjacentHTML . Потому что для элементов и текста у нас есть методы append/prepend/before/after – их быстрее написать, и они могут вставлять как узлы, так и текст.

Так что, вот альтернативный вариант показа сообщения:

Удаление узлов

Для удаления узла есть методы node.remove() .

Например, сделаем так, чтобы наше сообщение удалялось через секунду:

Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого.

Все методы вставки автоматически удаляют узлы со старых мест.

Например, давайте поменяем местами элементы:

Клонирование узлов: cloneNode

Как вставить ещё одно подобное сообщение?

Мы могли бы создать функцию и поместить код туда. Альтернатива – клонировать существующий div и изменить текст внутри него (при необходимости).

Иногда, когда у нас есть большой элемент, это может быть быстрее и проще.

• Вызов elem.cloneNode(true) создаёт «глубокий» клон элемента – со всеми атрибутами и дочерними элементами. Если мы вызовем elem.cloneNode(false) , тогда клон будет без дочерних элементов.

Пример копирования сообщения:

DocumentFragment

DocumentFragment является специальным DOM-узлом, который служит обёрткой для передачи списков узлов.

Мы можем добавить к нему другие узлы, но когда мы вставляем его куда-то, он «исчезает», вместо него вставляется его содержимое.

Например, getListContent ниже генерирует фрагмент с элементами
, которые позже вставляются в

:

Обратите внимание, что на последней строке с (*) мы добавляем DocumentFragment , но он «исчезает», поэтому структура будет:

DocumentFragment редко используется. Зачем добавлять элементы в специальный вид узла, если вместо этого мы можем вернуть массив узлов? Переписанный пример:

Мы упоминаем DocumentFragment в основном потому, что он используется в некоторых других областях, например, для элемента template, который мы рассмотрим гораздо позже.

Устаревшие методы вставки/удаления

Есть несколько других, более старых, методов вставки и удаления, которые существуют по историческим причинам.

Сейчас уже нет причин их использовать, так как современные методы append , prepend , before , after , remove , replaceWith более гибкие и удобные.

Мы упоминаем о них только потому, что их можно найти во многих старых скриптах:

Добавляет node в конец дочерних элементов parentElem .

Следующий пример добавляет новый
в конец

:

Вставляет node перед nextSibling в parentElem .

Следующий пример вставляет новый элемент перед вторым
:

Чтобы вставить newLi в начало, мы можем сделать вот так:

Заменяет oldChild на node среди дочерних элементов parentElem .

Удаляет node из parentElem (предполагается, что он родитель node ).

Этот пример удалит первый
из

:

Все эти методы возвращают вставленный/удалённый узел. Другими словами, parentElem.appendChild(node) вернёт node . Но обычно возвращаемое значение не используют, просто вызывают метод.

Несколько слов о «document.write»

Есть ещё один, очень древний метод добавления содержимого на веб-страницу: document.write .

Вызов document.write(html) записывает html на страницу «прямо здесь и сейчас». Строка html может быть динамически сгенерирована, поэтому метод достаточно гибкий. Мы можем использовать JavaScript, чтобы создать полноценную веб-страницу и записать её в документ.

Этот метод пришёл к нам со времён, когда ещё не было ни DOM, ни стандартов… Действительно старые времена. Он всё ещё живёт, потому что есть скрипты, которые используют его.

В современных скриптах он редко встречается из-за следующего важного ограничения:

Вызов document.write работает только во время загрузки страницы.

Если вызвать его позже, то существующее содержимое документа затрётся.

Так что после того, как страница загружена, он уже непригоден к использованию, в отличие от других методов DOM, которые мы рассмотрели выше.

Это его недостаток.

Есть и преимущество. Технически, когда document.write запускается во время чтения HTML браузером, и что-то пишет в документ, то браузер воспринимает это так, как будто это изначально было частью загруженного HTML-документа.

Поэтому он работает невероятно быстро, ведь при этом нет модификации DOM. Метод пишет прямо в текст страницы, пока DOM ещё в процессе создания.

Так что, если нам нужно динамически добавить много текста в HTML, и мы находимся на стадии загрузки, и для нас очень важна скорость, это может помочь. Но на практике эти требования редко сочетаются. И обычно мы можем увидеть этот метод в скриптах просто потому, что они старые.

Итого

Методы для создания узлов:

• document.createElement(tag) – создаёт элемент с заданным тегом,
• document.createTextNode(value) – создаёт текстовый узел (редко используется),
• elem.cloneNode(deep) – клонирует элемент, если deep==true , то со всеми дочерними элементами.

Вставка и удаление:

• node.append(. nodes or strings) – вставляет в node в конец,
• node.prepend(. nodes or strings) – вставляет в node в начало,
• node.before(. nodes or strings) – вставляет прямо перед node ,
• node.after(. nodes or strings) – вставляет сразу после node ,
• node.replaceWith(. nodes or strings) – заменяет node .
• node.remove() – удаляет node .

• parent.appendChild(node)
• parent.insertBefore(node, nextSibling)
• parent.removeChild(node)
• parent.replaceChild(newElem, node)

Все эти методы возвращают node .

Если нужно вставить фрагмент HTML, то elem.insertAdjacentHTML(where, html) вставляет в зависимости от where :

• «beforebegin» – вставляет html прямо перед elem ,
• «afterbegin» – вставляет html в elem в начало,
• «beforeend» – вставляет html в elem в конец,
• «afterend» – вставляет html сразу после elem .

Также существуют похожие методы elem.insertAdjacentText и elem.insertAdjacentElement , они вставляют текстовые строки и элементы, но они редко используются.

Чтобы добавить HTML на страницу до завершения её загрузки:

После загрузки страницы такой вызов затирает документ. В основном встречается в старых скриптах.