А почему нет?

Kolyaj,
Потому что почему-то не работает, если их объявить глобально. Объясните пожалуйста, если не сложно, что не так.

Потому что на момент объявления переменных этих узлов ещё нет в DOM-дереве.

еще один вариант

if ( typeof( document.getElementsByClassName ) != "function" )
document.getElementsByClassName = function( classname, tagname ) {
var tags = tagname ? document.getElementsByTagName( tagname ) :
( document.all ? document.all : document.getElementsByTagName( "*" ) );
console.log( classname, tagname, typeof( tags ) );
var e;
var r = [];
for ( var i = 0; i < tags.length; i++ ) {
e = tags[i].className;
var s = e.split( ' ' ).some( function( el, ind, ar ) { return (el == classname); } );
if ( typeof( e ) == 'string' && e && s )
r.push( tags[i] );
}
return r;
};

пожалуйста, разъясните начинающему конструкцию result = [], i,j в коде. Это определение пустого массива? А что такое i,j здесь?

Обычно перед result = [], i,j ставят var, тоесть:

var result = [], i,j

Определяет переменные внутри текущего scope

Манипуляция стилями div'ов через JS
 

Подскажите, пожалуйста, как я могу изменять стили определенных классов, через обращение к другим по JS скрипту?

с участием 2х элементов можно было бы ограничится тривиальным псевдоклассом :hover, но суть такая:
Допустим у нас на сайте 3 элемента и, соответственно, 3 класса к ним:
<div class="icon"></div>
<div class="hint1"></div>
<div class="hint2"></div>

в стиле .hint2 {display:none;}

При наведении на div "icon" к "hint1" должно присваиваться display:none, а у "hint2" это значение обнулять display:inherit например.

Другими словами, при наведении на красный кубик в окошке появляется надпись "это красный кубик", а при наведении на зелёный кубик - "это зелёный кубик".
т.к. в js я не силён, а знаю только html|css3 (на хорошем уровне)
Своими силами пытался найти ответ, наткнулся на getElementsByClassName но толком не могу разобраться как манипулировать стилями..

<style>
.icon{
    width:50px;
    height:50px;
    background:red;
}
.hint1{
    display:none;
}
.icon:hover ~ .hint1{
    display:block;
}
.icon:hover ~ .hint2{
    display:none;
}
</style>
<div class="icon"></div> 
<div class="hint1">hint1</div> 
<div class="hint2">hint2</div>

Так чтоли?

<div class='featured-view'></div>
<div class='latest-view'></div>
<div class='topten-view'></div>

<script type="text/javascript">
function switchDIV() {
var Elements1 = document.getElementsByClassName('featured-view').innerHTML;
Elements2 = document.getElementsByClassName('topten-view').innerHTML;
Elements3 = '';
Elements1 = Elements3;
Elements2 = Elements1;
Elements3 = Elements2;
}
</script>

Подскажите пожалуйста в чем проблема!!! Нужно поменять местами 1 и 3й элементы