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

一时失言乱红尘 2023-06-09 12:30 4阅读 0赞

**直接操作文档**

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

使用**innerHTML**写入到HTML元素。

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

语法:

document.getElementById(“id”)

Sample Page!

我的第一个段落

以上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样式：

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