【chrome】id名で要素を取得できる！実際のWEBページで関数のテストを簡単にする方法

chrome開発ツールのコンソールでid名を指定するとそのhtml要素を取得することができる。

ちょっとしたテストなどをする場合に便利な小技。

実例

例えば、yahooニュースのヘッドラインは id名 に"tabpanelTopics1"が割り当てられている。このid名をconsoleで叩くとその要素を取得できる。

↓ consoleで出力

id名で要素を取得することができた。（注：class名では使用できない）

## 自分でid名を割り振る id名が指定されていない場合、自分でid名を設定すれば同じようにid名で要素を取得することができる。

実例

bitflyerのbitcoinチャートのtableタグにid名を割り振ってみる。

↓ id名を自分で追加 （id="xx"）

↓ consoleで出力

設定したid名で要素を取得することができた。

## 応用編（関数を定義して実行） このid名を割り振る方法を使うと、後から関数を読み込み、指定したid名の要素に対して処理を実行することができる。

実例

tableを２次元配列で表す関数scanTableを読み込み、id名を指定したtableの状態を２次元配列で表現してみる。

1. 関数scanTableの読み込み
2. 二次元で表示したいtableタグにid名をつける
3. 関数を実行する

#### 1. 関数scanTableの読み込み

scanTable

function scanTable(table)
{
    var m = [];
    for(var y=0; y<table.rows.length; y++)
    {
        var row = table.rows[y];

        for(var x=0;x<row.cells.length;x++)
        {
            var cell = row.cells[x], xx = x, tx, ty;

            for(; m[y] && m[y][xx]; ++xx);                        // skip already occupied cells in current row

            for(tx = xx; tx < xx + cell.colSpan; ++tx)            // mark matrix elements occupied by current cell with true
            {
                for(ty = y; ty < y + cell.rowSpan; ++ty)
                {
                    if( !m[ty] ) m[ty] = [];                    // fill missing rows
                    m[ty][tx] = 1;
                }
            }
        }
    }

    return m
};

consoleにペーストしてEnterを押すと読み込み完了。

#### 2. 二次元で表示したいtableタグにid名をつける

#### 3. 関数を実行する 読み込んだ`scanTable()`の引数にid名`xx`を指定すると、処理を実行することができる。

id名を割り振ったtableは7行4列の表であることがわかる。

このid名でhtml要素を取得する機能を使うと、実際のWEBページで関数のテストを簡単にすることができる。