JavaScript中的“直接操作文档”，document.getElementById(“id”)

直接操作文档

这是最佳的方式，尽量使用这种方式来与网页和用户交互。**使用JavaScript可以访获取用户输入的值，修改HTML或样式，更新网页的内容，全面控制页面。**这些都是利用浏览器的文档对象模型（后面将更详细地讨论）实现的。这是与用户交流的最佳方式。然而，要使用文档对象模型，你必须知道网页的结构，并熟悉用来读写网页的编程接口。

使用innerHTML写入到HTML元素。

学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。

语法:

document.getElementById(“id”)

我的第一个段落

以上JavaScript语句可以在web浏览器中行：
document.getElementById(“demo”) 是使用id属性来查找HTML元素的JavaScript代码。
innerHTML = “段落已修改。” 是用于修改元素的HTML内容(innerHTML)的JavaScript代码。

具体应用：
实现点击左边的图片，右边的文字被更换

<div class="box">
			<img src="#" alt="" onClick="TuPian()">
			<div id="demo">javascript</div>
		</div>
		<script>
			function TuPian()
			{
				str='hellow world!'
				document.getElementById("demo").innerHTML = str;
			}

css样式：

	<style>
			div {
				
			}
			img {
				float: left;
				
			}
			div #demo {
				float: left;
				
			}
	</style>

以上大部分内容来自“中国大学mooc”，本文章经本人总结而来，仅是学习参考。