JavaScript中使用document.getElementById的方法

Question

请问下面这个例子中的 document.getElementById("demo") 这一行代码是做什么用的？

我知道 getElementById 是获取 id 为 demo 的元素，但是这个 id 是 <p id="demo"></p>，那么在这段代码中 <p id="demo"></p> 到底起到了什么作用呢？

document.getElementById("age") 很明显是获取 id 为 age 的 input 元素。

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>

- user2931781

Answer 1

你说的没错，document.getElementById("demo") 调用可以通过指定的 ID 获取元素。但是你需要查看语句的其余部分来确定代码实际上是在对该元素做什么：

.innerHTML=voteable;

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

- BoltClock

Answer 2

考虑以下内容：

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

这里的x是具有id="age"属性的元素。

现在看一下下面的这行内容。

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

这意味着您正在获取具有id="age"的元素的值。

- Ranadheer Reddy

Answer 3

这条线

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

说：“我称之为'age'的变量具有id为'age'的元素的值。在这种情况下，是输入字段。”

该行

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

在一个名为“voteable”的变量中，我按照以下规则存储值：

“如果年龄小于18岁，则显示'Too young'，否则显示'Old enough'”

最后一行指示将“voteable”的值放入具有id“demo”的元素中（在这种情况下为'p'元素）。

- phron

Answer 4

在你的代码中，demo 是你想在点击事件发生后显示结果的 id，仅此而已。

你可以获取任何东西。

<p id="demo">

或者

<div id="demo"> 

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

- Shoaib Chikate

Answer 5

getElementById 会返回一个使用 id 来引用该元素的引用。在第一种情况下，该元素是 input ，而在第二种情况下是段落。

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

- andrei

Answer 6

document.getElementById("demo").innerHTML = voteable 找到具有 id demo 的元素，然后将 voteable 值放入其中；无论是太年轻还是太老。

因此，<p id="demo"></p> 例如变成了 <p id="demo">Old Enough</p>

- Simon R

Answer 7

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

- Mahesh Chaudhary