Dev/HTML \ CSS \ JS

DOM 메모

surimi🍥 2021. 1. 13. 11:18
반응형

# document의 태그 띄우기

// log.js
function log(msg) {
	var console = document.getElementById("debugConsole");
	if (console != null) {
		console.innerHTML += msg +"<br/>";
	}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="log.js"></script>
<script type="text/javascript">
window.onload=function(){
	var rootNode = document.documentElement;
	log("root 태그: " + rootNode.tagName);
	
	var bodyNode = document.getElementsByTagName("body").item(0);
	log("body 태그: " + bodyNode.tagName);
	
	var spanList = document.getElementsByTagName("span");
	log("span 태그의 개수: " + spanList.length);
	
	for(var i=0; i<spanList.length; i++){
		var span = spanList.item(i);
		log((i+1) + "번째 span의 id : " + span.getAttribute("id"));
	}
	
	var debugConsoleDiv = document.getElementById("debugConsole");
	log("debugConsole 요소: " + debugConsoleDiv.tagName);
	
	var bodyLastChild = bodyNode.lastElementChild;
	log("body의 마지막 자식 노드: " + bodyLastChild.nodeName);
	
}
</script>
</head>
<body>
	<span id="a">a</span>
	<p>test
		<span id="b">b</span>
	</p>
	<div>
		<p>p</p>
		<span id="c">c</span>
	</div>
	<div id="debugConsole" style="border: 1px solid #000;"></div>
</body>
</html>

 

LastChild와 LastElemenChild의 경우 브라우저 버전에 따라 제대로 나오지 않는 경우가 있다.

 

 

# 짝퉁 TO DO LIST 

(새로고침시 초기화)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var count = 0;

function appendItem(){
	count++;
	var newItem = document.createElement("div");
	var text = document.getElementById("text").value;
	newItem.setAttribute("id", "item_" + count);
	newItem.setAttribute("style","border: 1px dotted red");
	
	var html = "[" + count + "] :" + text + " <input type='button' value='삭제' onclick='removeItem("+count+")'>";
	newItem.innerHTML = html;
	
	//document.getElementById("itemList").appendChild(newItem);
	var itemListNode = document.getElementById("itemList");
	itemListNode.appendChild(newItem); 
	
	document.getElementById("text").value = null;
	document.getElementById("text").focus();
}

function removeItem(count){
	var item = document.getElementById("item_"+count);
	if(item != null){
		item.parentNode.removeChild(item);
	}
}
</script>
</head>
<body>
<input type="text" id="text" placeholder="press ENTER" onKeypress="javascript:if(event.keyCode==13) {appendItem()}">	
<input type="button" value="추가" onclick="appendItem()" />
<div id="itemList" style="border: 2px double blue; "></div>
</body>
</html>

 

## books.jsp ##

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/xml; charset=UTF-8" pageEncoding="UTF-8"%> 
<books>
	<book>
		<title>JAVA 프로그래밍</title>
		<author>코난</author>
	</book>
	<book>
		<title>JSP 웹 프로그램</title>
		<author>홍길동</author>
	</book>
	<book>
		<title>SPRING Framework</title>
		<author>또치</author>
	</book>
</books>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var httpRequest = null;

	function loadBooks() {
		httpRequest = new XMLHttpRequest();
		httpRequest.onreadystatechange = loadedBooks;
		httpRequest.open("GET", "books.jsp", true);
		httpRequest.send();
	}

	function loadedBooks() {
		if (httpRequest.readyState == 4) {
			if (httpRequest.status == 200) {
				var xmlDoc = httpRequest.responseXML;

				var bookList = xmlDoc.getElementsByTagName("book");
				var message = "책 권수 : " + bookList.length + "권<br>";

				for (var i = 0; i < bookList.length; i++) {
					var book = bookList.item(i);
					var titleValue = book.firstElementChild.firstChild.nodeValue;
					var authorValue = book.getElementsByTagName("author").item(
							0).firstChild.nodeValue;

					message += titleValue + " [" + authorValue + "]<br>";
				}

				var newItem = document.createElement("div");
				newItem.setAttribute("id", "item");
				newItem.setAttribute("style", "border: 1px dotted red");
				newItem.innerHTML = message;
				document.getElementById("message").appendChild(newItem);
			}
		}
	}

	window.onload = function() {
		loadBooks();
	}
</script>
</head>
<body>
	파일로부터 책 정보를 읽어와 출력
	<br>
	<br>
	<div id="message"></div>
</body>
</html>

 

반응형
저작자표시

'Dev > HTML \ CSS \ JS' 카테고리의 다른 글

SCSS  (0) 2021.01.21
[ DEV Ed ] glass webpage 중간중간 메모  (0) 2021.01.21
CSS 단위 [rem / em / vh / vw / vmax / vmin]  (0) 2021.01.21
HTML  (0) 2020.11.13
html -1  (0) 2020.11.11

'Dev/HTML \ CSS \ JS'의 다른글

  • 현재글DOM 메모

관련글

댓글

티스토리툴바