JavaScript Getelementbyid Based on a Partial String

Javascript getElementById based on a partial string

You can use the querySelector for that:

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

The selector means: get an element where the attribute [id] begins with the string "poll-".

^ matches the start

* matches any position

$ matches the end

jsfiddle

Using document.getElementById with partial ID name

Use document.querySelector() in conjunction with the CSS attribute selector ^= to match elements with IDs starting with the desired prefix:

function showIt() {
  document.querySelector('[id^="gatewayContainerstacks"]').style.visibility = "hidden";
}
setTimeout(showIt, 2500);

Here, I also passed the function showIt as such (and not as a string) to setTimeout. See MDN on setTimeout for the reasons.

javascript find an id that contains partial text

querySelectorAll with starts with

var elems = document.querySelectorAll("[id^='test_123']")console.log(elems.length);

<h1 id="test_123_abc">hello world</h1><h1 id="test_123_def">hello world</h1><h1 id="test_123_ghi">hello world</h1>

Is it possible to getElementsByClassName with partial name on Vanilla Javascript?

No, you can't use getElementsByClassName like that.

But you can use querySelectorAll with a CSS attribute selector:

document.querySelectorAll('[class$="sarasa"]')

will give you a collection of the DOM elements you want.

See an explanation of this selector here

Find all elements whose id begins with a common string

Using jQuery you can use the attr starts with selector:

var dates = $('[id^="createdOnid"]');

Using modern browsers, you can use the CSS3 attribute value begins with selector along with querySelectorAll:

var dates = document.querySelectorAll('[id^="createdOnID"]');

But for a fallback for old browsers (and without jQuery) you'll need:

var dateRE = /^createdOnid/;
var dates=[],els=document.getElementsByTagName('*');
for (var i=els.length;i--;) if (dateRE.test(els[i].id)) dates.push(els[i]);

JS querySelector + ID with dynamic values

Selects div with class question_answer when div has id=answer_a with an exact match.
document.querySelector("div.question_answer[id=answer_a]");

Selects div with class question_answer when div doesn't have id=answer_a with an exact match.
document.querySelector("div.question_answer:not([id=answer_a])");

document.querySelector will only selector first matched div. so if you have to work with all
unmatched with answer_a then you need to use document.querySelectorAll
and then you'll have to loop reach element and work with each element inside the loop.

Example

const elements = document.querySelectorAll(".box");
elements.forEach(function (element) {
    element.style.color = "green";
});

Get element by part of Name or ID

Your best bet is probably document.querySelectorAll, which you can use any CSS selector with, including an "attribute starts with" selector like input[id^="id_qtedje_"]. It's supported on all modern browsers, and also IE8:

var elements = document.querySelectorAll('input[id^="id_qtedje_"]');

If you wanted just the first match (rather than a list), you could use document.querySelector instead. It returns a reference to the first match in document order, or null if nothing matched.

Alternately, you could give the elements a class name, then use document.getElementsByClassName, but note that while getElementsByClassName was supported in old versions of Chrome and Firefox, IE8 doesn't have it, so it's not as well-supported as the more-useful querySelectorAll in the modern era.

var elements = document.getElementsByClassName("theClassName");

If you use any libraries (jQuery, MooTools, Closure, Prototype, etc.), they're likely to have a function you can use to look up elements by just about any CSS selector, filling the gaps in browser support with their own code. For instance, in jQuery, it's the $ (jQuery) function; in MooTools and Prototype, it's $$.

Can you getElementsByName if you only have partial name on javascript?

This is not possible. I'm assuming for the rest of this answer that the elements you're interested in are <td>s. If so, then you should be aware that the name attribute is not valid for <td> elements.

You will have to create a list of matching elements manually. If you decide to use the name attribute anyway (instead of, say, adding a class in the class attribute), something like the following will work:

var table = document.getElementById("your_table_id");
var tds = table.getElementsByTagName("td");
var matchingTds = [];

for (var i = 0, len = tds.length, td, tdName; i < len; ++i) {
    td = tds[i];
    tdName = td.getAttribute("name");
    if (tdName && tdName.indexOf("tdName_") == 0) {
        matchingTds.push(td);
    }
}

---

Related Topics