Userscripts, going through elements and testing attributes

Question

I'm kinda new to Userscripts and JavaScript in general, and I'm pretty lost.

Basically what I want to do is go through elements I got by using getElementsByClassName, get the data in the "name" attribute, see if it contains something and if so, change the class name to something else.

In pseudo-ish-code:

items = getElementsByClassName("item1");

for each item in items {
    if(item.attribute("name").contains("Hi"))
        item.attribute("class") = "item2";
}

If someone could give me some tips on how I could do this, that'd be awesome.

Yes, that's how it works. See [`document.getElementsByClassName`](https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName), [`getAttribute`](https://developer.mozilla.org/en-US/docs/DOM/element.getAttribute), [`contains`](http://stackoverflow.com/q/1789945/1048572) and [`setAttribute`](https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute)/[`className`](https://developer.mozilla.org/en-US/docs/DOM/element.className)/[`classList`](https://developer.mozilla.org/en-US/docs/DOM/element.classList). If you're stuck anywhere, show us the JS code you have! — Bergi, Mar 23 '13 at 16:05
Wow, thanks! I had it almost right in my head the whole time, just needed more theory. — QuentinMonek, Mar 23 '13 at 16:41

score 1 · Accepted Answer · answered Mar 23 '13 at 16:03

Try this:

// get all items with class 'item1'
var items = document.querySelectorAll('.item1');
var length = items.length;
for (var i = 0; i < length; i++) {
    // save reference to current item
    var item = items[i];
    // check if name contains 'Hi'
    if (item.getAttribute('name').indexOf('Hi') !== -1) {
        // update class
        item.className += ' item2';
    }
}

Demo: http://jsfiddle.net/vpetrychuk/9zBnn

score 0 · Answer 2 · answered Mar 23 '13 at 16:09

Vitaliy's answer is spot on, but it is worth mentioning that the object returned by document.querySelectorAll (a NodeList) can be converted to a JavaScript Array in order to make use of the higher order Array functions JavaScript provides, eg:

// Convert the `NodeList` returned by `querySelectorAll` into an `Array`.
var items = Array.prototype.slice.call(document.querySelectorAll('.item1'));

items
    .filter(function (item) {
        // Filter Array to only include items that have a name attribute
        // that beings with "Hi".
        return item.getAttribute('name').indexOf('Hi') !== -1;
    })
    .forEach(function (hiItem) {
        // Add a class to these items.
        hiItem.className += ' item2';
    });

Personally, I find these higher order Array functions to be much nicer to work with.

Why don't you just `[].filter.call(document.getElemntsByClassName('item1'), function(){…})`? — Bergi, Mar 23 '13 at 16:45
That would also be valid, I guess it just comes down to personal preference. I also feel the `Array.prototype.slice.call` is a little easier for a beginner to understand. — JonnyReeves, Mar 23 '13 at 16:48

score 0 · Answer 3 · edited May 23 '17 at 12:04

0

Use the full power of querySelectorAll. Also, use DOM methods; don't muck with the class attribute or className:

var items = document.querySelectorAll (".item1[name*='Hi']");

for (var J = items.length-1;  J >= 0;  --J) {
    items[J].classList.add ("item2");
}

Better yet, use jQuery:

$(".item1[name*='Hi']").addClass ("item2");

edited May 23 '17 at 12:04

Community

1
1

answered Mar 24 '13 at 01:38

Brock Adams

90,639
22
233
295

Userscripts, going through elements and testing attributes

3 Answers3