为含子菜单的导航项添加ID导致菜单失效及报错问题

问题背景 #

我有一个支持多语言翻译的下拉导航菜单，普通菜单项和下拉子菜单项通过ID查询实现翻译都正常，但给带下拉子菜单的父导航项添加ID并编写翻译代码后，菜单出现异常，同时触发Cannot set properties of null (setting 'textContent')错误。尝试用data-translation-key替代ID也遇到同样问题。

正常工作代码 #

HTML结构 #

<div class="main_nav_menu">
    <a href="..." class="menu-item" id="item_home">Home</a>
    
    <div class="menu-item grp">Grouped Item<span class="arrow"> ▼</span>
        <div class="nav_submenu">
            <a href="..." class="submenu-item" id="item_1">Item 1</a>
            <a href="..." class="submenu-item" id="item_2">Item 2</a>
        </div>
    </div>
    
    <a href="..." class="menu-item" id="item_contact">Contact</a>
</div>

JavaScript代码 #

// 从URL获取当前语言参数
var currentLang = (new URLSearchParams(window.location.search)).get('lang');

// 根据选择的语言更新菜单内容
function updateMenuContent(selectedLang) {
    switch (selectedLang) {
        case 'de':
            document.getElementById('item_home').textContent = 'Home';
            document.getElementById('item_contact').textContent = 'Kontakt';
            // ... 子菜单项翻译代码
        case 'fr':
            document.getElementById('item_home').textContent = 'Home';
            document.getElementById('item_contact').textContent = 'Contact';
            // ... 子菜单项翻译代码
        default:
            // 默认英文
    }
}

修改后的问题代码 #

修改的HTML #

<div class="menu-item grp" id="item_grp">Grouped Item<span class="arrow"> ▼</span>

添加的翻译代码（在case 'de'分支中） #

document.getElementById('item_grp').textContent = 'Gruppierte Einträge';

报错信息 #

Uncaught TypeError: Cannot set properties of null (setting 'textContent')
at updateMenuContent (wordpress/?lang=de:183:66)
at HTMLDocument.<anonymous> (wordpress/?lang=de:232:3)
updateMenuContent @ wordpress/?lang=de:183
(anonymous) @ wordpress/?lang=de:232

原因分析与解决方案 #

1. 元素未找到的核心原因 #

报错Cannot set properties of null说明document.getElementById('item_grp')返回了null，即DOM中不存在这个ID的元素，常见原因：

• JS执行时机过早：代码在DOM元素渲染完成前就执行了，此时元素还未被解析。
• WordPress动态菜单冲突：WordPress主题或插件可能重写了导航结构，导致ID被覆盖或元素未正确生成。

2. 菜单异常的额外原因 #

即使元素能找到，直接设置父元素的textContent会覆盖掉内部的<span class="arrow">元素，导致下拉箭头消失，这也是菜单异常的原因之一。

解决方案 #

方案一：确保JS在DOM加载完成后执行

将初始化代码包裹在DOMContentLoaded事件中，确保DOM解析完成后再调用翻译函数：

document.addEventListener('DOMContentLoaded', function() {
    var currentLang = (new URLSearchParams(window.location.search)).get('lang');
    updateMenuContent(currentLang);
});

方案二：添加容错判断

在翻译代码中先检查元素是否存在，避免报错：

case 'de':
    // ... 其他翻译代码
    var grpElement = document.getElementById('item_grp');
    if (grpElement) {
        // 后续修改操作
    }

方案三：正确修改文本而不覆盖子元素

不要直接设置父元素的textContent，而是单独修改文本部分：

• 方法A：给文本单独加容器
  修改HTML，把导航文本放在单独的<span>中：

  <div class="menu-item grp">
      <span id="item_grp_text">Grouped Item</span>
      <span class="arrow"> ▼</span>
      <div class="nav_submenu">...</div>
  </div>
  

  翻译时修改这个span的内容：

  document.getElementById('item_grp_text').textContent = 'Gruppierte Einträge';
  

• 方法B：通过DOM节点定位文本
  直接操作父元素的文本节点，不影响子元素：

  var grpElement = document.getElementById('item_grp');
  if (grpElement) {
      // 遍历子节点，找到非空的文本节点
      for (let node of grpElement.childNodes) {
          if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
              node.textContent = 'Gruppierte Einträge';
              break;
          }
      }
  }
  

方案四：排查WordPress动态菜单问题

打开浏览器开发者工具的「Elements」面板，查看实际渲染的HTML，确认item_grpID是否存在：

• 如果ID不存在，说明主题/插件修改了菜单结构，此时可以改用类选择器定位（如document.querySelector('.main_nav_menu .menu-item.grp')），但要确保选择器唯一。
• 如果ID被修改，需要调整代码中的查询ID，或者在WordPress后台的菜单设置中自定义导航项的ID（部分主题支持此功能）。

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