javascript - 如何选择id包含的html元素

Question

如何选择 id 包含给定字符串的 html 元素？querySelectorAll 会做到这一点吗？我知道我可以使用 querySelectorAll 选择类、id、属性等，

只是不确定我需要做什么的正确方法

这是一些代码，我只想获取 id 包含 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>

标签： javascriptecmascript-6

Answer 1

您可以使用如下所示的通配符选择器来匹配部分属性标记，包括 id。

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

如果要返回多个元素，请使用 querySelectorAll。

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