We Keep Coding

GetElementById Alternative for more options

Okay, I am new to JavaScript, so I really need help with this.
I have a script, which looks like this:
function Change(){
var image = document.getElementById('id-img');
image.src = "somenotimportantlink" + document.getElementById('id-a1').title;
var link = document.getElementById('id-a2');
link.href="somenotimportantlink"+(document.getElementById('id-a1').title)+"/index.html";
}
My problem is that there are multiple tags that want to use this function on, but I can only use id="id-a1" on one tag, so I need an alternative for getElementById, one that would allow me to use multiple tags.

If you really need to select the elements by id, you can use querySelectorAll.
document.querySelectorAll("[id*='id-a']") will match all elements with an id containing 'id-a'
document.querySelectorAll("[id^='id-a']") matches all elements with an id starting with 'id-a'.
However, I'd consider using a class instead of an id:
document.querySelectorAll('.someClass')
Make sure to use querySelectorAll instead of querySelector to get all the matching elements.
More info on MDN

There's various ways in js to get elements, but if your want to use css selectors then you can use document.querySelectorAll(".myclass");
EDIT: sorry I goofed... use querySelectorAll

Most people use jQuery to do this, but you can also do it in JavaScript. The catch is, it only works on modern browsers.
JavaScript Method
You would need to grab a NodeList of all the objects with a query selector and iterate over every item of that NodeList.
function myStuff() {
var nodeList = document.querySelectorAll('.a');
for (var i = 0, length = nodeList.length; i < length; i++) {
nodeList[i].href = "somenotimportantlink"+(i.title)+"/index.html";
}
}
jQuery Method
First you'd want to have jQuery somewhere in your HTML, I prefer using a CDN but a normal file is alright.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
Once you have the jQuery file ready, you can select all classes by:
$('.a')
or if you want to select all <a> tags:
$('a')

Select tags that starts with "x-" in jQuery

How can I select nodes that begin with a "x-" tag name, here is an hierarchy DOM tree example:
<div>
<x-tab>
<div></div>
<div>
<x-map></x-map>
</div>
</x-tab>
</div>
<x-footer></x-footer>
jQuery does not allow me to query $('x-*'), is there any way that I could achieve this?

The below is just working fine. Though I am not sure about performance as I am using regex.
$('body *').filter(function(){
return /^x-/i.test(this.nodeName);
}).each(function(){
console.log(this.nodeName);
});
Working fiddle
PS: In above sample, I am considering body tag as parent element.
UPDATE :
After checking Mohamed Meligy's post, It seems regex is faster than string manipulation in this condition. and It could become more faster (or same) if we use find. Something like this:
$('body').find('*').filter(function(){
return /^x-/i.test(this.nodeName);
}).each(function(){
console.log(this.nodeName);
});
jsperf test
UPDATE 2:
If you want to search in document then you can do the below which is fastest:
$(Array.prototype.slice.call(document.all)).filter(function () {
return /^x-/i.test(this.nodeName);
}).each(function(){
console.log(this.nodeName);
});
jsperf test

There is no native way to do this, it has worst performance, so, just do it yourself.
Example:
var results = $("div").find("*").filter(function(){
return /^x\-/i.test(this.nodeName);
});
Full example:
http://jsfiddle.net/6b8YY/3/
Notes: (Updated, see comments)
If you are wondering why I use this way for checking tag name, see:
JavaScript: case-insensitive search
and see comments as well.
Also, if you are wondering about the find method instead of adding to selector, since selectors are matched from right not from left, it may be better to separate the selector. I could also do this:
$("*", $("div")). Preferably though instead of just div add an ID or something to it so that parent match is quick.
In the comments you'll find a proof that it's not faster. This applies to very simple documents though I believe, where the cost of creating a jQuery object is higher than the cost of searching all DOM elements. In realistic page sizes though this will not be the case.
Update:
I also really like Teifi's answer. You can do it in one place and then reuse it everywhere. For example, let me mix my way with his:
// In some shared libraries location:
$.extend($.expr[':'], {
x : function(e) {
return /^x\-/i.test(this.nodeName);
}
});
// Then you can use it like:
$(function(){
// One way
var results = $("div").find(":x");
// But even nicer, you can mix with other selectors
// Say you want to get <a> tags directly inside x-* tags inside <section>
var anchors = $("section :x > a");
// Another example to show the power, say using a class name with it:
var highlightedResults = $(":x.highlight");
// Note I made the CSS class right most to be matched first for speed
});
It's the same performance hit, but more convenient API.

It might not be efficient, but consider it as a last option if you do not get any answer.
Try adding a custom attribute to these tags. What i mean is when you add a tag for eg. <x-tag>, add a custom attribute with it and assign it the same value as the tag, so the html looks like <x-tag CustAttr="x-tag">.
Now to get tags starting with x-, you can use the following jQuery code:
$("[CustAttr^=x-]")
and you will get all the tags that start with x-

custom jquery selector
jQuery(function($) {
$.extend($.expr[':'], {
X : function(e) {
return /^x-/i.test(e.tagName);
}
});
});
than, use $(":X") or $("*:X") to select your nodes.

Although this does not answer the question directly it could provide a solution, by "defining" the tags in the selector you can get all of that type?
$('x-tab, x-map, x-footer')

Workaround: if you want this thing more than once, it might be a lot more efficient to add a class based on the tag - which you only do once at the beginning, and then you filter for the tag the trivial way.
What I mean is,
function addTagMarks() {
// call when the document is ready, or when you have new tags
var prefix = "tag--"; // choose a prefix that avoids collision
var newbies = $("*").not("[class^='"+prefix+"']"); // skip what's done already
newbies.each(function() {
var tagName = $(this).prop("tagName").toLowerCase();
$(this).addClass(prefix + tagName);
});
}
After this, you can do a $("[class^='tag--x-']") or the same thing with querySelectorAll and it will be reasonably fast.

See if this works!
function getXNodes() {
var regex = /x-/, i = 0, totalnodes = [];
while (i !== document.all.length) {
if (regex.test(document.all[i].nodeName)) {
totalnodes.push(document.all[i]);
}
i++;
}
return totalnodes;
}

Demo Fiddle
var i=0;
for(i=0; i< document.all.length; i++){
if(document.all[i].nodeName.toLowerCase().indexOf('x-') !== -1){
$(document.all[i].nodeName.toLowerCase()).addClass('test');
}
}

Try this
var test = $('[x-]');
if(test)
alert('eureka!');
Basically jQuery selector works like CSS selector.
Read jQuery selector API here.

How to call jquery's .find in a lazy fashion?

When using jquery to locate a set of elements in an XML DOM structure;
Using .find with a CSS query will result in a result that can be iterated, however jquery will return all the results at that time, which is slow and pauses my UI.
How do I instead iterate over the results in a lazy fashion?
I observed that there is a .first() method, however I can't find .next() in the documentation, what am I missing?

Yes there is a next() and a prev() you can use to go to next or previous sibling in the DOM structure.

My best suggestion is to contain your searches. Never run global queries. If at all possible, start your search from an element that you can retrieve by ID (to limit the number of nodes to traverse)
For example instead of the following
var infoList = $("a.query span.info")
Use
var container = $('#myCt');
var infoList = container.find('a.query span.info');
// OR more simply (but I'm not sure jQuery optimizes the query)
var infoList = container.find('#myCt a.query span.info')

$(".class").each(function() {
//do code here
});

Javascript Regex and getElementByID

I'm trying to search for all elements in a web page with a certain regex pattern.
I'm failing to understand how to utilize Javascript's regex object for this task. My plan was to collect all elements with a jQuery selector
$('div[id*="Prefix_"]');
Then further match the element ID in the collection with this
var pattern = /Prefix_/ + [0 - 9]+ + /_Suffix$/;
//Then somehow match it.
//If successful, modify the element in some way, then move onto next element.
An example ID would be "Prefix_25412_Suffix". Only the 5 digit number changes.
This looks terrible and probably doesn't work:
1) I'm not sure if I can store all of what jQuery's returned into a collection and then iterate through it. Is this possible?? If I could I could proceed with step two. But then...
2) What function would I be using for step 2? The regex examples all use String.match method. I don't believe something like element.id.match(); is valid?
Is there an elegant way to run through the elements identified with a specific regex and work with them?
Something in the vein of C#
foreach (element e in
ElementsCollectedFromIDRegexMatch) { //do stuff }

Just use the "filter" function:
$('div[id*=Prefix_]').filter(function() {
return /^Prefix_\d+_Suffix$/.test(this.id);
}).each(function() {
// whatever you need to do here
// "this" will refer to each element to be processed
});
Using what jQuery returns as a collection and iterating through it is, in fact, the fundamental point of the whole library, so yes you can do that.
edit — a comment makes me realize that the initial selector with the "id" test is probably not useful; you could just operate on all the <div> elements on the page to start with, and let your own filtering pluck out the ones you really want.

You can use filter function. i.e:
$('div[id*="Prefix_"]').filter(function(){
return this.id.match(/Prefix_\d+_Suffix/);
});

You could do something like
$('div[id*="Prefix_"]').each(function(){
if($(this).attr('id').search(/do your regex here/) != -1) {
//change the dom element here
}
});

You could try using the filter method, to do something like this...
var pattern = /Prefix_/ + [0 - 9]+ + /_Suffix$/;
$('div[id*="Prefix_"]').filter(function(index)
{
return $(this).attr("id").search(pattern) != -1;
}
);
... and return a jQuery collection that contains all (if any) of the elements which match your spec.
Can't be sure of the exact syntax, off the top of my head, but this should at least point you in the right direction

check if cached jquery object is still in DOM

Does anyone know how to tell if a cached jQuery object has gone stale, e.g. is no longer in the DOM? For example:
var $cached_elem = $('.the_button');
// .. and then later
$cached_elem.text('updating...');
I have recently encountered the situation where the $cached_elem is removed from the DOM due to some other event. So what I would like to do:
if ( $cache_elem.isStillInDOM() ){
// now do time consuming stuff with $cached_elem in DOM
}
Before anyone offers, I have already employed this, which is a fair analog for what I'm trying to do:
if ( $cached_elem.is(':visible') === true ){ ... }
However, this is not really the same thing and could fail in some cases.
So can anyone think of a simple way to check directly if a cached jQuery object is "stale"? I may be forced to write a plugin if not ...

if($elem.closest('body').length > 0) seems like it could do the trick.
$(function() {
var $button = $(".the_button");
alert (isStale($button));
$button.remove();
alert (isStale($button));
});
function isStale($elem)
{
return $elem.closest("body").length > 0;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="the_button">Hello World</span>
</div>
Edit: Updated in response to Yi Jiang's comment so that it will return correctly if its parent element is removed
Edit 2: Updated in response to lonesomeday's comment - changed parents() to 'closest()` for performance improvement

The native document.contains() method should be faster than jQuery to determine if a cached jQuery element exists in the DOM.
if (document.contains($cached_elem[0])) {
// Element is still in the DOM
}

If the selector hasn't changed, just reinitialize it:
var $cached_elem = $('.the_button');
// code that might remove some elements of $cached_elem
$cached_elem = $('.the_button');
If you want to avoid duplicating the selector string, use the selector property of the original jQuery object:
var $cached_elem = $('.the_button');
// code that might remove some elements of $cached_elem
$cached_elem = $($cached_elem.selector);
if ($cached_elem.length) {
// element still exists
}

In a slightly variant case, one can directly compare the native DOM element wrapped by the jQuery object $cached_elem.
$cached_elem[0] === $($cached_elem.selector)[0]
Besides checking if the $cached_elem is still in DOM, this can tell you if it's still the original DOM element, rather than a re-created one with same attributes after certain/partial page refresh.