JavaScript的HTML加载（onload）是如何处理的？

2025-01-15 阅读 461 评论 5 点赞 340

摘要：什么是HTMLHTML 代表“超文本标记语言”。它是“使用标记语言的伟大句子”的形象。重点是“标记”。“标记”是为句子指定元素。使用所谓的标记作为指定方法。标签有很多种，大家经常看到的有、、、、等。这个标签的每个特性都是预先确定的，并在使用浏览器（IE、chrome、safa

什么是HTML

HTML 代表“超文本标记语言”。它是“使用标记语言的伟大句子”的形象。

重点是“标记”。“标记”是为句子指定元素。使用所谓的标记作为指定方法。标签有很多种，大家经常看到的有<html>、<head>、<body>、<h1>、<title>等。

这个标签的每个特性都是预先确定的，并在使用浏览器（IE、chrome、safari 等）查看时按照规则显示。通过这种方式，HTML 可以通过使用各种标记组合来修饰句子并在浏览器中查看它们来引用易于阅读的页面。

另外，多说一点，可以为每个标签指定一种样式，不仅可以设置文本的颜色和大小，还可以设置显示方式和移动方式。这些样式组合在一个 CSS 文件中。

onload的加载过程是怎样的

HTML 的一个特点是尽可能多地显示内容，而无需阅读整个内容。有话要说。

以前网线细，数据交换时间长，所以优先显示。

只处理普通句子时没有问题，但像 JavaScript 一样操作整个句子时就会出现问题。如果JavaScript指定的部分还没有加载，程序当然会出错。

因此，有必要在读完所有句子后开始处理。实现它的是onload。可以在使用 window.onload 事件处理程序加载整个页面后执行处理。

JavaScript的HTML加载（onload）是如何处理的？

让我们使用 onload 创建一个 HTML 加载过程

为了对比，不使用Onload时也进行了说明。前者导致错误，后者导致正常，所以请比较一下。

【错误】

<!DOCTYPE html>
<html>
  <head>
    <script>
      var memo = document.getElementById('memo');   
      memo.textContent = '你好！';
    </script>
  </head>
  <body>
    <p id="memo"></p>
  </body>
</html>

【正常】

<!DOCTYPE html>
<html>
  <head>
    <script>
      window.onload = function() {
        var memo = document.getElementById('memo');   
        memo.textContent = "你好！";
      }
    </script>
  </head>
  <body> 
    <p id="memo"></p>
  </body>
</html>