Adapt to HTML5

I’ve written some quick example code that takes a page containing HTML5 equivalent class names (ie. .nav) and replaces the node with a HTML5 node that matches (ie. ).

//Adapt page to HTML5
    function changeNodeName(element, newNodeName) {
        var oldNode = element,
			    newNode = document.createElement(newNodeName),
			    node,
			    nextNode;

        node = oldNode.firstChild;
        while (node) {
            nextNode = node.nextSibling;
            newNode.appendChild(node);
            node = nextNode;
        }
        for (var i = 0; i < oldNode.attributes.length; i++) {
            newNode.setAttribute(oldNode.attributes[i].name, oldNode.attributes[i].value);
        }

        oldNode.parentNode.replaceChild(newNode, oldNode);
    }
    try {
        var theBody = document.getElementsByTagName("body")[0];
        var classNames = ["article", "aside", "command", "details", "summary", "figure", "figcaption", "footer", "header", "mark", "meter", "nav", "progress", "ruby", "rt", "rp", "section", "time", "wbr"];
        for (var i = 0; i < classNames.length; i++) {
            htmlFourElements = document.getElementsByClassName(classNames[i], theBody);
            for (var ii = 0; ii < htmlFourElements.length; ii++) {
                changeNodeName(htmlFourElements[ii], classNames[i]);
            }
        }
    } catch(e) {
        console.error(e.message);
    }
Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: