<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分时问候</title>
<script type="text/javascript">
function ShowTime(){
var strgreet = "";
var datetime = new Date(); //获取当前时间
var hour = datetime.getHours(); //获取小时
var minu = datetime.getMinutes(); //获取分钟
var seco = datetime.getSeconds(); //获取秒钟
strtime =hour+":"+minu+":"+seco+" "; //组合当前时间
if(hour >= 0 && hour < 8){ //判断是否为早上
strgreet ="早上好";
}
if(hour >= 8 && hour < 11){ //判断是否为上午
strgreet ="上午好";
}
if(hour >= 11 && hour < 13){ //判断是否为中午
strgreet = "中午好";
}
if(hour >= 13 && hour < 17){ //判断是否为下午
strgreet ="下午好";
}
if(hour >= 17 && hour < 24){ //判断是否为晚上
strgreet ="晚上好";
}
window.setTimeout("ShowTime()",1000); //每隔1秒重新获取一次时间
document.getElementById("time").innerHTML="现在是：<b>"+strtime+"</b>";
document.getElementById("greet").innerText="<b>"+strgreet+"</b>";
}
window.onload=ShowTime; //在页面载入后调用ShowTime()函数
</script>
</head>
<body background="bg.gif">
<div id="time">显示当前时间</div>
<div id="greet">显示问候语</div>
</body>
</html>
上面的代码中这2句代码：
<div id="time">显示当前时间</div> <div id="greet">显示问候语</div>
中已经有了文本内容了，为什么显示出来的是具体时间和问候语？
这是怎么回事？是如何替换的？替换逻辑是啥呢么
这是一个很好的关于JavaScript DOM操作的问题。
页面最初显示"显示当前时间"和"显示问候语"是因为浏览器首先解析了HTML内容，但随后JavaScript代码立即替换了这些内容。
替换机制分析：
页面加载流程：
浏览器解析HTML，显示初始文本
遇到
window.onload=ShowTime，在页面完全加载后执行ShowTime函数JavaScript替换逻辑：
// 这行使用innerHTML，会解析<b>标签，显示为粗体时间
document.getElementById("time").innerHTML="现在是：<b>"+strtime+"</b>";
// 这行使用innerText，会将<b>标签作为纯文本显示，不会解析为粗体
document.getElementById("greet").innerText="<b>"+strgreet+"</b>";关键区别：
innerHTML：解析HTML标签，<b>会被渲染为粗体效果innerText：只处理纯文本，<b>会直接显示为字符"<b>问候语</b>"
实际效果：
时间显示为：现在是：18:57:09（时间部分为粗体）
问候语显示为：
<b>晚上好</b>（包含尖括号的纯文本）
这个替换过程几乎是瞬间完成的，所以用户通常只能看到最终的计算结果，而看不到初始的占位文本。
也就是说首先是浏览器解析，应该显示最初的文本，
但是随后JavaScript执行时替换了这些内容。
这个替换是瞬间的对吗？那先后顺序是什么？
同时还是有先后？执行时间又大约是多少秒？
浏览器解析HTML与JavaScript执行替换内容的过程存在明确的先后顺序，且替换通常发生在极短时间内。
解析与执行的先后顺序
浏览器解析HTML文档时遵循从上到下的文档流顺序。
当HTML解析器遇到<script>标签时，会暂停解析HTML并调用JavaScript解析器执行脚本。
在您提供的代码中，由于JavaScript代码位于<head>内，它会在页面主体内容完全呈现前执行。
但window.onload=ShowTime确保了ShowTime函数在整个页面（包括所有图像等外部资源）加载完成之后才被触发执行。
替换的瞬时性与执行时机
JavaScript对DOM内容的替换（通过innerHTML或innerText）是同步操作。
这意味着赋值语句document.getElementById("time").innerHTML=...一旦执行，对应DOM元素的内部HTML会立刻被更新。
然而，"眼睛看到"的页面更新（即渲染）是异步的。因为浏览器的JavaScript执行线程与GUI渲染线程是互斥的，不能同时工作。
所以，尽管DOM在JavaScript执行时已被修改，但页面的实际渲染（您看到的变化）要等到JavaScript线程执行完毕，渲染线程获得下一个执行机会时才会发生。
由于这个过程非常快，对于用户而言，感觉就像是“瞬间”完成了替换，通常察觉不到初始文本的显示。
执行耗时
单次DOM赋值操作本身的耗时极短，通常在毫秒级甚至微秒级。
一次DOM操作的开销大约相当于执行1000-5000次纯JavaScript变量操作。
在您提供的代码中，两次innerHTML/innerText赋值的时间成本可以忽略不计。
关键顺序总结
浏览器解析：显示
<div id="time">显示当前时间</div>等初始内容。触发执行：页面完全加载后，触发
onload事件，调用ShowTime函数。同步更新DOM：JavaScript同步执行，更新
id="time"和id="greet"两个div的内容。异步渲染：JavaScript线程执行完毕后，渲染线程将更新后的DOM树绘制到屏幕上，您便看到了具体的时间和问候语。