在 html 页面上选择表单域答案

【问题标题】：Selecting form field on a html page在 html 页面上选择表单域
【发布时间】：2019-05-17 10:31:36
【问题描述】：

我正在尝试准备我的第一个 Greasmonkey 脚本（没有 javascript/网站技术经验），但我在选择页面上的字段时遇到了问题。它是：

<input data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal">

我已经测试过了：

document.querySelectorAll("input.form-control");
document.querySelectorAll("input.form-control.u-text-normal");
document.getElementById("user/fullName").value

但他们都没有返回我需要的东西......我需要的是用脚本填充该表单字段的可能性。请问您能帮忙吗？

编辑：以下答案中给出的方法我尝试在浏览器控制台中运行，但它们没有返回任何元素。也许有人可以尝试运行它并告诉我我做错了什么？该网站是pizza site 上的购物车 :) 但要查看它，您需要将披萨添加到购物车（“Do koszyka”）至少 20 兹罗提，然后付款（“Do kasy”）。那么第一个字段“Imie i nazwisko”就是我想在开始时填写的内容。

【问题讨论】：

使用这些选择器会得到什么？您是否获得其他字段、太多字段或没有字段？
还有你什么时候给他们打电话的？如果它们在它们存在之前被执行（例如，您的脚本在 html 中的元素之前），您将无法获得参考。还提供minimal reproducible example我们只能用几行代码来猜测
忘记写了。我没有字段。
您可能需要等待页面完成加载。 document.addEventListener('DOMContentLoaded', function() { console.log('document is ready. I can sleep now'); });

标签： javascript html xpath

【解决方案1】：

如果需要获取单个元素，给html元素一个id示例：

<html>
<input id='id_here'data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal">
</html>

然后使用

获取元素

document.getElementById('id_here');

对于共享同一类的多个元素，您可以使用查询选择器

document.querySelector('.form-control')

【讨论】：

【解决方案2】：

这是你想要的吗？

var example = document.querySelector('.form-control').value;
document.write(example);

&lt;input data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal" value="test"&gt;

【讨论】：

【解决方案3】：

如果你只想选择这个元素，使用最具体的东西，在这种情况下data-testid：

var x = document.querySelectorAll("[data-testid='user/fullName']")
console.log(x[0].value)

【讨论】：

【解决方案4】：

选择元素（这里我们选择类和数据属性最准确）=>

var element = document.querySelector('.form-control[data-testid="user/fullName"]');

如果你想在这个输入中添加一些值之后 =>

element.value = "My_value";

问候

【讨论】：

【解决方案5】：

您可以添加 'id' 或通过 querySelector 选择您的字段

let input = document.querySelector('[data-testid="user/fullName"]')

input.value='abc';

myField.value += '123';

&lt;input id="myField" data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal"&gt;

更新

我尝试了我的方法，它在您的问题更新中提到的pizza 网站有效：

但是在您使用right click> inspect element 找到它之后，它看起来像控制台“看到”dom 输入元素 - 奇怪

【讨论】：