1.下面是一个简单的例子，页面加载时显示一段信息
代码如下:<%@ page language=”java” import=”java.util.*” pageEncoding=”UTF-8″%><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”><html> <head> [removed] alert(“hello!!!”); [removed] </head> <body onLoad=”showMessage()”>
在网页开发中，JavaScript 是一种常用的脚本语言，用于实现客户端的交互效果。在上述问题中，主要讨论了如何正确地使用 `document.getElementById` 方法来获取页面中的元素对象，特别是在页面加载过程中的时机问题。
`document.getElementById` 是JavaScript中的一个函数，它用于根据指定的ID从HTML文档中检索元素。例如，`document.getElementById('mes')` 将返回ID为 'mes' 的第一个元素。如果页面中没有与该ID匹配的元素，则返回 `null`。
在第一个示例中，`<script>` 标签位于 `<head>` 部分，其中的 JavaScript 代码在页面加载时执行，弹出 "hello!!!" 的警告框。由于 `<h1>` 元素在 `<body>` 中，此时执行 `alert` 不会遇到任何问题，因为整个 `<body>` 已经加载完毕。
然而，在第二个示例中，JavaScript 代码尝试在 `<head>` 中获取ID为 'mes' 的文本框元素并设置其值。由于 `<script>` 标签在 `<body>` 中的输入框之前，`document.getElementById('mes')` 返回 `null`，因为此时浏览器还没有解析到这个文本框。因此，尝试设置 `t.value` 会导致错误。
为了解决这个问题，我们需要确保 JavaScript 代码在目标元素已经加载到页面后执行。这可以通过将脚本移至 `<body>` 结束标签之前，或者使用 `window.onload` 或 `DOMContentLoaded` 事件来确保在页面完全加载后再执行代码。在第三个示例中，采用了一种简单的方法，即将 `<script>` 标签移动到 `<body>` 的末尾，这样当脚本执行时，整个 `<body>` 已经被解析，`document.getElementById('mes')` 就能正确地找到文本框元素并设置其值。
此外，现代JavaScript中更推荐使用 `DOMContentLoaded` 事件来等待文档加载完成，而不是依赖于 `onLoad` 或将脚本放在 `<body>` 末尾。这可以避免因图片或其他外部资源加载延迟而引发的问题。例如：
```html
<!DOCTYPE HTML>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>示例</title>
</head>
<body>
the message is:<input type="text" id="mes">
<script>
document.addEventListener('DOMContentLoaded', function() {
var t = document.getElementById('mes');
t.value = "hello, my friend!";
});
</script>
</body>
</html>
```
在这个例子中，`DOMContentLoaded` 事件确保在HTML结构加载完成后才执行JavaScript，即使有外部资源正在加载。这样，无论脚本放在哪里，都能正确地获取并操作ID为 'mes' 的元素。
