Метод 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 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>Выход
В этом примере, используя атрибут длины
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 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>Выход
Это праграф 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>Выход
-
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>