如何从HTML标签直接调用JavaScript函数？现有方案遇阻求助

<article>是普通块级元素，本身不支持onload事件——这个事件仅针对需要加载外部资源的元素（如img、script、iframe）和window对象触发，所以你在<article>上写onload属性，浏览器根本不会执行对应的函数。

1. 全局DOM加载完成后批量处理 #

如果你的displayBetween需要根据每个<article>的日期区间判断（建议用自定义data-*属性存储日期），可以等整个页面DOM加载完毕后统一处理，不用每个标签单独写脚本：

// 把这段代码放在<head>里或者页面底部的<script>标签中
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有需要日期控制的article（给它们加个专属class，比如date-limited）
  const articles = document.querySelectorAll('article.date-limited');
  articles.forEach(art => {
    // 从data属性里取起止日期
    const start = art.dataset.startDate;
    const end = art.dataset.endDate;
    // 直接传入article元素，不用id
    displayBetween(art, start, end);
  });
});

对应的HTML写法：

<article class="date-limited" data-start-date="2024-05-01" data-end-date="2024-05-31">
  <!-- 文章内容 -->
</article>

2. 简化内嵌脚本写法 #

如果不想等全局加载，也可以把原来的内嵌脚本简化，直接传递当前<article>元素，不用写id：

<article>
  <!-- 文章内容 -->
  <script>displayBetween(this.parentElement);</script>
</article>

前提是你的displayBetween函数支持直接接收DOM元素作为参数（如果原来的函数是通过id查找元素，只需要把查找逻辑改成直接使用传入的元素即可）。

3. 处理动态生成的article #

如果你的<article>是通过AJAX等方式动态添加到页面的，可以用MutationObserver自动监听并处理新插入的元素：

const observer = new MutationObserver(mutations => {
  mutations.forEach(mut => {
    mut.addedNodes.forEach(node => {
      if (node.tagName === 'ARTICLE' && node.classList.contains('date-limited')) {
        const start = node.dataset.startDate;
        const end = node.dataset.endDate;
        displayBetween(node, start, end);
      }
    });
  });
});

// 监听body下所有子元素变化
observer.observe(document.body, { childList: true, subtree: true });

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