How do I go about selecting html elements that the id contains a given string? would querySelectorAll accomplish this? I know I can select classes, id's, attributes etc... with querySelectorAll,

Just not sure the correct approach for what I need to do

Here is some code that I would like to only get the elements where the id contains Home

<div id="ContactContainer>
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerWorkAreaCode" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerWorkExchange" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="4" maxlength="4" id="txtCustomerWorkSuffix" placeholder="9999">


    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerHomeAreaCode" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerHomeExchange" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="4" maxlength="4" id="txtCustomerHomeSuffix" placeholder="9999">


    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerMobileAreaCode" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerMobileExchange" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="4" maxlength="4" id="txtCustomerMobileSuffix" placeholder="9999">
</div>

How do I go about selecting html elements that the id contains a given string? would querySelectorAll accomplish this? I know I can select classes, id's, attributes etc... with querySelectorAll,

Just not sure the correct approach for what I need to do

Here is some code that I would like to only get the elements where the id contains Home

<div id="ContactContainer>
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerWorkAreaCode" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerWorkExchange" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="4" maxlength="4" id="txtCustomerWorkSuffix" placeholder="9999">


    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerHomeAreaCode" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerHomeExchange" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="4" maxlength="4" id="txtCustomerHomeSuffix" placeholder="9999">


    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerMobileAreaCode" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="1" maxlength="3" id="txtCustomerMobileExchange" placeholder="9999">
    <input class="form-control input-sm clear" is-required="false" validate-number="" minlength="4" maxlength="4" id="txtCustomerMobileSuffix" placeholder="9999">
</div>

• javascript
• ecmascript-6

• 2 imo you'd be better off adding classes for that. – Pointy Commented Feb 11, 2020 at 16:32
• Get the parent container with document.querySelectorAll('#ContactContainer'), then get the children of this element, iterate through the children and forEach element if the Id is equal to what you want then push it to an array or do whatever you want with it. – Kevin Hernandez Commented Feb 11, 2020 at 16:34
• 1 This might help: stackoverflow.com/questions/12155833/… – vhbazan Commented Feb 11, 2020 at 16:34

1 Answer 1

You can use wildcard selectors as shown below to match a partial attribute tag, including id.

document.querySelector('[id*="MobileAreaCode"]');

If you want more than one element to be returned use querySelectorAll.

document.querySelectorAll('[id*="Mobile"]');