HTML DOM：无法以编程方式编辑元素值

Question

我正在尝试自动化某些网站上的一些任务，包括Google Finance。但是，当我尝试编辑 Google 财经搜索输入中的输入值时，它根本不起作用。有没有人可以帮我解决这个问题？

我已经在控制台中尝试过以下代码：

element = document.querySelector("input\[class='yNVtPc ZAGvjd Ny5lGc'\]")
element.value = "RELIANCE"
element2 = document.querySelector("input[class='Ax4B8 ZAGvjd']")
element2.value = "RELIANCE"

我什至尝试删除禁用属性并更改默认值，但仍然没有成功。

此外，我还尝试了以下功能：

const sendKeys = async (el, str) => {
    let val = "";
    const keys = str.split("");
    for (const key of keys) {
      console.log(key);
      val += key;
      el.dispatchEvent(
        new KeyboardEvent("keydown", { bubbles: true, cancelable: true, key })
      );
      
      el.dispatchEvent(
        new KeyboardEvent("keypress", { bubbles: true, cancelable: true, key })
      );
      
      el.value = val;
      
      el.dispatchEvent(new Event("input", { bubbles: true }));
      
      el.dispatchEvent(new Event("change", { bubbles: true }));
      
      el.dispatchEvent(
        new KeyboardEvent("keyup", { bubbles: true, cancelable: true, key })
      );
      
    }
    return true;
  };

但是，即使这个也不起作用。 是否有任何解决方案或解决方法，以便我可以以编程方式在该输入字段中键入文本？

Answer 1

我刚刚尝试过，https://www.google.com/finance/页面中有4个Input标签，当我使用单个querySelector并设置值时，没有任何改变。 但是当我更改为 querySelectorAll 时，它起作用了

var elements = document.querySelectorAll("input");
[...elements].map(i => i.value = 'RELIANCE');

但这仍然让我很奇怪，单个 querySelector 在普通页面中工作，也许谷歌改变了 getters 和 setters 或者其他东西