如何从movies.html提取前10个movie类元素并在首页展示？

要实现首页动态拉取并展示movies.html的前10个.movie元素，且自动同步更新，可通过前端JavaScript的Fetch API完成，具体步骤如下：

1. 准备首页容器 #

在index.html中添加一个用于展示电影的容器：

<div id="movie-container"></div>

2. 动态拉取并渲染电影列表 #

在index.html中插入以下JavaScript代码，实现页面加载时拉取最新的电影列表并筛选前10个：

document.addEventListener('DOMContentLoaded', async () => {
  const container = document.getElementById('movie-container');
  try {
    // 请求movies.html文件
    const response = await fetch('movies.html');
    if (!response.ok) throw new Error('电影列表加载失败');
    
    // 解析HTML内容为DOM对象
    const htmlContent = await response.text();
    const domParser = new DOMParser();
    const movieDoc = domParser.parseFromString(htmlContent, 'text/html');
    
    // 获取所有.movie元素，截取前10个
    const allMovies = movieDoc.querySelectorAll('.movie');
    const top10Movies = Array.from(allMovies).slice(0, 10);
    
    // 将元素插入首页容器
    top10Movies.forEach(movie => {
      container.appendChild(movie.cloneNode(true));
    });
  } catch (error) {
    container.textContent = `加载出错：${error.message}`;
  }
});

3. 实现自动刷新（可选） #

如果希望首页无需手动刷新就能同步movies.html的更新，可以添加定时拉取逻辑，比如每5分钟刷新一次：

// 定时刷新电影列表，间隔可自行调整
setInterval(async () => {
  const container = document.getElementById('movie-container');
  try {
    const response = await fetch('movies.html');
    if (!response.ok) throw new Error('刷新电影列表失败');
    
    const htmlContent = await response.text();
    const domParser = new DOMParser();
    const movieDoc = domParser.parseFromString(htmlContent, 'text/html');
    
    const allMovies = movieDoc.querySelectorAll('.movie');
    const top10Movies = Array.from(allMovies).slice(0, 10);
    
    // 清空容器后重新插入最新内容
    container.innerHTML = '';
    top10Movies.forEach(movie => {
      container.appendChild(movie.cloneNode(true));
    });
  } catch (error) {
    console.error('刷新失败：', error);
  }
}, 5 * 60 * 1000); // 5分钟，单位为毫秒

注意事项 #

• 必须在本地服务器环境下运行（比如VS Code的Live Server插件、XAMPP等），浏览器的同源策略会阻止直接从本地文件系统（file://协议）发起Fetch请求。
• 无论movies.html新增多少电影，首页都会自动拉取最新内容并展示前10个。

内容的提问来源于stack exchange，提问作者bedirhangn