Выбор поля формы на html-странице

Я пытаюсь подготовить свой первый скрипт Greasmonkey (без опыта работы с технологиями javascript / вебсайтов), и у меня проблема с выбором поля на странице. Это:

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

Я проверил:

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

но ни один из них не возвращает то, что мне нужно ... и что мне нужно, так это возможность заполнить поле формы скриптом. Не могли бы вы помочь, пожалуйста?

РЕДАКТИРОВАТЬ: методы, приведенные в следующих ответах, я пытаюсь запустить в консоли браузера, и они не возвращают мне ни одного элемента. Может быть, кто-то может попытаться запустить его и сказать мне, что я делаю не так? Веб-сайт представляет собой корзину для покупок на сайте пиццы :) Но чтобы увидеть ее, вам нужно добавить пиццу в корзину («Do koszyka») минимум на 20 злотых, а затем перейти к оплате («Do kasy»). Тогда первое поле «Imie i nazwisko» - это то, что я хотел бы заполнить в начале.

Всего 5 ответов


Если вам нужно получить один элемент, дайте элементу 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')

Это то, что вы хотели?

 var example = document.querySelector('.form-control').value; document.write(example); 
 <input data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal" value="test"> 


Если вы хотите выбрать только этот элемент, используйте наиболее конкретную вещь, в данном случае data-testid :

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

выбрать элемент (здесь мы выбираем класс и свойство данных, чтобы быть наиболее точным) =>

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

После, если вы хотите добавить некоторое значение в этот вход =>

element.value = "My_value";

С уважением


Вы можете добавить 'id' или выбрать свое поле по querySelector

 let input = document.querySelector('[data-testid="user/fullName"]') input.value='abc'; myField.value += '123'; 
 <input id="myField" data-testid="user/fullName" autocomplete="name" class="form-control u-text-normal"> 

Обновить

Я пробую свой метод, и он работает на сайте пиццы, который вы упоминаете в своем обновлении вопроса:

введите описание изображения здесь

Но похоже, что консоль «видит» элемент ввода dom после того, как вы нашли его, используя right click> inspect element - странно


Есть идеи?

10000