HTML 페이지에서 td 값 찾기

오늘 회사에서 어떤 분이 HTML 에 대한 질문을 하셨습니다.
질문: HTML 

에 있는 값을 어떻게 얻어 올 수 있나요?

평상시에 하는 방식은 태그 안에 있는 value의 값을 찾는 방식을 사용했지만 특이하게 해당 사이트는결제금액31,000원

형식으로 값을 보여준다는 것 이었습니다. 질문 하신 분이 원하는 값은 31,000 원 이었습니다.
처음 들어보는 방식이라 약간의 호기심에 웹서버에 jsp 페이지를 만들고 테스트를 했습니다.
간단하게 테이블을 만들고 요청하신 부분과 같은 형식의 데이터를 입력했습니다.
자바스크립트로 해당 값을 찾기 시작..

HTML Document 객체 API

http://k/rook.org/jsdom

1. Document 에서 모든 ‘TD’ 객체를 찾습니다.
 NodeList 
getElementsByTagName(String tagname)
2. ‘TD’ 객체의 길이 만큼 반복하며 ‘결제금액’을 찾습니다.
API 에서
NodeList 는 length 값과 item 함수가 있습니다.
 Node item(number index)
3.
Node 객체의 함수에는 31,000원 찾을 방법이 없었습니다.
4.
Node 객체의 자식 클래스중에 HTMLElement 개체에 innerText를 통해서 찾을 수 있었습니다. 그렇지만 뒤에 IE 라고 붙어 있는게 익스플로어에서만 지원되는 기능인거 같습니다.

 String innerText [IE]
Valid for block elements only. Currently implemented as a readonly property.

HTMLElement

Node
  |
  +--Element
        |
        +--HTMLElement
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body onload="test()">
<table>
    <tr>
    <td>test</td><td>1</td>    
    <td style='padding-top:7' width='100' bgcolor='#ECECEC'>결제금액</td><td>31,000원</td>
    </tr>    
</table>
</body>
</html>
function test() {
    var tdElements = document.getElementsByTagName('td');
    var len = tdElements.length;
    var price = 0;
    for(var i=0; i<len;i++) {
        var temp = tdElements.item(i).innerText.valueOf();
        if(temp.indexOf('결제금액') != -1) {
            price = tdElements.item(i+1).innerText;
        }        
    }
    alert(price);
//    alert(document.getElementsByTagName('td').item(0).innerText);
//    alert(document.getElementsByTagName('td').item(1).innerText);
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s