基于部分字符串的Javascript getElementById

IT技术 javascript getelementbyid
2021-02-03 13:01:32

我需要获取元素的 ID,但该值是动态的,只有它的开头始终相同。

这是代码的片段。

<form class="form-poll" id="poll-1225962377536" action="/cs/Satellite">

ID始终以poll-数字开头,然后数字是动态的。

如何仅使用 JavaScript 而不是 jQuery 获取 ID?

6个回答

可以使用querySelector为:

document.querySelector('[id^="poll-"]').id;

选择器的意思是:获取属性[id]以字符串开头的元素"poll-"

^匹配开始
*匹配任何位置
$匹配结束

提琴手

@DavePotts 使用[id^=user-][id$=-image]:)
2021-03-18 13:01:32
@JoeL^匹配开始,$匹配结束并*匹配任何位置。在您的情况下,它将是id$="dynamic_constant".
2021-04-02 13:01:32
querySelectorAll 是很棒的。除了document.querySelectorAll('[id^="poll-"]')返回一个列表。我们需要迭代列表来获取 ids 而不是使用document.querySelectorAll('[id^="poll-"]').id.
2021-04-05 13:01:32
如果它略有不同,因为您知道动态值的 END 是多少?在我的场景中,它是 id="dynamic_constant"?
2021-04-11 13:01:32
对不起,我应该在我的例子中更清楚。我将如何选择 id 以“user-”开头并以“-image”结尾的所有元素,但中间的数字可能会有所不同。
2021-04-11 13:01:32

试试这个。

function getElementsByIdStartsWith(container, selectorTag, prefix) {
    var items = [];
    var myPosts = document.getElementById(container).getElementsByTagName(selectorTag);
    for (var i = 0; i < myPosts.length; i++) {
        //omitting undefined null check for brevity
        if (myPosts[i].id.lastIndexOf(prefix, 0) === 0) {
            items.push(myPosts[i]);
        }
    }
    return items;
}

示例 HTML 标记。

<div id="posts">
    <div id="post-1">post 1</div>
    <div id="post-12">post 12</div>
    <div id="post-123">post 123</div>
    <div id="pst-123">post 123</div>
</div>

叫它像

var postedOnes = getElementsByIdStartsWith("posts", "div", "post-");

演示在这里:http : //jsfiddle.net/naveen/P4cFu/

querySelectorAll 与现代枚举

polls = document.querySelectorAll('[id ^= "poll-"]');
Array.prototype.forEach.call(polls, callback);

function callback(element, iterator) {
    console.log(iterator, element.id);
}

第一行选择所有以字符串id开头的元素第二行唤起了枚举和回调函数。^=poll-

鉴于您想要的是仅根据前缀确定元素的完整 id,您将不得不搜索整个 DOM(或者至少,如果您知道一些,则搜索整个子树始终保证包含目标元素的元素)。您可以使用以下方法执行此操作:

function findChildWithIdLike(node, prefix) {
    if (node && node.id && node.id.indexOf(prefix) == 0) {
        //match found
        return node;
    }

    //no match, check child nodes
    for (var index = 0; index < node.childNodes.length; index++) {
        var child = node.childNodes[index];
        var childResult = findChildWithIdLike(child, prefix);
        if (childResult) {
            return childResult;
        }
    }
};

这是一个例子:http : //jsfiddle.net/xwqKh/

请注意,像您正在使用的那些动态元素 ID 通常用于保证单个页面上元素 ID 的唯一性。这意味着可能有多个元素共享相同的前缀。可能您想全部找到它们。

如果您想找到所有具有给定前缀的元素,而不仅仅是第一个,您可以使用类似于此处演示的内容:http : //jsfiddle.net/xwqKh/1/

我不完全确定我知道你在问什么,但你可以使用字符串函数来创建你正在寻找的实际 ID。

var base = "common";
var num = 3;

var o = document.getElementById(base + num);  // will find id="common3"

如果您不知道实际 ID,则无法使用 getElementById 查找对象,您必须通过其他方式找到它(按类名、按标签类型、按属性、按父项、按子项、等等...)。

现在你终于给了我们一些 HTML,你可以使用这个普通的 JS 来查找 ID 以“poll-”开头的所有表单元素:

// get a list of all form objects that have the right type of ID
function findPollForms() {
    var list = getElementsByTagName("form");
    var results = [];
    for (var i = 0; i < list.length; i++) {
        var id = list[i].id;
        if (id && id.search(/^poll-/) != -1) {
            results.push(list[i]);
        }
    }
    return(results);
}

// return the ID of the first form object that has the right type of ID
function findFirstPollFormID() {
    var list = getElementsByTagName("form");
    var results = [];
    for (var i = 0; i < list.length; i++) {
        var id = list[i].id;
        if (id && id.search(/^poll-/) != -1) {
            return(id);
        }
    }
    return(null);
}
问题是我只知道基数,但我不知道 num 值。
2021-03-17 13:01:32
好的,现在您已经展示了一些 HTML,我添加了两个不同的函数来查找这些类型的表单元素。
2021-03-17 13:01:32
如果您不打算使用更高级的选择器引擎,那么标签、ID 和类的结构就是您所拥有的全部。如果您不想共享并且不会使用选择器引擎,那么我们就处于死胡同。如果您只想告诉我们它是什么类型的标签,我们可以查看所有这些标签以进行部分 ID 匹配。
2021-04-05 13:01:32
我只需要能够使用 id 以 'poll-' 开头的元素设置一个变量作为它的值。<form class="form-poll" id="poll-1225962377536" action="/cs/Satellite" target="_blank">
2021-04-10 13:01:32
然后,您不能在没有整个 ID 名称的情况下使用 getElementById。如果您发布实际的 HTML,我们可以帮助您采用不同的策略。在您的新示例中,您可以对以“post-”开头的 ID 使用 CSS3 策略,但只有少数浏览器可以使用纯 JS/浏览器(CSS3 选择器引擎支持)执行此操作。在 jQuery、Sizzle、YUI3 等中使用选择器引擎会好得多......
2021-04-13 13:01:32