DOM Quirks 1

DOM Quirks 1

by ZenMaster

HTML

<div class="red" id="redTest">Red Test</div>
<div class="blue" id="blueTest">Blue Test</div>
<button id="redButton">Remove Red</button>
<button id="blueButton">Toggle Blue</button>

CSS

.red
{
    background-color: #FF0000;
    width: 100px;
    height: 1.2em;
    color: #FFFFFF;
}

.blue
{
    background-color: #0000FF;
    width: 100px;
    height: 1.2em;
    color: #FFFFFF;
}

JavaScript

//NamedNodeMap
var redDiv = document.getElementById('redTest');

console.log('RED DIV:' + redDiv.constructor.name);

var redButton = document.getElementById('redButton');
redButton.addEventListener('click', function() {
    redDiv.attributes.removeNamedItem('class');
});

//NodeList
var divs = document.getElementsByTagName('div');
for(var i = 0, length = divs.length; i < length; i++)
{
    console.log('DIV ' + i + ':' + divs.item(i));
}

var blueDiv = document.getElementById('blueTest');
var blueButton = document.getElementById('blueButton');
blueButton.addEventListener('click', function() {
    if(blueDiv.getAttribute('class'))
    {
        blueDiv.removeAttribute('class');
    }
    else
    {
        blueDiv.setAttribute('class', 'blue');
    }
});