[JavaScript강의노트] DOM 사용하기 (3)
문서 객체 모델 (DOM)
노드의 추가와 삭제
자바스크립트의 사용시 다음 두가지 규칙을 지켜서 작성하는 것을 원칙으로 합니다. 무간섭 DOM 스크립트와 단계적 기능 축소의 원칙인데 무간섭 DOM 스크립란 HTML 코드와 자바스크립트를 완전히 분리하여 웹 브라우저의 제공 기능에 따라 다운그레이드나 업그레이드를 지원한다는 것입니다. 단계적 기능 축소는 자바스크립트를 지원하지 않는 웹 브라우저에서도 제공되는 기능을 이용할 수 있어야 한다는 의미입니다. 이 밖에 CSS에 의해 HTML에 여러가지 효과를 추가하는 것을 단계적 기능 확대라고 합니다. 다음 두 메서드는 단계적 기능 축소의 원칙에 위배된다는 이견이 있는 기능으로 HTML 구조를 바꾸기 때문에 이와 관련한 이슈꺼리를 제공하기도 합니다.
appendChild()와 removeChild()
부모 노드에 자식 노드를 추가하거나 삭제하는 기능으로 HTML의 특정 요소의 구조를 변경시킵니다. 노드를 추가하기 위해 document.createElement()와 document.createText() 메서드를 이용하여 엘리먼트 노드나 텍스트 노드를 생성합니다. 다음은 이를 이용한 예제입니다.
<!-- dom_api.html --> <?xml version="1.0" encoding="UTF-8" ?> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>노드 추가하여 DB에 저장하는 예</title> <script type="text/javascript"> function addInputItem() { var root = document.getElementsByTagName("tbody")[0]; // tbody에 tr DOM 트리 추가 var element = document.createElement("tr"); element.appendChild(document.createElement("td")); var eInput = document.createElement("input"); eInput.setAttribute("type", "text"); eInput.setAttribute("name", "text"); eInput.setAttribute("size", "20"); element.firstChild.appendChild(eInput); root.appendChild(element); } function removeInputItem() { var nodes = document.getElementsByTagName("tr"); // tr 태그들을 찾아 tfoot의 tr과 tbody의 첫번째 tr은 유지하고 마지막 tr부터 삭제 var root = nodes[1].parentNode; if (nodes.length > 2) root.removeChild(root.lastChild); } </script> </head> <body> <h1 align="center">문자열 저장</h1> <form method="post" action="action.jsp"> <table align="center"> <tfoot> <tr><td align="center"><input type="submit" value="저장하기" /></td></tr> </tfoot> <tbody> <tr> <td> <input type="text" name="text" size="20" /> <input type="button" value="항목 추가" onclick="addInputItem()" /> <input type="button" value="항목 삭제" onclick="removeInputItem()" /> </td> </tr> </tbody> </table> </form> </body> </html>
<!-- action.jsp 스크립틀릿과 표현식 이용하여 폼의 내용 출력 -->
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<% String[] values = request.getParameterValues("text"); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>파라메터 출력</title>
</head>
<body>
<h1>파라메터 출력</h1>
<table>
<% for (int i = 0; i < values.length; i++) { %>
<tr><td><%= values[i] %></td></tr>
<% } %>
</table>
</body>
</html>
package <!-- 폼의 데이터를 저장할 빈 -->
net.jeongsam;
public class Bean091013b {
private String[] text;
public String[] getText() {
return text;
}
public void setText(String[] text) {
this.text = text;
}
public int size() {
return text.length;
}
}
<!-- action.jsp 액션태그와 표현언어(EL), JSTL 이용 -->
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:useBean id="formBean" class="net.jeongsam.Bean091013b" />
<jsp:setProperty property="*" name="formBean" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>
<h1>파라메터 출력</h1>
<table>
<c:forEach var="text" items="${formBean.text}">
<tr><td><c:out value="${text}" /></td></tr>
</c:forEach>
</table>
</body>
</html>