【chrome】id명으로 요소를 취득할 수 있다! 실제 웹 페이지에서 함수 테스트를 단순화하는 방법

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을 2차원 배열로 나타내는 함수 scanTable을 읽어들여, id명을 지정한 table의 상태를 2차원 배열로 표현해 본다.

scanTable 함수 로드

2차원으로 표시하고 싶은 table 태그에 id명을 붙인다

함수 실행

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. 2차원으로 표시하고 싶은 table 태그에 id명을 붙인다

3. 함수 실행

읽은 scanTable()의 인수에 id명 xx를 지정하면 처리를 실행할 수 있다.



id명을 할당한 table는 7행 4열의 테이블인 것을 알 수 있다.

이 id명으로 html 요소를 취득하는 기능을 사용하면, 실제의 WEB 페이지에서 함수의 테스트를 간단하게 할 수 있다.