JS根据URL参数设置radio选中时获取元素返回null问题

你写的逻辑返回null是两个问题共同导致的：

• 选择器用法错误：document.querySelector('.filter-category')只会返回第一个匹配该类名的单选框元素，不是所有单选框的集合。而<input>是自闭合标签，内部不存在子元素，你后续在这个单个input元素上调用querySelector查找带data-filter属性的子元素，必然找不到匹配结果返回null。
• 执行时序错误：URL参数匹配的逻辑大概率在filterCategory()动态渲染分类单选框之前就运行了，此时动态生成的单选框还没插入DOM树，就算选择器写对也找不到对应选项。
  另外你动态生成单选框时，id从flexRadioDefault${i}（i从0开始）生成，和初始默认的「All categories」选项idflexRadioDefault1重复，会导致label关联失效，属于附带的小bug。

1. 修正元素选择逻辑，用querySelectorAll获取全量分类单选框，不要在单个input元素内查找子元素
2. 调整执行顺序，把URL匹配选中的逻辑放到所有单选框（含动态生成的部分）全部插入DOM之后再执行
3. 修复动态生成单选框的id重复问题

修复后代码 #

首先把URL参数匹配逻辑封装成独立函数：

function setSelectedRadioFromUrl() {
  const urlParams = new URLSearchParams(window.location.search);
  const targetCategory = urlParams.get("name");
  // 没传对应URL参数就直接终止，保留默认选中的「All categories」状态
  if (!targetCategory) return;

  // 获取全部分类单选框
  const allRadios = document.querySelectorAll('.filter-category');
  // 遍历匹配对应选项
  for (const radio of allRadios) {
    if (radio.dataset.filter === targetCategory) {
      radio.checked = true;
      break;
    }
  }
}

然后调整原有的动态渲染函数，修复id问题，在渲染完成后调用选中逻辑：

function filterCategory(ads) {
  let categories = Array.from(new Set(ads.map(ann => ann.category)));
  let rowCategoryRadio = document.querySelector('#row-category-radio');

  // i从2开始计数，避开默认选项的id=flexRadioDefault1，防止id重复
  categories.forEach((cat, i) => {
    let formCheckWrap = document.createElement('div');
    formCheckWrap.classList.add('form-check');
    const radioId = `flexRadioDefault${i + 2}`;
    formCheckWrap.innerHTML = `
        <input class="form-check-input filter-category" type="radio" name="category-filter" id="${radioId}" data-filter="${cat}">
        <label class="form-check-label" for="${radioId}">
        ${cat}
        </label>
        `
    rowCategoryRadio.appendChild(formCheckWrap);
  })

  // 所有单选框渲染完成后，再执行URL参数匹配选中
  setSelectedRadioFromUrl();
}

• 单元素上没有子节点时，调用querySelector查找内部元素必然返回null，使用选择器前要先明确你选中的对象类型
• 动态生成的DOM元素，必须等插入DOM树之后再执行查找、绑定事件等操作，否则会拿到null
• 元素的data-*自定义属性可以直接通过element.dataset.xxx的方式读取，比写属性选择器更稳定高效

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