JavaScript로 HTML 페이지 데이터 가져오기

소개

HTML 페이지 데이터를 JavaScript를 사용하여 검색합니다.

검색할 데이터의 HTML

다음 페이지의 데이터를 검색합니다.

sample.html

<HTML>
<BODY>
    <TABLE id="personList" class="persons" border="1">
        <TR class="person">
            <TD class="id">123</TD>
            <TD class="name">Sato Taro</TD>
            <TD class="email">[email protected]</TD>
        </TR>
        <TR class="person">
            <TD class="id">124</TD>
            <TD class="name">Suzuki Hana</TD>
            <TD class="email">[email protected]</TD>
        </TR>
    </TABLE>
</BODY>
</HTML>

background script 에서 페이지로 javascript 삽입

페이지의 오른쪽 클릭 메뉴에서 JavaScript를 실행하여 데이터를 검색하는 프로그램을 만듭니다. background.js부터는 실행중인 페이지의 document를 얻을 수 없었으므로 JavaScript를 페이지에 삽입하여 실행하도록합니다.

포인트
* browser.tabs.executeScript에서 JavaScript를 페이지에 삽입
* 기점이 되는 element 를 document.getElementById 로 취득
* element.childNodes에서도 얻을 수 있었습니다만,\t 등 여분의 데이터가 들어가 있었으므로 children으로 아이 element를 취득

background.js

browser.contextMenus.create({
    id: "getTableData",
    title: "get table data",
    contexts: ["all"]
})

browser.contextMenus.onClicked.addListener((info, tab) => {
    if (info.menuItemId === "getTableData") {
        let executing = browser.tabs.executeScript(
                tab.id, {
                file: "/gettabledata.js"
            });
        executing.then(function(val) { 
                console.log("gettabledata.js executed"); 
                })
            .catch((reason) => { 
                console.log('gettabledata.js failed ('+reason+') here.');
                });

    }
});

gettabledata.js

getTableData();

function getTableData() {
    const personList = document.getElementById("personList");
    const persons = [];
    for (let i = 0; i < personList.children.length; i++) { // tbody
        console.log(personList.children);
        for (let j = 0; j < personList.children[i].children.length; j++) { // person
            const person = new Object();
            for (let k = 0; k < personList.children[i].children[j].children.length; k++) { // td
                if (personList.children[i].children[j].children[k].className
                        .indexOf("id") >= 0) {
                    person.id = personList.children[i].children[j].children[k].innerHTML;
                    console.log(person.id);
                }
                if (personList.children[i].children[j].children[k].className
                        .indexOf("name") >= 0) {
                    person.name = personList.children[i].children[j].children[k].innerHTML;
                    console.log(person.name);
                }
                if (personList.children[i].children[j].children[k].className
                        .indexOf("email") >= 0) {
                    person.email = personList.children[i].children[j].children[k].innerHTML;
                    console.log(person.email);
                }
            }
            persons.push(person);
        }
    }
    console.log(persons);
}

요약

오른쪽 클릭 메뉴에서 get table data를 선택하면

데이터를 검색할 수 있습니다.

참고

tabs.executeScript() - Mozilla | MDN
document - Web API 인터페이스 | MDN
Promise - JavaScript | MDN

Reference

이 문제에 관하여(JavaScript로 HTML 페이지 데이터 가져오기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/keniooi/items/66310a62fca2e642a4bb

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다