Question

So I’m doing a redesign for a site with an unhelpful CMS where I don’t have full access to the markup (or ftp access). There’s a node in particular which is hindering my progress significantly – its written with inline style & no class or ID and I have to change it (not remove it). Its looking like:

<div style="background-color: blue">
<div class="editablecontent">
(stuff I can edit in the CMS goes here)
</div>
</div>

I don’t think getElementsByClassName is going to work here? but what sort of works is the very ugly defining an empty div with an ID then and document.getElementById.parentNode.parentNode.style.backgroundColor=”white” which is obviously filthy and doesn’t work in IE anyways and I need IE8 support (at least). I am not using a framework but do have access to the header.

Thanks in advance.

Answer 1

Assuming this content is unique in your document (e.g. there’s only one of them), you can use this to find it:

function changeColor() {
    var divs = document.getElementsByTagName("div");
    for (var i = 0, len = divs.length; i < len; i++) {
        if (divs[i].style.backgroundColor === "blue" && 
          divs[i + 1] && 
          divs[i + 1].parentNode === divs[i] &&
          divs[i + 1].className === "editablecontent") {
            divs[i].style.backgroundColor = "white";
            return;
        }
    }
}

This does the following steps:

1. Get all divs in the document
2. Look for one with backgroundColor set to blue with an inline style setting
3. When you find one check to see if there is another div after it
4. If that next div is a child
5. If that next div has a className of "editablecontent"
6. Then, change its background color.

If you wanted any further checks based on other criteria to make sure you were finding the right object, you could add those to the logic, though these checks are all you have disclosed to us.

Working example: http://jsfiddle.net/jfriend00/NmxUn/

---

Another approach is to use getElementsByClassName and install a polyfill like this one to make it work in older browsers:

// Add a getElementsByClassName function if the browser doesn't have one
// Limitation: only works with one class name
// Copyright: Eike Send http://eike.se/nd
// License: MIT License

if (!document.getElementsByClassName) {
  document.getElementsByClassName = function(search) {
    var d = document, elements, pattern, i, results = [];
    if (d.querySelectorAll) { // IE8
      return d.querySelectorAll("." + search);
    }
    if (d.evaluate) { // IE6, IE7
      pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
      elements = d.evaluate(pattern, d, null, 0, null);
      while ((i = elements.iterateNext())) {
        results.push(i);
      }
    } else {
      elements = d.getElementsByTagName("*");
      pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
      for (i = 0; i < elements.length; i++) {
        if ( pattern.test(elements[i].className) ) {
          results.push(elements[i]);
        }
      }
    }
    return results;
  }
}

And, then you could simply do this, even on older versions of IE:

var items = document.getElementsByClassName("editablecontent");
if (items.length) {
    items[0].parentNode.style.backgroundColor = "white";
}