从内容页目标div访问其他div返回空HTML集合问题求助

问题根因 #

• 你代码中<a>标签设置的target="main"对普通<div>无效：target属性仅对<iframe>、<frame>、浏览器窗口生效，点击后不会自动把对应页面内容加载到id为main的div中，这是你无法获取目标元素的核心原因之一。
• 如果你是用<iframe>替换了div实现内容加载：子页面（iframe内加载的页面）的JS运行在独立上下文，document指向iframe内部的文档，自然无法获取父页面主文档里的元素，返回空集合。
• 如果你是通过AJAX/jQuery load方法手动加载内容到div：如果选择元素的操作早于内容完全插入DOM的时间，也会出现找不到元素的情况。

对应解决方案 #

方案1：保持用div作为内容容器，修复加载逻辑 #

首先删掉所有a标签的target="main"属性，添加JS处理点击加载逻辑：

// 写在主页面的JS中，绑定所有侧边栏链接的点击事件
$('.item a').on('click', function(e) {
  e.preventDefault(); // 阻止浏览器默认跳转行为
  const targetPage = $(this).attr('href');
  // 加载页面内容到#main，加载完成后再执行后续操作
  $('#main').load(targetPage, function() {
    // 如果需要调整新加载内容的样式，可以在这里调用字体设置函数
  });
});

你的字体调整函数直接写在主页面即可，不需要在子页面重复引入，所有子页面加载后调用的函数都会走主页面的上下文，能正常获取全页DOM元素。

方案2：用iframe作为内容容器 #

如果要保留target加载逻辑，把原来的<div id="main"></div>改成iframe：

<iframe id="main" name="main" src="size.html" frameborder="0"></iframe>

如果需要在iframe内的子页面调用JS修改父页面元素，把所有document替换成parent.document即可，示例：

// 子页面中获取父页面的.content元素
const elms = parent.document.getElementsByClassName('content');

代码优化建议 #

你现有的三个字体调整函数冗余度很高，可以合并成一个通用函数，简化维护：

function setFontSize(level) {
  window.fs = level;
  const sizeMap = {
    1: '1rem',
    2: '1.5rem',
    3: '2rem'
  };
  const targetSize = sizeMap[level];
  // 修改.content类元素字号
  document.querySelectorAll('.content').forEach(el => el.style.fontSize = targetSize);
  // 修改.item类元素字号
  document.querySelectorAll('.item').forEach(el => el.style.fontSize = targetSize);
  // 最大字号同时修改所有a标签
  if(level === 3) {
    document.querySelectorAll('a').forEach(el => el.style.fontSize = targetSize);
  }
}

按钮绑定的点击事件对应改成onclick="setFontSize(1)"、onclick="setFontSize(2)"、onclick="setFontSize(3)"即可。

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