DocumentFragment: метод getElementById()

Базовая Широко доступная

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

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

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

Примечание: Идентификаторы должны быть уникальными внутри фрагмента документа. Если два или более элементов в фрагменте документа имеют один и тот же идентификатор, этот метод возвращает первый найденный элемент.

Синтаксис

getElementById(id)

Примечание: Регистр символов "Id" в имени этого метода должен быть правильным для работы кода; getElementByID() недействителен и не будет работать, как бы естественно это ни выглядело.

Параметры

id: Идентификатор элемента для поиска. Идентификатор — это чувствительная к регистру строка, уникальная внутри фрагмента документа: только один элемент должен иметь данный идентификатор.

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

Объект Element, описывающий объект DOM-элемента, соответствующий указанному идентификатору, или null, если соответствующий элемент не был найден во фрагменте документа.

Примеры

Расширение списка элементов

В этом примере документ содержит список с одним элементом Cherry. Мы также создаем фрагмент документа, содержащий четыре дополнительных элемента, Apple, Orange, Banana, и Melon.

Затем мы выводим результат использования getElementById() для поиска элементов Apple и Cherry в документе и во фрагменте. В этот момент, Cherry присутствует только в документе, а Apple только во фрагменте.

Если вы нажмете «Добавить фрагмент в документ», мы добавим фрагмент в список внутри документа и снова выведем результат поиска Apple и Cherry в документе и во фрагменте. На этот раз, оба Apple и Cherry присутствуют в документе, и ни один не присутствует во фрагменте.

Это происходит потому, что добавление фрагмента в документ перемещает узлы фрагмента в DOM, оставляя пустой DocumentFragment.

HTML

<button id="add">Add fragment to document</button>
<button id="reset">Reset example</button> <br />
List content:
<ul>
  <li id="Cherry">Cherry</li>
</ul>
Fragment content:
<ul id="fragment"></ul>
Current status:
<pre id="log" />

JavaScript

// Create the document fragment with its initial content
const fragment = new DocumentFragment();
["Apple", "Orange", "Banana", "Melon"].forEach((fruit) => {
  const li = document.createElement("li");
  li.textContent = fruit;
  li.id = fruit;
  fragment.append(li);
});

// When the button is clicked, add the fragment to the list
document.getElementById("add").addEventListener("click", () => {
  document.querySelector("ul").append(fragment);
  displayStatus();
});

// Log the results of both getElementById()
function displayStatus() {
  const log = document.getElementById("log");
  log.textContent = "";
  ["Apple", "Cherry"].forEach((id) => {
    log.textContent += `document.getElementById("${id}") ${
      document.getElementById(id) ? "Yes" : "No"
    }\n`;
    log.textContent += `fragment.getElementById("${id}") ${
      fragment.getElementById(id) ? "Yes" : "No"
    }\n`;
  });

  // Empty the fragment viewer and fill it with the current content
  const fragmentViewer = document.getElementById("fragment");
  while (fragmentViewer.hasChildNodes()) {
    fragmentViewer.removeChild(fragmentViewer.lastChild);
  }
  for (entry of fragment.children) {
    fragmentViewer.appendChild(entry.cloneNode(true));
  }
}

// Log the initial state
displayStatus();

// Hook the reset button
document.getElementById("reset").addEventListener("click", () => {
  document.location.reload();
});

Результат

Спецификации

Спецификация
DOM # dom-nonelementparentnode-getelementbyid

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`getElementById`	36	17	28	23	9	36	28	24	9	3.0	37

См. также

Document.getElementById()

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/getElementById