基于部分字符串的Javascript getElementById

Question

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

这里有一段代码。

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

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

如何仅使用JavaScript而不使用jQuery获得ID？

Answer 1

您为此can use querySelector：

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

选择器的意思是：获取一个元素，其中属性[id]以字符串"poll-"开头。

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

jsfiddle

Answer 2

尝试一下。

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/

Answer 3

鉴于您想要的是仅基于前缀来确定元素的完整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通常用于保证单个页面上元素ID的唯一性）。这意味着可能存在多个共享相同前缀的元素。可能您想找到所有这些。

如果要查找所有具有给定前缀的元素，而不仅仅是第一个，则可以使用此处显示的内容：http://jsfiddle.net/xwqKh/1/

Answer 4

我不确定我是否知道您的要求，但是您可以使用字符串函数来创建所需的实际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);
}

Answer 5

querySelectorAll具有现代枚举

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

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

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

Answer 6

[您可能必须给它一个常量类并调用getElementsByClassName，或者可能只是使用getElementsByTagName，然后遍历结果并检查名称。

我建议您看一下潜在的问题，并找出可以提前知道ID的方式。

也许您发布了更多有关为什么这样做的信息，我们可以找到更好的选择。

Answer 7

您使用id属性获取ID，然后使用substr方法删除其第一部分，然后选择parseInt将其转换为数字：

var id = theElement.id.substr(5);

或：

var id = parseInt(theElement.id.substr(5));

Answer 8

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

ID总是以'post-'开头，然后数字是动态的。

请检查您的ID名称，“民意调查”和“帖子”有很大不同。

已经回答，您可以使用querySelector：

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

但是如果您继续查询“ post”，[querySelector将找不到“ poll”：'[id^="post-"]'