使⽤JavaScript替换HTML内容html document是什么
⼀天，在从多个站点查看源代码时，我注意到⼤量元素不包含任何数据。 我开始徘徊，为什么⽹页设计师会在⽹页上放置元素⽽不显⽰任何内容。 然后我意识到那些空元素是简单的占位符。 设计⼈员以后将要处理的屏幕空⽩区域。
JavaScript提供的⼀项⾮常有⽤的功能是能够替换以前显⽰的现有HTML⽂档中元素的内容，甚⾄是空元
素。 Web设计师可能选择利⽤此功能的原因很多，但提供交互式页⾯是⼀个可能的⽬标。
检索HTML表单数据中⼼在新页⾯上显⽰检索到的数据。 尽管该⽅法实际上显⽰了数据，但有时在将数据检索到的同⼀页⾯上显⽰数据可以增强站点的吸引⼒。
要实现此简单功能，需要使⽤另⼀种技术，该技术采⽤getElementByID（）内置JavaScript函数。 我是否提到JavaScript区分⼤⼩写？很好，因此在使⽤先前定义的函数时，请确保正确输⼊⼤写和⼩写字母，否则当JavaScript解释器⽆法到函数时，您将收到语法错误。 getElementById函数
在JavaScript中， getElementById（）函数提供了替换以前包含在⽂档中并由id属性标识的元素中的数据的功能。 您将idattribute包含在HTML标记内。 例如，要包括id属性以将表单标识为contactForm，我们将在<form>标记中包括id属性，如下所⽰：
<form id="contactForm"> ... </form>
现在我们已经在HTML⽂档中确定了表单，现在可以在脚本中引⽤该表单了。
代码段中的以下⾏说明了使⽤包含getElementById（） JavaScript函数的⼀般形式或语法：
在所⽰的代码⾏中，document是包含getElementById（）函数的当前⽂档或⽗⽂档。 括号中的elementId表⽰要修改的元素的ID 。 语句的innerHTML =“新内容”部分指⽰浏览器⽤引号之间的新内容表⽰的内容替换内部HTML区域或HTML元素标签之间的空间。 还请注意，语句中的句点。 这些标点符号是必需的，并将对象与要采取的⽅法和操作分开。
使⽤此功能还可以说明W3C HTML⽂档对象模型（DOM）中元素之间的关系。 尽管Internet不受特定组织的控制，但是W3C或World Wide Web联盟为Web开发制定了标准。
在DOM下，⽂档被视为⽹页中的⽗对象或最⾼级别的对象。 从⾯向对象编程（OOP）中借⽤对象的概念导致对象中包含属性和⽅法。 在本指南下， getElementById（）⽅法包含在⽂档类中，并且可以引⽤⽗⽂档的任何⼦元素，只要该元素包含id标识符即可，该⽅法⽤于定位⽬标元素。
因此，我们可以使⽤getElementById（）函数做什么呢？让我们⾸先通过在HTML代码的<body>部分中的第⼀个表之后创建另⼀个表来进⾏准备。 以下代码段创建了⼀个不显⽰任何内容的表。 原谅我不包含运⾏HTML代码时表格显⽰的屏幕截图，但是该显⽰类似于暴风雪中北极熊的照⽚-只是很多⽩⾊。
<table border="1">
<tr>
<td id="ic1"></td><td id="ic2"></td>
</tr>
<tr>
<td id="ic3"></td><td id="ic4"></td>
</tr>
<tr>
<td id="ic5"></td><td id="ic6"></td>
</tr>
</table>
查看右侧的屏幕快照，将显⽰输⼊表单，其中添加了空⽩表单。 我为表单提供了蓝⾊背景，以便新表单的位置显⽰在屏幕快照中。 请注意表格的尺⼨⾮常⼩（蓝⾊的⼩框）。
因此，添加第⼆张表后，我们现在可以使⽤getElementById（）⽅法添加代码以从表单中提取数据并在第⼆张表中显⽰该数据。 执⾏这些操作的代码如下：
<script type="text/javascript">
function commitData() { ElementById("ic1").innerHTML="First Name";
}
</script>
你学到了什么？
在该⽰例中，将上⾯的代码放在HTML⽂档的<head>部分中，并使⽤onclick事件（在后⾯的中⼼中的onclick事件中有更多信息）调⽤该函数。 当⽤户单击⽤于提供数据的表单中作为<input>元素提供的按钮时，将触发onclick事件。 这不是使⽤getElementById（）函数的唯⼀⽅法，⽽是作者在此⽰例中使⽤的⽅法。 尝试使⽤该功能，以真正了解该⽅法的多功能性。
快速说明：
您会注意到，在我的⼤多数代码⽰例中，代码都是使⽤缩进格式设置的。 这些缩进称为空⽩，对于⼈
类查看者来说，只是提⾼了代码的可读性。
计算机不在乎空⽩，⽽是从程序的运⾏版本中解析出那部分代码。
但是，空格确实使调试代码更容易，并且在使⽤HTML代码时，空格使查丢失的标签变得轻⽽易举。 使⽤其他语⾔时，此技术也很有帮助。
本⽂最初由的Daisy Rowley

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。