实践中按名称选择元素的问题

Question

我正在尝试使用getElementsByName（）方法，但是它对我不起作用。当使用代码段工具在Stack Overflow上运行时，我的解决方案运行良好。

但是实际上，我无法选择所需的字段。这是我要从中选择电子邮件字段元素的页面。这是一个预订表单小部件-https://supercleaningservicelouisville.com/book-now

let field = document.getElementsByName("booking[email]");

function changeCopy() {
field[0].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]')容易得多。>>