getElementById() 是多个 JavaScript HTML 方法之一。使用该方法来“查找” id="demo" 的 HTML 元素，并可改变元素内容、属性、样式；还可以隐藏元素、显示隐藏的元素。
1.JavaScript 能够改变HTML内容（.innerHTML = 'Hello JavaScript!'）
（1）全部双引号
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 能做什么？</h1>
<p id="demo">JavaScript 可以更改 HTML 内容。</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">单击这里</button>
</body>
</html>
（2）同时接受双引号和单引号
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 能做什么？</h1>
<p id="demo">JavaScript 可以更改 HTML 内容。</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">单击这里</button>
</body>
</html>
2.JavaScript 能够改变HTML属性（.src='/i/eg_bulboff.gif'）
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能做什么？</h2>
<p>JavaScript 能够改变 HTML 属性值。</p>
<p>在本例中，JavaScript 改变了图像的 src 属性值。</p>
<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>
<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>
</body>
</html>
3.JavaScript能够改变HTML样式 (.style.fontSize='35px')
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能够做什么</h2>
<p id="demo">JavaScript 能够改变 HTML 元素的样式。</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">点击我！</button>
</body>
</html>
4.JavaScript能够隐藏HTML元素(.style.display='none')
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能够做什么</h2>
<p id="demo">JavaScript 能够隐藏 HTML 元素。</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">点击我！</button>
</body>
</html>
5.JavaScript能够隐藏HTML元素(.style.display='block')
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能够做什么</h2>
<p>JavaScript能够显示隐藏的HTML元素。</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">点击我！</button>
</body>
</html>