The id must be unique. If you use the same id to give the same CSS style to several elements, you should use classes instead.
Here is some more information :
The Element.id property represents the identifier of the element,
reflecting the global id attribute.
must be a single document, and is often used to
retrieve the item using getElementById . Other common uses of id
include the use of ID elements as a selector when
is styling the document with CSS.
The translation is not too good. In English it says "It must be unique in a document" which means "it must be unique in a document".
Edit: I'll see if with this example I can illustrate you in searches based on other attributes other than id . I will use JavaScript XPath to facilitate the explanation.
function pruebas() {
console.log("Elementos con id 'dropdown-input': " +
document.evaluate('count(//*[@id="dropdown-input"])', document, null, XPathResult.ANY_TYPE, null).numberValue);
console.log("Elementos con placeholder 'Currency': " +
document.evaluate('count(//*[@placeholder="Currency"])', document, null, XPathResult.ANY_TYPE, null).numberValue);
var nodos = document.evaluate('//*[@id="dropdown-input"]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0 ; i < nodos.snapshotLength; i++) {
console.log("Placeholder del id 'dropdown-input' número " + i + ": " +
nodos.snapshotItem(i).getAttribute('placeholder'));
}
}
window.onload = pruebas;
<input id="dropdown-input"
class="form-control ng-pristine
ng-untouched ng-valid ng-scope ng-empty ng-valid-maxlength"
translate=""
translate-attr-placeholder="form.COUNTRY"
ng-model="dropdown.selectedText"
ng-click="dropdown.opened = true"
ng-change="dropdown.opened = true"
ng-focus="dropdown.opened = true"
ng-keydown="$event.keyCode == 27 ? dropdown.opened = false : 0"
ng-class="{'ng-invalid': filteredList.length == 0 && list.length > 0}"
maxlength=""
aria-invalid="false"
placeholder="Country"
style="background-image: url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+
Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 16px 18px;
background-position: 98% 50%;"
/>
<input id="dropdown-input"
class="form-control ng-pristine
ng-untouched ng-valid ng-scope ng-empty ng-valid-maxlength"
translate=""
translate-attr-placeholder="form.CURRENCY"
ng-model="dropdown.selectedText"
ng-click="dropdown.opened = true"
ng-change="dropdown.opened = true"
ng-focus="dropdown.opened = true"
ng-keydown="$event.keyCode == 27 ? dropdown.opened = false : 0"
ng-class="{'ng-invalid': filteredList.length == 0 && list.length > 0}"
maxlength=""
aria-invalid="false"
placeholder="Currency"
style="background-image: url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+
Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 16px 18px;
background-position: 98% 50%;"
/>
As you can see, the search XPath //*[@id="dropdown-input"] returns two results, but the search //*[@placeholder="Currency"] only returns one.
I have added a third example in which I search for all the elements with //*[@id="dropdown-input"] and I list the content of their placeholder . As you can see you can do a search and return more than one item as a result. Simply go through the elements to get your data.
