Проблема выбора элемента по имени на практике

Question

Я пытаюсь использовать метод getElementsByName (), но он не работает для меня. Я не могу выбрать поле, которое я хочу. Это страница, с которой я пытаюсь выбрать элемент поля электронной почты. Это виджет формы бронирования, и в нем есть встроенный фрейм - https://supercleaningservicelouisville.com/book-now

var iframe = document.getElementById("booking-widget-iframe");
var field = iframe.contentWindow.document.querySelector('booking[email]');

function changeCopy() {
field.placeholder = "hello";
}

document.getElementById("button").addEventListener("click", changeCopy)

<button id = "button">Click</button>

<input class="form-control input-lg ng-pristine ng-valid ng-valid-email ng-valid-maxlength ng-touched" name="booking[email]" ng-model="ctrl.booking.email" ng-change="ctrl.onBookingEmailChanged()" ng-class="{error: ctrl.booking.errors.email}" maxlength="255" placeholder="Email*" type="email" style="">

Answer 1

Функция getElementsByName принимает только имя элемента, а не атрибут, классы или что-либо еще ...

Затем она возвращает HTMLCollection (итеративный), который похож на массив.

«Старая школа»:

let field = Array.from(document.getElementsByName("booking")).find(el => el.hasAttribute('email'));

Но гораздо проще сделать document.querySelector('booking[email]').

---

На заметку ...

Если вы используете angular, используйте его правильно и добавьте ng-click, чтобы изменить свойство в области видимости, которое используется в качестве заполнителя

<input placeholder="{{myPlaceHolder}}">
<button ng-click="myPlaceHolder = 'new placeholder'"></button>