오늘 회사에서 어떤 분이 HTML 에 대한 질문을 하셨습니다.
질문: HTML
에 있는 값을 어떻게 얻어 올 수 있나요?
평상시에 하는 방식은 태그 안에 있는 value의 값을 찾는 방식을 사용했지만 특이하게 해당 사이트는결제금액31,000원
형식으로 값을 보여준다는 것 이었습니다. 질문 하신 분이 원하는 값은 31,000 원 이었습니다.
처음 들어보는 방식이라 약간의 호기심에 웹서버에 jsp 페이지를 만들고 테스트를 했습니다.
간단하게 테이블을 만들고 요청하신 부분과 같은 형식의 데이터를 입력했습니다.
자바스크립트로 해당 값을 찾기 시작..
HTML Document 객체 API
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);
}
Coozplz Blog 