JavaScript - метод HTML DOM getElementById () - httpdoc.ru

Метод JavaScript getElementById ()

document.getElementById() Метод возвращает элемент данного идентификатора. В приведенном ниже примере, мы будем использовать этот метод , чтобы получить доступ к значению некоторого элемента по его идентификатору , т.е. document.getElementById("ID").value .

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript DOM getElementbyId Method </title> 
</head>
<body>
 <h2>Square Number</h2>
  <script>  
   function getsquare(){  
	var number=document.getElementById("number").value;  
	alert("Square of " + number + " is " + number*number); 
	}  
  </script>  

 <form>  
  Enter No : <input type="text" id="number" name="number"/>  
  <input type="button" value="Square" onclick="getsquare()"/>  
</form>  
</body>
</html>

Выход

JavaScript DOM getElementbyId Method Example
Введите №:

JavaScript document.getElementsByName ()

В document.getElementsByName() методе возвращает весь элемент с заданным именем.

Синтаксис
document.getElementsByName ("имя")

В этом примере все <input> элементы документа с одинаковым типом и одним и тем же name атрибутом будут сохранены в переменной массива. Таким образом, используя этот массив, мы отметим все флажки одинаковыми name . Взгляните на пример ниже.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript DOM getElementsByName() Method </title> 
</head>
<body>

Samsung:  <input name="Smartphone" type="checkbox" value="Samsung">
OnePlus:  <input name="Smartphone" type="checkbox" value="OnePlus">

<p>Click the button to check all checkboxes that have a name attribute with the value "Smartphone".</p>

<button onclick="myFunction()">Try it</button>

<script>
 function myFunction() {
  var x = document.getElementsByName("Smartphone");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].type == "checkbox") {
      x[i].checked = true;
    }
  }
}
</script>  
</body>
</html>

Выход

JavaScript DOM getElementsByName() Method Samsung: OnePlus:

В этом примере, используя атрибут длины document.getElementById.length , мы вычислим общее количество. элементов, имеющих то же самое name .

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript DOM getElementsByName() Method </title> 
</head>
<body>

Samsung:
 <input name="Smartphone" type="checkbox" value="Samsung">
OnePlus:
 <input name="Smartphone" type="checkbox" value="OnePlus">

 <button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
 function myFunction() {
  var x = document.getElementsByName("Smartphone").length;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Выход

JavaScript DOM getElementsByName() Method Samsung: OnePlus:


JavaScript document.getElementsByTagName ()

В document.getElementByTagName() методе возвращает весь элемент указанного имени тега, как р, h1, h2, промежуток, и т.д.

Синтаксис
document.getElementsByTagName ("имя")

Подсчитайте количество абзацев

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript getElementsByTagName() Method Countpara </title> 
</head>
<body>

<h2> Count Total Paragraph </h2>
 <script>  
  function countpara(){  
  var totalpara=document.getElementsByTagName("p");  
  alert("Total Paragraph <p> Tags are : "+totalpara.length);   
}  
 </script>  

<p>This is a pragraph 1</p>  
<p>This is a pragraph 2</p>  
<p>This is a pragraph 3</p>  
<button onclick="countpara()">Count Paragraphs</button> 

</body>
</html>

Выход

JavaScript getElementsByTagName() Method Countpara

Это праграф 1

Это праграф 2

Это праграф 3


Показать элементы списка

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> getElementsByTagName() Method Display List </title> 
</head>
<body>

<ul type="circle">
  <li>Samsung</li>
  <li>OnePlus</li>
  <li>Google Pixel</li>
</ul>

<button onclick="display()">Try it</button>
<p id="demo"></p>
<p>Click the button to display the innerHTML of the second li element (index 2).</p>

<script>
 function display() {
  var x = document.getElementsByTagName("LI");
  document.getElementById("demo").innerHTML = x[2].innerHTML;
}
</script>

</body>
</html>

Выход

getElementsByTagName() Method Display List Examples
  • Samsung
  • OnePlus
  • Google Pixel


Измените внутренний HTML-код элемента по имени тега

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript getElementsByTagName() </title> 
</head>
<body>

<h2>Click the button to change the text of this paragraph.</h2>

<button onclick="myFunction()">Try it</button>

<script>
 function myFunction() {
  document.getElementsByTagName("h2")[0].innerHTML = "Hello JavaScript!";
}
</script>

</body>
</html>

Выход

JavaScript getElementsByTagName()

Нажмите кнопку, чтобы изменить текст этого абзаца.