HTML - DOM getElementById() 方法

HTML DOM 的getElementById() 方法用于通过传递其 ID 作为参数来检索元素。在HTML中，ID是一个属性，用于为元素指定唯一的标识符（例如，<p id="demo">），其中“demo”是<p>元素的 ID 值。

如果 ID 不唯一，则只返回具有该 ID 的第一个元素。如果指定的 ID 不存在，则此方法将返回 null。

在讨论此方法的各种示例之前，让我们考虑一个交互式部分，这将使您更清楚地了解此方法的各种场景。

DOM getElementById() 方法

欢迎来到 Tutorialspoint

嘿！这是一个 HTML 段落

语法

以下是 HTML DOM getElementById() 方法的语法：

document.getElementById(ElementId);

参数

此方法接受如下所示的单个参数：

参数	描述
ElementId	它表示要查找的元素的 ID 值。它是一个区分大小写的字符串。

返回值

如果存在给定 ID 的元素，则此方法返回该元素；如果不存在具有指定 ID 名称的 ID，则返回 null。

示例 1

以下是 HTML DOM getElementById() 方法的基本示例：

<html>
<head>
<title>HTML DOM getElementById() Method</title>
</head>
<body>
<p id="demo">Tutorialspoint</p>
<script>
   alert(document.getElementById('demo'));
</script>
</body>
</html>

将出现一个弹出警报，显示消息“[object HTMLParagraphElement]”。

示例 2：更改字体颜色

我们将使用 HTML DOM getElementById() 方法首先按其“id”访问元素，然后使用“style”属性更改字体颜色：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementById() Method</title>
</head>
<body>
<p>Click on the below button to change color.</p>
<button onclick="fun()">Click me</button>
<p id="tp">"Welcome to Tutorials Point.."</p>
<script>
   function fun() {
      let x = document.getElementById("tp");
      x.style.color = "red";
   }
</script>
</body>
</html>

执行上述程序后，将显示一个按钮。单击时，字体颜色将变为“绿色”。

示例 3：显示任何文本

在下面的示例中，我们将文本显示到<p> 元素。

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementById() Method</title>
</head>
<body>
<p>Click on the below to display a text</p>
<button onclick="fun()">Click me</button>
<p id="tp"></p>
<script>
   function fun() {
      document.getElementById("tp").innerHTML = "Welcome to Tutorials Point";
   }
</script>
</body>
</html>

执行上述程序后，将出现一个按钮，单击后将显示文本“欢迎来到 Tutorials Point”。

示例 4：更改字体大小

在下面的示例中，单击按钮后将更改显示文本的字体大小：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementById() Method</title>
</head>
<body>
<p>Click on the below button to change the font size.</p>
<button onclick="fun()">Click me</button>
<p id="tp">"Welcome to Tutorials Point.."</p>
<script>
   function fun() {
      let x = document.getElementById("tp");
      x.style.fontSize = "24px";
   }
</script>
</body>
</html>

执行上述程序后，窗口屏幕上将出现一个按钮，单击后字体大小将更改为“24px”。

示例 5：添加事件监听器

在下面的示例中，我们将使用其 ID 访问按钮元素，然后使用addEvenetListener() 方法添加单击事件，该方法会触发警报消息：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementById() Method</title>
</head>
<body>
<p>Click on the below button to alert a message </p>
<button id="tp">click me</button>
<script>
   document.getElementById("tp").addEventListener("click", fun);
   function fun() {
      alert("Welcome to Tutorialspoint");
   }
</script>
</body>
</html>

执行上述程序后，将显示一个按钮，单击后，窗口屏幕上将出现警报消息“欢迎来到 Tutorialspoint”。

支持的浏览器

方法
getElementByID	是 1	是 12	是 1	是 1	是 7

html_dom_document_reference.htm

打印页面