在 JavaScript 中使用 document.getElementById

Use of document.getElementById in JavaScript

本文关键字：document getElementById JavaScript      更新时间：2023-09-26

有人可以解释一下document.getElementById("demo")行在下面的示例中的作用吗？

我知道getElementById得到了演示的id，但id是<p id="demo"></p> <p id="demo"></p>在这个代码中到底在做什么？

document.getElementById("age")很清楚，因为它得到了年龄的ID，这是输入。

function myFunction() {
  var age,voteable;
  age = document.getElementById("age").value;
  voteable = (age < 18)? "Too young" : "Old enough";
  document.getElementById("demo").innerHTML = voteable;
}
<p>Click the button to check the age.</p>
Age:<input id="age" value="18" />
<p>Old enough to vote?</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

您是正确的，因为document.getElementById("demo")调用通过指定的 ID 获取元素。但是你必须查看语句的其余部分，以确定代码对该元素到底做了什么：

.innerHTML=voteable;

您可以在此处看到，它将该元素的innerHTML设置为 voteable 的值。

考虑

 var x = document.getElementById("age");

这里x是带有id="age"的元素。

现在看下面几行

var age = document.getElementById("age").value;

这意味着您正在获取具有id="age"

行

age=document.getElementById("age").value;
说'我称之为'age'的

变量具有id为'age'的元素的值。在本例中为输入字段。

该行

voteable=(age<18)?"Too young":"Old enough";

说在我称为"可投票"的变量中，我按照规则存储值：

"如果年龄未满18岁，则显示'太年轻'，否则显示'足够老'"

最后一行告诉将"可投票"的值放在 id 为 'demo' 的元素中（在本例中为 'p' 元素）

document.getElementById("demo").innerHTML = voteable找到带有 id demo 的元素，然后将voteable值放入其中;要么太年轻，要么足够老。

如此有效地<p id="demo"></p>变得例如<p id="demo">Old Enough</p>

在您的

代码中，demo id 您希望在单击事件发生后显示结果，而什么都没有。

你可以拿走任何东西

<p id="demo">

或 

<div id="demo">

它只是文档中的节点，您只想在其中显示结果。

> getElementById 使用元素的id返回对元素的引用。该元素是第一种情况下的input，第二种情况下是段落。

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById

它

只是一个选择器，可帮助您选择特定的标签<p id = 'demo'></p>元素，这些元素可帮助您在任何情况下（鼠标或键盘）更改行为。

相关文章：