HTML
JavaScript
dom

<body>~</body>タグ内の全要素を一括で操作する方法

More than 1 year has passed since last update.

jQuery等は使わずに、body以下の要素をまとめて操作する時の備忘録的なモノ。

基本形

コンソールに要素の名前が並びます。

function recursion(obj){
    var tempArray = Array.prototype.slice.call(obj.children);
    /*ここで要素を何か操作する*/
    console.log('"obj.localName" = ' + obj.localName);
    tempArray.forEach(recursion);
}
recursion(document.body); //body 以下全部

idで指定すれば、その要素と子を操作の対象にする

recursion(document.getElementById('id'));

全ての要素にイベントを追加することもできる。

mouseover, mouseout で背景色が変わる。

function getRandomInt(min, max) {
  return Math.floor( Math.random() * (max - min + 1) ) + min;
}

function function1(){
    this.style.background = 'rgb(' + 
        getRandomInt(128, 255) + ', ' + 
        getRandomInt(128, 255) + ', ' + 
        getRandomInt(128, 255) + ')';
}

function function2(){
    this.style.background = 'rgb(' + 
        getRandomInt(0, 127) + ', ' + 
        getRandomInt(0, 127) + ', ' + 
        getRandomInt(0, 127) + ')';
}

function recursion(obj){
    var tempArray = Array.prototype.slice.call(obj.children);

    /*IE・fireFox・chrome どれでも動くはず*/
    if(document.addEventListener){
        obj.addEventListener('mouseover', function1);
        obj.addEventListener('mouseoverout', function2);
    }else if(document.attachEvent){
        obj.attachEvent('mouseover', function1);
        obj.attachEvent('mouseoverout', function2);
    }

    tempArray.forEach(recursion);
}

recursion(document.body);