Html 在 JavaScript 中使用 document.getElementById
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19656581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use of document.getElementById in JavaScript
提问by user2931781
Can someone explain what the document.getElementById("demo")line does in the example below?
有人可以解释document.getElementById("demo")下面示例中该行的作用吗？
I understand getElementById gets the id of demo but the id is <p id="demo"></p>What exactly is <p id="demo"></p>doing in this code?
我知道 getElementById 获取演示的 id 但 id 是这段代码中<p id="demo"></p>到底在<p id="demo"></p>做什么？
document.getElementById("age")is clear as it gets the id of age which is the input.
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>回答by BoltClock
You're correct in that the document.getElementById("demo")call gets you the element by the specified ID. But you have to look at the rest of the statement to figure out what exactly the code is doing with that element:
您是正确的，因为document.getElementById("demo")调用通过指定的 ID 为您获取元素。但是您必须查看该语句的其余部分才能弄清楚代码对那个元素做了什么：
.innerHTML=voteable;
You can see here that it's setting the innerHTMLof that element to the value of voteable.
您可以在此处看到它innerHTML将该元素的 设置为 的值voteable。
回答by Ranadheer Reddy
Consider
考虑
var x = document.getElementById("age");
Here xis the element with id="age".
这x是带有 的元素id="age"。
Now look at the following line
现在看看下面这行
var age = document.getElementById("age").value;
this means you are getting the value of the element which has id="age"
这意味着您正在获取具有的元素的值 id="age"
回答by phron
the line
线
age=document.getElementById("age").value;
says 'the variable I called 'age' has the value of the element with id 'age'. In this case the input field.
说'我称为'age'的变量具有ID为'age'的元素的值。在这种情况下，输入字段。
The line
线
voteable=(age<18)?"Too young":"Old enough";
says in a variable I called 'voteable' I store the value following the rule :
在我称为“voteable”的变量中说，我按照规则存储值：
"If age is under 18 then show 'Too young' else show 'Old enough'"
“如果年龄未满 18 岁，则显示‘太年轻’，否则显示‘足够老’”
The last line tell to put the value of 'voteable' in the element with id 'demo' (in this case the 'p' element)
最后一行告诉将 'voteable' 的值放在 id 为 'demo' 的元素中（在本例中为 'p' 元素）
回答by Mahesh Chaudhary
It is just a selector that helps you select specific tag <p id = 'demo'></p>elements which help you change the behavior, in any event (either mouse or keyboard).
它只是一个选择器，可帮助您选择特定的标签<p id = 'demo'></p>元素，帮助您在任何情况下（鼠标或键盘）更改行为。
回答by andrei
getElementByIdreturns a reference to the element using its id. The element is the inputin the first case and the paragraph in the second case.
getElementById使用它的 返回对元素的引用id。元素是input第一种情况下的元素，第二种情况下是段落。
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById
回答by Shoaib Chikate
Here in your code demois id where you want to display your result after click event has occur and just nothing.
在您的代码demo中，您希望在单击事件发生后显示结果的位置是 id，而什么也没有。
You can take anything
你可以带走任何东西
<p id="demo">
or
或者
<div id="demo">
It is just node in a document where you just want to display your result.
它只是文档中您只想显示结果的节点。
回答by Simon R
document.getElementById("demo").innerHTML = voteablefinds the element with the id demo and then places the voteablevalue into it; either too young or old enough.
document.getElementById("demo").innerHTML = voteable找到具有 id demo 的元素，然后将voteable值放入其中；要么太年轻，要么不够老。
So effectively <p id="demo"></p>becomes for example <p id="demo">Old Enough</p>
所以有效地<p id="demo"></p>变成例如<p id="demo">Old Enough</p>
