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

【问题标题】：Problem selecting element by name in practice在实践中按名称选择元素的问题
【发布时间】：2020-01-16 15:14:27
【问题描述】：

我正在尝试使用 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="">

【问题讨论】：

使用角度和使用 JavaScript 设置属性似乎很奇怪。为什么不直接用 angular 设置占位符？
元素加载后是否运行代码？
尝试使用此文本“booking[email]”。似乎有一些看不见的角色在那里。我尝试从您的网站复制文本并在控制台中尝试，它有效
是不是因为元素在iframe里面？
是的，该元素位于 iframe 中。我用我认为的解决方案编辑了问题和代码 sn-p，但它仍然无法正常工作。

标签： javascript dom getelementsbyname

【解决方案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>

【讨论】：