DOM(Document Object Model)
DOM이란?
Document Object Model의 뜻으로
HTML 또는 XML 등의 문서를 객체로 표현할 때 사용하는 API이다.
DOM API는 트리 구조로 문서를 표현한다.
XML 예제
DOM 트리에서 Document는 문서 전체를 나타내는 것이며
<books>는 document 하위의 루트 노드이다.
Element는 각각의 태그를 의미한다.
firstChild : book 노드 입장에서 첫번째에 위치한 'title'
lastChild : book 노드 입장에서 마지막에 위치한 'author'
(현재 2개밖에 안썼지만 그 이상이더라도 처음과 끝에 위치간 태그만 가져온다.)
parentNode : title 노드 입장에서 'book', book 노드 입장에서 'books'
그 외에 개념들은 예제와 함께 설명할 것이다.
먼저 HTML로 DOM 객체를 만드는 예제이다.
<title>Insert title here</title>
<script type="text/javascript">
var count = 0;
function addItem(){
count++;
var newItemE = document.createElement("div");
newItemE.setAttribute("id","item_" + count);
var html = "새로 추가된 아이템[" + count + "] ";
html += "<input type=\"button\" value=\"삭제\" " +
"onclick=\"removeItem('item_" + count + "');\"/>"
newItemE.innerHTML = html;
var itemListDiv = document.getElementById("itemList");
itemListDiv.appendChild(newItemE);
}
function removeItem(itemId){
var removeItem = document.getElementById(itemId);
removeItem.parentNode.removeChild(removeItem);
}
</script>
</head>
<body>
<h1>HTML DOM을 이용한 화면 변경</h1>
<hr/>
<input type="button" value="추가" onclick="addItem();"/>
<div id="itemList"></div>
</body>
먼저 Body 부분을 살펴보면, '추가'라는 버튼을 누를 때 addItem()메소드가 실행되도록 하였다.
스크립트 부분에서 count=0을 선언한 뒤 메소드 실행 시 바로 1씩 추가되도록 했다.
newItemE에 HTML로 div객체를 만들기 위해 document.createElement를 입력하였다.
setAttribute(String name, String value) : 이름이 name인 속성의 값을 Value로 저장
즉 <div id="item_01">와 같은 의미이다. id에 우측의 값을 넣어준 것이다
html에 사용자 임의대로 내용을 입력해주며 innerHTML로 값을 넣어준다.
document.getElementById : 특정한 id의 Element를 구함
body에서 입력한 itemList의 element를 가져와서
appendChild : 자식 노드 추가
newItemE를 자식 노드로 추가하는 것이다.
또한 삭제 버튼을 누르면 실행되는 removeItem메소드는
removeChild : 자식 노드 삭제
html로 입력한 div에서 id의 elements를 찾아서 부모의 노드에서 자식 노드를 삭제한다.
즉, id에 해당되는 노드를 삭제하는 것이다.
이렇게 해서 HTML DOM을 사용하는 예제를 알아보았다.
다음은 글 초반에 보았던 XML를 활용할 것이다.
해당 XML에서 값을 가져온다.
getBooksXML.jsp
<script type="text/javascript" src="<%=cp%>/data/js/httpRequest.js"></script>
<script type="text/javascript">
function getBookList(){
sendRequest("books.xml",null,displayBookList,"GET");
}
function displayBookList(){
if(httpRequest.readyState==4){
if(httpRequest.status==200){
var Document = httpRequest.responseXML;
var booksE = Document.documentElement;
var bookNL = booksE.getElementsByTagName("book");
var html = "";
html += "<ol>";
for(var i=0;i<bookNL.length;i++){
var bookE = bookNL.item(i);
var titleStr = bookE.getElementsByTagName("title").item(0).firstChild.nodeValue;
var authorStr = bookE.getElementsByTagName("author").item(0).firstChild.nodeValue;
html += "<li>" + titleStr + " " + authorStr + "</li>";
}
html += "</ol>";
document.getElementById("bookDiv").innerHTML = html;
}
}
}
window.onload = function(){
getBookList();
}
</script>
</head>
<body>
<h1 id="list">Book List</h1>
<hr/>
<div id="bookDiv" style="display: block; margin: 0 auto;"></div>
</body>
body 부분은 출력을 위함이니 가볍게 지나가겠다.
id="bookDiv"로 주었다.
창이 실행될 때 getBookList 메소드가 실행되도록 하였다.
getBookList 메소드에서 sendRequest는 바로 직전의 글에서 참고하면 좋을 것 같다.
데이터를 보내기 위한 메소드를 따로 만들어두었으니 지금 설명은 생략하겠다.
books.xml은 해당 글 상단에서 확인할 수 있다.
콜백 함수로 displayBookList메소드를 두었으며
if문을 통해 제대로 실행이 잘 되었을 경우를 두었다.
httpRequest.responseXML) 전달받은 XML을 DOM 객체에 넣기 위한 작업이다.
Document.documentElement) DOM 객체에서 Element를 추출한다.
예제에 따르면 <book>이 되겠다.
booksE.getElementsByTagName) 지정한 book 태그에 해당되는 것들을 가져온다.
배열이다.
전체 데이터를 구하기 위해 html을 작성한다.
출력을 위해 <ol>과 <li>태그를 사용하였다.
for문으로 <book>태그가 있는 데이터 갯수만큼 가져와서 bookE에 넣는다.
titleStr과 authorStr은 각각 해당되는 태그의 첫번째 인덱스의 첫번째 자식노드가 되겠다.
여기에선 '겨울왕국'이 해당된다.
innerHTML로 html의 값을 넣어 출력되도록 한다.
3월 17일 목요일 수업🌝
'개발 교육 TIL > front-end' 카테고리의 다른 글
| [Node.js] Semantic-Ui 라이브러리 적용하기 (0) | 2022.04.07 |
|---|---|
| [Ajax] Ajax로 게시판 / 방명록 만들기 (jQuery, JSP) (0) | 2022.03.19 |
| [Ajax] get 또는 post 방식으로 데이터 보내기, 자바스크립트 메소드 (0) | 2022.03.16 |
| [Ajax] Ajax 개념, 기본 예제 - jQuery, XMLHttpRequest (0) | 2022.03.15 |
| [JSP/Servlet] 필터(Filter) 사용법 및 Encoding 예제 (0) | 2022.02.24 |
