Help me implementing addClassName in my JavaScript project the right way - javascript

I find myself often needing addClassName and removeClassName functions for Elements. However, I dare not to extend the native Element due to potential collisions. So, now I am wondering what to do.
I took a look at ExtJS, and it achieves this like:
var element = document.getElementById('...');
var elem = new Ext.Element(element);
elem.addClass('something');
I like the idea of not extending the native Element here, but I do not really like the idea of wrapping the element so hard over a custom object, because now I can't do several things like setAttribute easily, for example:
var element = document.getElementById('...');
var elem = new Ext.Element(element);
elem.addClass('something');
elem.setAttribute('src', '...'); // Fails
However, I could do:
var element = document.getElementById('...');
element.setAttribute('src', '...');
var elem = new Ext.Element(element);
elem.addClass('something');
but to me this does not look really nice. It looks a bit complex instead.
Are there any other alternative ways I could use besides wrapping the element around my own object that offers me these cool methods?

Just check if there's already an implementation defined. I'm pretty sure addClassName is not going to have a different signature than you have at the moment.
if (!node.prototype.addClassName) {
node.prototype.addClassName = function addClassName(name) {
// your code
}
}

Related

Concisely removing a DOM element if it exists?

I'm currently writing a browser script (for use in Tampermonkey/Greasemonkey) (and learning JS in the process!), and I have a lot of occurrences like this:
let btn = document.querySelector("#unwantedButton");
if (btn) {
btn.parentNode.removeChild(btn);
}
That is, I want a certain element to be removed, if it exists.
Is there any way to write this more concisely and elegantly? That would save me a lot of lines in this project, and most importantly, teach me some JS best practice. :-)
Thank you for helping a JS noob!
Rather than rewrite the code in several places, you can put it in a function (and use remove():
function removeIfExists (selector) {
var x = document.querySelector(selector)
if (x) x.remove()
}
Then you can call it all over the place:
removeIfExists("#some-unwanted-element")
You can also use it if you have a list of known elements you don't want:
var badElements = [ ".foo", "#bar", "#etc" ]
badElements.forEach(removeIfExists)
You can make it as a function for multiple elements
const removeElements = refs => document.querySelectorAll(refs)
.forEach(el=>{if(!!el) el.remove()})
usage :
removeElements('#unwantedButton')
or
removeElements('.foo, #bar, #etc')

javascript: save characters/digits without libraries

I use a lot of the following expressions in my code:
document.
.getElementsBy...
.querySelector...
I need to save characters without using any libraries. That can be done by
var d = document;
Then, instead of document. I can write d. now.
I am wondering if there is a simple way to do the same thing for methods
.getElementsBy... and .querySelector....
Since these have a variable term, I cannot put the entire thing into a
variable, like var q = .querySelector(".class"), because the .class
changes almost every time.
You can create functions to avoid adding properties to the document object as shortcut if you don't want to.
function gEBI(d,id)
{
return d.getElementById(id);
}
function qS(d,s)
{
return d.querySelector(s);
}
var d = document;
var ele1 = gEBI(d,"yourID");
var ele2 = qS(d,".class");
You can make your own shortcut functions-references manually.
document.gEBI = document.getElementById;
document.gEBI(id);
But it's not a good practice to make such shortcuts.

JavaScript Web APIs vs jQuery for DOM selection/manipulation

What are the best practices regarding DOM traversal/selection/manipulation? If I'm targeting the same group of elements more than once to do something, should I stick to only one way of selecting them?
For example:
var slidesHTML = document.getElementsByClassName("slide"); //HTMLCollection
var slidesNODE = document.querySelectorAll("slide"); //NodeList
var slidesJQUERY = $(".slide"); //jQuery object
Right now, I'm targeting these elements when I want to call a jQuery method and targeting them again when I want to call a NodeList method, and again when I want to call a HTMLCollection method etc.
This seems redundant, which feels like bad practice.
However, if I select group of elements once I will have to rewrite all the other methods I want to call from scratch, which seems like overkill.
While a better approach might be to stick to one way of selecting them, the lack of flexibility might not work well for you.
You could instead just write an agnostic element getter to get the elements and return them in the format you want:
var getElements = function getElements(selector, format) {
var elements;
if (format.toLowerCase() === "htmlcollection") {
elements = document.getElementsByClassName(selector); //HTMLCollection
}
if (format.toLowerCase() === "nodelist") {
elements = document.querySelectorAll(selector); //NodeList
}
if (format.toLowerCase() === "jquery") {
elements = $(selector); //jQuery object
}
return elements;
};
...
// meanwhile, in another part of the code...
var slidesHTML = getElements("slide", "HTMLCollection");
var slidesNODE = getElements(".slide", "NodeList");
var slidesJQUERY = getElements(".slide", "jQuery");
Personally speaking, I find the HTMLCollection and NodeList collections to be of little value in most cases, so for projects where I'm not using jQuery (or a similar library), I just use the following:
var elements = Array.prototype.slice.call(document.querySelectorAll(selector));
This approach allows me the flexibility (and specificity) of CSS Selector Syntax to get DOM elements and pulls them back into an Array of elements where it is trivial to iterate over them or perform other operations to them.

"sandbox" JS object methods

I created a function to provide a framework of methods that gets a applied to an existing HTML element. It basically looks like this:
var vd = function(tgt){
this.init = function(){
var html_structure = '\
...\
';
tgt.html(html_structure);
this.vdID = createHash();
tgt.attr('data-vd-id', this.vdID);
};
...
this.init();
}
and gets instanciated like this:
ovd = new vd($('#container'));
In the middle of development I decided I want to "sandbox" (quotes because it doesn't relate to the widespread meaning of sandboxing in this case) the whole functionality of all methods and confine them to the element provided as tgt as there are several instances within a page whose event handlers must not collide. To avoid having to redundantly create object references to all participating elements inside of tgt I added a new function:
this.vdq = function(sel, get_sel) {
var fullsel = '[data-vd-id="' + this.vdID + '"] ' + sel;
return (get_sel == true) ? fullsel : $(fullsel);
};
Instead of selecting elements by $(selector) I do it by this.vdq(selector). However I'm aware that this is neither an elegant nor an efficient (in terms of performance => DOM parsing) solution, especially since I have a rather large amount of event listeners that also rely on this functionality.
My questions
Is there a common name/description for what I'm trying to accomplish here?
What is common practice when dealing with this requirement?
Am I missing an fast and easy solution here?
Appreciate any input!

Unique element ID, even if element doesn't have one

I'm writing a GreaseMonkey script where I'm iterating through a bunch of elements. For each element, I need a string ID that I can use to reference that element later. The element itself doesn't have an id attribute, and I can't modify the original document to give it one (although I can make DOM changes in my script). I can't store the references in my script because when I need them, the GreaseMonkey script itself will have gone out of scope. Is there some way to get at an "internal" ID that the browser uses, for example? A Firefox-only solution is fine; a cross-browser solution that could be applied in other scenarios would be awesome.
Edit:
If the GreaseMonkey script is out of scope, how are you referencing the elements later? They GreaseMonkey script is adding events to DOM objects. I can't store the references in an array or some other similar mechanism because when the event fires, the array will be gone because the GreaseMonkey script will have gone out of scope. So the event needs some way to know about the element reference that the script had when the event was attached. And the element in question is not the one to which it is attached.
Can't you just use a custom property on the element? Yes, but the problem is on the lookup. I'd have to resort to iterating through all the elements looking for the one that has that custom property set to the desired id. That would work, sure, but in large documents it could be very time consuming. I'm looking for something where the browser can do the lookup grunt work.
Wait, can you or can you not modify the document? I can't modify the source document, but I can make DOM changes in the script. I'll clarify in the question.
Can you not use closures? Closuses did turn out to work, although I initially thought they wouldn't. See my later post.
It sounds like the answer to the question: "Is there some internal browser ID I could use?" is "No."
The answer is no, there isn't an internal id you can access. Opera and IE (maybe Safari?) support .sourceIndex (which changes if DOM does) but Firefox has nothing of this sort.
You can simulate source-index by generating Xpath to a given node or finding the index of the node from document.getElementsByTagName('*') which will always return elements in source order.
All of this requires a completely static file of course. Changes to DOM will break the lookup.
What I don't understand is how you can loose references to nodes but not to (theoretical) internal id's? Either closures and assignments work or they don't. Or am I missing something?
Closure is the way to go. This way you'll have exact reference to the element that even will survive some shuffling of DOM.
Example for those who don't know closures:
var saved_element = findThatDOMNode();
document.body.onclick = function()
{
alert(saved_element); // it's still there!
}
If you had to store it in a cookie, then I recommend computing XPath for it (e.g. walk up the DOM counting previous siblings until you find element with an ID and you'll end up with something like [#id=foo]/div[4]/p[2]/a).
XPointer is W3C's solution to that problem.
A bit confused by the wording of your question - you say that you "need a string ID that [you] can use to reference that element later, " but that you "can't store the references in [your] script because when [you] need them, the GreaseMonkey script itself will have gone out of scope."
If the script will have gone out of scope, then how are you referencing them later?!
I am going to ignore the fact that I am confused by what you are getting at and tell you that I write Greasemonkey scripts quite often and can modify the DOM elements I access to give them an ID property. This is code you can use to get a pseudo-unique value for temporary use:
var PseudoGuid = new (function() {
this.empty = "00000000-0000-0000-0000-000000000000";
this.GetNew = function() {
var fourChars = function() {
return (((1 + Math.random()) * 0x10000)|0).toString(16).substring(1).toUpperCase();
}
return (fourChars() + fourChars() + "-" + fourChars() + "-" + fourChars() + "-" + fourChars() + "-" + fourChars() + fourChars() + fourChars());
};
})();
// usage example:
var tempId = PseudoGuid.GetNew();
someDomElement.id = tempId;
That works for me, I just tested it in a Greasemonkey script myself.
UPDATE: Closures are the way to go - personally, as a hard-core JavaScript developer, I don't know how you didn't think of those immediately. :)
myDomElement; // some DOM element we want later reference to
someOtherDomElement.addEventListener("click", function(e) {
// because of the closure, here we have a reference to myDomElement
doSomething(myDomElement);
}, false);
Now, myDomElement is one of the elements you apparently, from your description, already have around (since you were thinking of adding an ID to it, or whatever).
Maybe if you post an example of what you are trying to do, it would be easier to help you, assuming this doesn't.
UPDATE: Closures are indeed the answer. So after fiddling with it some more, I figured out why closures were initially problematic and how to fix it. The tricky thing with a closure is you have to be careful when iterating through the elements not to end up with all of your closures referencing the same element. For example, this doesn't work:
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var button = document.createElement("button");
button.addEventListener("click", function(ev) {
// do something with element here
}, false)
}
But this does:
var buildListener = function(element) {
return function(ev) {
// do something with event here
};
};
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var button = document.createElement("button");
button.addEventListener("click", buildListener(element), false)
}
Anyway, I decided not to select one answer because the question had two answers: 1) No, there are no internal IDs you can use; 2) you should use closures for this. So I simply upvoted the first people to say whether there were internal IDs or who recommended generating IDs, plus anyone who mentioned closures. Thanks for the help!
If you can write to the DOM (I'm sure you can). I would solve this like this:
Have a function return or generate an ID:
//(function () {
var idCounter = new Date().getTime();
function getId( node ) {
return (node.id) ? node.id : (node.id = 'tempIdPrefix_' + idCounter++ );
}
//})();
Use this to get ID's as needed:
var n = document.getElementById('someid');
getId(n); // returns "someid"
var n = document.getElementsByTagName('div')[1];
getId(n); // returns "tempIdPrefix_1224697942198"
This way you don't need to worry about what the HTML looks like when the server hands it to you.
If you're not modifying the DOM you can get them all by indexed order:
(Prototype example)
myNodes = document.body.descendants()
alert(document.body.descendants()[1].innerHTML)
You could loop through all of the nodes and give them a unique className that you could later select easily.
You can set the id attribute to a computed value. There is a function in the prototype library that can do this for you.
http://www.prototypejs.org/api/element/identify
My favorite javascript library is jQuery. Unfortunately jQuery does not have a function like identify. However, you can still set the id attribute to a value that you generate on your own.
http://docs.jquery.com/Attributes/attr#keyfn
Here is a partial snippet from jQuery docs that sets id for divs based on the position in the page:
$(document).ready(function(){
$("div").attr("id", function (arr) {
return "div-id" + arr;
});
});
You can generate a stable, unique identifier for any given node in a DOM with the following function:
function getUniqueKeyForNode (targetNode) {
const pieces = ['doc'];
let node = targetNode;
while (node && node.parentNode) {
pieces.push(Array.prototype.indexOf.call(node.parentNode.childNodes, node));
node = node.parentNode
}
return pieces.reverse().join('/');
}
This will create identifiers such as doc/0, doc/0/0, doc/0/1, doc/0/1/0, doc/0/1/1 for a structure like this one:
<div>
<div />
<div>
<div />
<div />
</div>
</div>
There are also a few optimisations and changes you can make, for example:
In the while loop, break when that node has an attribute you know to be unique, for example #id
Not reverse() the pieces, currently it is just there to look more like the DOM structure the ID's are generated from
Not include the first piece doc if you don't need an identifier for the document node
Save the identifier on the node in some way, and reuse that value for child nodes to avoid having to traverse all the way up the tree again.
If you're writing these identifiers back to XML, use another concatenation character if the attribute you're writing is restricted.
Use mouse and/or positional properties of the element to generate a unique ID.
In javascript, you could attach a custom ID field to the node
if(node.id) {
node.myId = node.id;
} else {
node.myId = createId();
}
// store myId
It's a bit of hack, but it'll give each and every node an id you can use. Of course, document.getElementById() won't pay attention to it.
You can also use pguid (page-unique identifier) for unique identifier generation:
pguid = b9j.pguid.next() // A unique id (suitable for a DOM element)
// is generated
// Something like "b9j-pguid-20a9ff-0"
...
pguid = b9j.pguid.next() // Another unique one... "b9j-pguid-20a9ff-1"
// Build a custom generator
var sequence = new b9j.pguid.Sequence({ namespace: "frobozz" })
pguid = sequence.next() "frobozz-c861e1-0"
http://appengine.bravo9.com/b9j/documentation/pguid.html
I 'think' I've just solved a problem similar to this. However, I'm using jQuery in a browser DOM environment.
var objA = $("selector to some dom element");
var objB = $("selector to some other dom element");
if( objA[0] === objB[0]) {
//GREAT! the two objects point to exactly the same dom node
}
OK, there is no ID associated to DOM element automatically.
DOM has a hierarchycal structure of elements which is the main information.
From this perspective, you can associate data to DOM elements with jQuery or jQLite. It can solve some issues when you have to bind custom data to elements.

Categories

Resources