无法读取按钮innerHTML属性（其他属性可正常访问）技术求助

问题详情 #

尝试识别按钮文本时遇到异常：Firefox开发者工具的元素属性面板中，能看到按钮的innerHTML有具体文本（如"Interrompre"），但通过JavaScript/JQuery代码读取该属性时返回空值，而disabled、className等其他属性可以正常读取。

代码示例 #

$("#objbefDlg .dlg-buttons .dlg-button").each(function() {
    console.log("this ", this, " this.disabled ", this.disabled, " this.innerHTML ", this.innerHTML, " this.className ", this.className, " this.contentEditable ", this.contentEditable);       
});

对应HTML结构 #

<div id="objbefDlg" class="dialog">
    <div class="dlg-main">
        <div id="objdlg-cont-left">
            ...
        </div>        
        <div id="objdlg-cont-right">
            ...
        </div> 
    </div>
    <div class="dlg-buttons">
        <button class="dlg-button"></button>
        <button class="dlg-button"></button>
        <button class="dlg-button"></button>
        <button class="dlg-button"></button>
    </div>
</div>

可能原因及解决办法 #

1. 文本存在于Shadow DOM中 #

部分UI框架会将按钮文本放在Shadow DOM内部，常规DOM查询无法直接访问。可以尝试通过shadowRoot获取内容：

$("#objbefDlg .dlg-buttons .dlg-button").each(function() {
    if (this.shadowRoot) {
        // 获取Shadow DOM内的文本内容
        const buttonText = this.shadowRoot.textContent.trim();
        console.log("按钮文本：", buttonText);
        // 或者直接读取Shadow DOM的innerHTML
        console.log("Shadow DOM内容：", this.shadowRoot.innerHTML);
    }
});

2. 代码执行时机早于文本渲染 #

按钮文本可能是异步加载或动态插入的，你的代码在文本还未写入DOM时就执行了。可以通过延迟执行或监听DOM变化解决：

• 延迟执行（简单测试用）：

  document.addEventListener('DOMContentLoaded', function() {
      setTimeout(() => {
          $("#objbefDlg .dlg-buttons .dlg-button").each(function() {
              console.log("innerHTML：", this.innerHTML);
          });
      }, 1000); // 根据实际加载时间调整延迟时长
  });
  

• 用MutationObserver监听DOM变化（更可靠）：

  const buttonContainer = document.querySelector("#objbefDlg .dlg-buttons");
  const observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
          if (mutation.type === 'childList' || mutation.type === 'characterData') {
              $("#objbefDlg .dlg-buttons .dlg-button").each(function() {
                  const text = this.innerHTML.trim();
                  if (text) {
                      console.log("按钮文本：", text);
                      observer.disconnect(); // 获取到文本后停止监听
                  }
              });
          }
      });
  });
  // 监听容器内的子元素变化和文本内容变化
  observer.observe(buttonContainer, { childList: true, subtree: true, characterData: true });
  

3. 文本通过CSS伪元素插入 #

如果按钮文本是通过::before/::after伪元素的content属性设置的，那么innerHTML本身为空，开发者工具会显示伪元素内容但DOM中不存在。可以读取计算后的样式获取内容：

$("#objbefDlg .dlg-buttons .dlg-button").each(function() {
    const beforeContent = window.getComputedStyle(this, ':before').content;
    const afterContent = window.getComputedStyle(this, ':after').content;
    // 去掉引号并修剪空格
    const buttonText = (beforeContent || afterContent).replace(/["']/g, '').trim();
    console.log("伪元素文本：", buttonText);
});

4. 检查代码执行时的实时DOM状态 #

开发者工具显示的是当前实时DOM，而代码执行时的DOM可能还未更新。可以在代码中添加断点，暂停执行后查看元素的innerHTML值，确认执行时机是否正确。

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