JavaScript/Runtime document manipulation
运行时文档操作
编辑JavaScript可以使用标准 DOM(文档对象模型)操作已加载到浏览器中的 HTML 文档。 让我们看一个例子:
<!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript">
function displayMessage() {
var divObj = document.getElementById("messageText");
if (divObj) {
divObj.innerHTML="<b>This is the new Message from Javascript</b>";
}
}
</script>
</head>
<body>
<input type="button" value="Display Message" onclick="displayMessage();" />
<div id="messageText" style="width:400px; height:200px; color:#00FF00"></div>
</body>
</html>
当这个 html 文档加载到浏览器中时,浏览器会显示一个“显示消息”按钮。 当我们单击此按钮时,文本“This is the new Message from Javascript”以粗体文本显示在 messageText div 容器中。
请注意,JavaScript 函数 displayMessage() 通过添加文本和提供粗体样式更改了 html 文档的内容。
var divObj = document.getElementById("messageText");
这个document对象是加载的 HTML 的表示。通过使用它的getElementById() 方法,并通过传递 HTML 元素的 id/name,我们可以点击元素的 DOM 表示(在本例中为 div 标签)并将新的 HTML 元素添加到当前的 HTML 文档使用 innerHTML 属性。