在实践中按名称选择元素时出现问题

Question

我正在尝试使用getElementsByName((方法，但它对我不起作用。我无法选择所需的字段。这是我尝试从中选择电子邮件字段元素的页面。这是一个预订表单小部件，涉及一个iframe-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]').

---

附带说明一下...

如果使用角度，请正确使用它并添加ng-click以更改范围中的属性，该属性用作占位符

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