使用JavaScript通过CSS选择器填充文本框遇阻，求排查指导

核心问题分析 #

你的代码无法正常执行主要有两个关键问题：

1. 选择器语法错误：你把完整的CSS元素路径选择器包裹在了[]中，这会让浏览器将其识别为属性选择器，而非元素层级路径，导致完全匹配不到目标input元素。
2. 值类型判断逻辑隐患：input的value属性本质是字符串类型，直接用o.value < 0.9会触发字符串比较逻辑，可能出现不符合预期的结果（比如字符串"0.89"会被判定为大于"0.9"）。

修复后的代码 #

// 移除选择器外的方括号，使用正确的CSS层级路径
document.querySelectorAll("tr.panel-component:nth-child(1) > td:nth-child(3) > jhi-alpha-numeric:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > input:nth-child(1)")
  .forEach(o => {
    // 将字符串值转为数字后再做判断
    const numValue = parseFloat(o.value);
    if (!isNaN(numValue) && numValue < 0.9) {
      o.value = `NON REACTIVE(${numValue})`;
    }
  });

额外优化建议 #

• 确保DOM加载完成：如果代码在页面DOM未完全渲染时执行，会找不到目标元素。可以将代码放在DOM加载完成事件中：

  document.addEventListener('DOMContentLoaded', function() {
    // 上述修复代码放在此处
  });
  

• 简化选择器：过长的层级选择器容易因页面DOM结构变动失效，建议给目标input添加唯一id或class，比如：

  <input id="target-test-input" ...>
  

  之后用更稳定的选择器定位：

  const targetInput = document.getElementById('target-test-input');
  if (targetInput) {
    const numValue = parseFloat(targetInput.value);
    if (!isNaN(numValue) && numValue < 0.9) {
      targetInput.value = `NON REACTIVE(${numValue})`;
    }
  }
  

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