如何仅在文档加载时显示UL中的前3个元素？

要实现在文档加载时只显示UL中的前3个元素，可以使用JavaScript来操作DOM元素。

首先，可以通过getElementById()方法或querySelector()方法获取UL元素的引用。然后，使用querySelectorAll()方法获取UL中的所有LI元素，并将其转换为数组。

接下来，可以使用slice()方法截取数组的前3个元素。然后，使用forEach()方法遍历截取后的数组，将每个LI元素的display属性设置为"block"，以显示它们。

最后，可以使用CSS样式将UL中的其他LI元素的display属性设置为"none"，以隐藏它们。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    #myList li {
      display: none;
    }
  </style>
</head>
<body>
  <ul id="myList">
    <li>元素1</li>
    <li>元素2</li>
    <li>元素3</li>
    <li>元素4</li>
    <li>元素5</li>
    <li>元素6</li>
  </ul>

  <script>
    window.addEventListener('DOMContentLoaded', function() {
      var ul = document.getElementById('myList');
      var lis = Array.from(ul.querySelectorAll('li'));
      var firstThree = lis.slice(0, 3);

      firstThree.forEach(function(li) {
        li.style.display = 'block';
      });
    });
  </script>
</body>
</html>

在上述示例中，我们使用了DOMContentLoaded事件来确保在文档加载完成后执行JavaScript代码。首先，我们获取了UL元素的引用，并将其所有LI元素转换为数组。然后，我们截取了数组的前3个元素，并将它们的display属性设置为"block"，以显示它们。最后，通过CSS样式将其他LI元素的display属性设置为"none"，以隐藏它们。

这是一个简单的实现方式，适用于静态的UL列表。如果UL列表是动态生成的，可以根据具体情况进行相应的修改。