Блог

Главная - HTML язык разметки - HTML DOM getElementById() Method
You are currently viewing HTML DOM getElementById() Method

HTML DOM getElementById() Method

Метод getElementById() возвращает элементы, которым присвоен идентификатор, передаваемый функции. Эта функция является широко используемым методом HTML DOM в веб-дизайне для изменения значения любого конкретного элемента или получения определенного элемента. Если переданный функции идентификатор не существует, то он возвращает значение null. Элемент должен иметь уникальный идентификатор, чтобы быстро получить доступ к этому конкретному элементу, а также этот конкретный идентификатор должен использоваться только один раз во всем документе.

Синтаксис:

document.getElementById( element_ID )

Параметр: Эта функция принимает один параметр element_ID, который используется для хранения идентификатора элемента.

Возвращаемое значение: Возвращает объект с заданным идентификатором. Если элемента с заданным идентификатором не существует, он возвращает значение null.

Пример 1: 

Этот пример описывает getElementById() метод, в котором element_id используется для изменения цвета текста при нажатии на кнопку.

<!DOCTYPE html>
<html>

<head>
	<title>
		DOM getElementById() Method
	</title>

	<script>

		// Function to change the color of element
		function geeks() {
			var demo = document.getElementById("geeks");
			demo.style.color = "green";
		}
	</script>
</head>

<body style="text-align:center">
	<h1 id="geeks">GeeksforGeeks</h1>
	<h2>DOM getElementById() Method</h2>

	<!-- Click on the button to change color -->
	<input type="button"
		onclick="geeks()"
		value="Click here to change color" />
</body>

</html>

Выход:

Пример 2: 

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

<!DOCTYPE html>
<html>

<head>
	<title>
		DOM getElementById() Method
	</title>

	<script>

		// Function to change content of element
		function geeks() {
			var demo = document.getElementById("geeks");
			demo.innerHTML = "Welcome to GeeksforGeeks!";
		}
	</script>
</head>

<body style="text-align:center">
	<h1>GeeksforGeeks</h1>
	<h2>DOM getElementById() Method</h2>
	<h3 id="geeks">Hello Geeks!</h3>

	<!-- Click here to change content -->
	<input type="button"
		onclick="geeks()"
		value="Click here to change content" />
</body>

</html>

Выход:

Поддерживаемые браузеры: Браузер, поддерживаемый Метод DOM getElementById() перечислены ниже:

  • Google Chrome 1.0
  • Internet Explorer 5.5
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Опера 7.0
  • Safari 1.0

Метки: