[수업 41일차] 21.10.07 / 05_JavaScript_09

Notice

Recent Posts

Recent Comments

Link

« 2025/07 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Salted Caramel

[수업 41일차] 21.10.07 / 05_JavaScript_09_DOM(1) 본문

coding/[2021.08.02~2022.01.24] 수업복습

[수업 41일차] 21.10.07 / 05_JavaScript_09_DOM(1)

꽃무늬라떼 2021. 10. 8. 01:01

함수 이름 없이 자바스크립트를 실행하라
body에서 호출이 안되고 자바스크립트에서 호출이 될 때 사용

Ex01

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


	/* 
		DOM(Document Object Model : 문서 객체 모델)
		- 웹 화면에 보이는 요소를 조작하기 위한 기능으로 가득찬 라이브러리 덩어리.
		- DOM은 웹 페이지가 HTML 페이지를 인식하는 방식을 말함.
		- 웹 브라우저가 HTML 페이지에 접근하는 방법을 정의한 API임.
		- DOM에서 제공하는 일반적인 기능을 여러가지 기능을 여러 개의 DOM 객체로 나눠 구성되어 있음.
		- DOM은 정의부분(명세서)과 구현 부분으로 나뉘어져 있음. 정의부분인 명세서에서는 
		   웹 페이지 문서를 조작할 때 지켜야 할 약속(규칙,규약)이 명시되어 있는 문서일뿐
		   실제 동작하는 구현 소스코드는 전혀 존재하지 않음. 텅 빈 상자와도 같음.
		   그리고 이 명세서를 만드는 곳이 바로 웹 관련 표준을 정의하는 협회인 W3C임.
		   구현 부분은 바로 브라우저 내부에 존재함.
		- 브라우저 제작사(IE, Chrome, Firefox, Safari 등등)는 DOM에 명시되어 
		있는 인터페이스에 맞춰 자신들만의 특화된 고유 기술을 이용해 독자적으로 기능을 구현함.
		- 눈에 보이지 않지만 사실 브라우저에 출력된 웹 페이지는 온통 DOM 객체로 구성되어 있음.
		- DOM 객체 텍스트와 이미지, 하이퍼링크, 폼 엘리먼트 등의 각 문서 엘리먼트를 나타냄.
		- 자바스크립트 코드에서 동적이 HTML을 만들어내기 위해 DOM 객체에 접근하여 
		조작을 할 수 있음.
		- 문서 객체 : 자바스크립트에서 이용할 수 있는 객체
		* 노드 : - HTML 웹 페이지 구성 요소의 가장 작은 단위를 말함.
				- 문서를 이루는 모든 요소를 통합해서 부르는 용어.
				즉, HTML 페이지의 각 요소(태그)들, 주석도 노드에 속함.
				- 브라우저는 이런 노드로 가득찬 웹 페이지를 읽어들여 해석한 후,
				각 노드에 접근해 제어할 수 있는 DOM 객체를 생성함.
		* 요소(element) : <시작태그>텍스트</끝태그>
		* 텍스트 노드 : 요소 안에 있는 글자. innerHTML과 관계가 있음.
		- 노드, 스타일, 속성, 이벤트, 위치 및 크기들을 다룰 수 있는 다양한 기능이 포함되어 있음.
		- DOM 객체가 생성된는 순서를 자세히 살펴 보면, 웹 브라우저는 가장 먼저 최상위에 해당하는 
		 HTMLDocument 클래스의 객체를 생성함. 이후에 생성되는 모든 DOM 객체는 
		 HTMLDocument 객체의 자식 객체로 만들어짐.
		 - 보통 DOM 방식은 트리 구조임. 브라우저가 웹페이지를 처리하는 과정을 살펴보면
		 먼저 브라우저는 문서 정보에 쉽게 접근하고 조작하고자 HTML 웹 페이지를 읽은 후 파싱 단계를 거침.
		 이 후 DOM 객체로 변환 (트리구조 ) 후 화면에 출력을 함.
		 - 예를 들어 웹페이지에 <img src="test.jpg"> 태그 노드가 있다면 브라우저에 의해 
		 HTMLImageElement라는 DOM 객체가 생성이 됨. 이 객체는 다른 DOM객체와는 다르게
		 이미지를 읽어 들이는 특별한 기능이 있어서 실행 시에 "test.jpg" 라는 외부 이미지 파일을 읽어 들이게 됨.
		 즉, 문서 상의 노드는 "브라우저이군. 이 노드를 보고 알맞은 DOM 객체를 생성해 주세요" 라는 의미일 뿐,
		 모든 작업은 이제 브라우저에서 만들어낸 DOM 객체로 처리를 하게 됨.
		 
	
	
	*/

	
	/* 
	브라우저가 웹 페이지를 처리하는 과정
	1. 웹페이지 읽기
	- 먼저 브라우저는 HTML 페이지를 읽음.
	2. 파싱 단계
	- 이어서 파싱(parsing) 단계를 거쳐서 웹 페이지 내용을 해석하게 됨.
	이때 작성한 마크업 태그와 1:1 매칭이 되는 DOM 클래스 객체를 생성하게 됨.
	이렇게 생성된 객체는 저마다 고유한 기능을 하게 됨.
	- 좀 더 자세하게 설명을 한다면 웹 브라우저가 HTML 페이지를 읽은 후 파싱 단계에서
	<div> 태그를 만나게 된다면  HTMLDivElement라는 클래스의 인스턴스(객체)를 
	생성하게 되고, <img> 태그를 만나면 HTMLImgElement하는 클래스의 인스턴스를 생성하게 된다는 의미임.
	
	3. 출력
	- 마지막으로 웹 브라우저는 생성한 DOM 객체를 가지고 우리가 보고 있는 
	웹페이지 화면을 만들게 됨.
	
	
	
	*/



</script>
</head>
<body>

</body>
</html>

Ex02

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

	/* 
	DOM을 공부하면서 알아야 할 내용
	1. 노드 다루기
	- 문서에서 특정 태그 이름을 지닌 노드 찾기 
	- 특정 노드의 자식 노드에서 특정 태그 이름을 지닌 노드 찾기
	- 문서에서 특정 클래스가 적용된 노드 찾기
	- 문서에서 특정 id를 가진 노드 찾기
	
	- 자식 노드 찾기
	- 부모 노드 찾기
	- 형제 노드 찾기
	
	- document.createElemet() 메서드를 사용해서 노드 생성 및 추가하기 
	- HTMLElement.innerHTML 프로퍼티를 사용해서 노드 생성 및 추가하기
	- Node.cloneNode() 메서드를 이용해서 노드 생성 및 추가하기
	- 노드 삭제하기
	- 노드 이동시키기
	
	
	- 텍스트 노드 생성 및 추가하기
	- 텍스트 노드 내용 변경하기
	
	2. 스타일 다루기
	- 스타일 속성값 구하기
	- 스타일 속성값 설정하기
	- 스타일 속성 제거하기 
	
	3. 속성 다루기
	- 속성값 구하기
	- 속성값 설정하기
	- 속성값 제거하기
	
	4. 이벤트 다루기
	- 이벤트 리스너 추가하기
	- 이벤트 리스너 삭제하기
	- 이벤트 발생시키기
	- 사용자 정의 이벤트 만들기
	
	
	*/



</script>

</head>
<body>
	
	<h1 id="Header">HEADER</h1>


</body>
</html>

Ex03

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

	// 현재 문서의 body 부분을 읽고 난 후에 자바스크립트를 실행하라는 의미.
	window.onload = function() {
		
		// 요소(태그)를 생성하는 방법
		// 형식) createElement(tagName);
		// 형식) creatrTextNode(text) : 텍스트 노드를 생성하는 메서드.
		
		let h1_element = document.createElement("h1");
		
		let textNode = document.createTextNode("Hello... DOM");
		
		// 텍스트노드를 h1태그에 자식노드로 추가
		h1_element.appendChild(textNode);
		
		document.body.appendChild(h1_element);
		
		
		
	}
	
	



</script>
</head>
<body>

</body>
</html>

Ex04

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

	window.onload = function() {
		
		// 이미지 태그를 만들어 보자.
		let img_element = document.createElement("img");
		
		// 이미지 태그에 이미지를 넣기 위해서는 src 속성이 지정되어야 함. 
		img_element.src="../images/mango.jpg";
		img_element.width= "200";
		img_element.height= "200";
		
		// 해당 이미지 노드를 문서의 본문(body)에 추가해 주어야한다.
		document.body.appendChild(img_element);
	
	}


</script>
</head>
<body>

</body>
</html>

Ex05

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

	onload = function() {
		
		let img_element = document.createElement("img");
		
		// 속성을 지정하는 방법
		// setAttribute(name, value) : 속성을 지정하는 메서드.
		img_element.setAttribute("src", "../images/apple.jpg");
		img_element.setAttribute("width","200");
		img_element.setAttribute("height","200");
		
		document.body.appendChild(img_element);
	}



</script>

</head>
<body>

</body>
</html>

Ex06

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

	onload = function() {
		
		// 문서의 요소를 찾는 방법 - 3가지
		// 1. getElementById(id이름): 문서에서 특정 id를 가진 노드 찾기
		let header1 = document.getElementById("header_1");
		let header2 = document.getElementById("header_2");
		
		
		// 문서 객체 속성을 변경하는 
		header1.innerHTML="header_1 id를 가진 요소";
		header2.innerHTML="header_2 id를 가진 요소";
		
	}

	

</script>
</head>
<body>

	<h1 id="header_1">Header1</h1>
	<h1 id="header_2">Header2</h1>

</body>
</html>

Ex07

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	onload = function() {
	
		// 문서의 요소를 찾는 방법 - 3가지
		// 2. getElementsBytagName(tagName)을 이용하는 방법
		// ==> tagName과 일치하는 요소를 배열로 가져오는 매서드.
	
		let headers = document.getElementsByTagName("h1");
		
		//headers[0].innerHTML = "getElementsByTagName()";
		
		//headers[1].innerHTML = "getElementsByTagName()";
	
		for(let i=0; i<headers.length; i++){
			headers[i].innerHTML = "getElementsByTagName()";
		}
	}

</script>
</head>
<body>

	<h1>Header1</h1>
	<p>header1 내용</p>
	
	<hr>
	
	<h1>Header2</h1>
	<p>header2 내용</p>

</body>
</html>

Ex08

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

	onload = function() {
		// 문서의 요소를 찾는 방법 - 3가지
		// 3. querySelector(선택자)를 이용하는 방법
		// 3-1. querySelector(산택자)
		//    ==> 가장 처음 선택되는 문서의 선택자 요소를 가져오는 메서드.
		// 3-2. querySelectorAll(선택자)
		//    ==> 문서의 선택자 요소 전체를 배열로 가져오는 메서드.
		
		let header1 = document.querySelector("#header_1");
		let header2 = document.querySelector("#header_2")
		
		header1.innerHTML ="header_1 id를 가진 요소";
		header2.innerHTML ="header_2 id를 가진 요소";
		
		
	}


</script>
</head>
<body>

	<h1 id="header_1">Header1</h1>
	<h1 id="header_2">Header2</h1>

</body>
</html>

Ex09

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

	onload = function() {
		let header = document.getElementByID("header");
		
		// h1 태그의 문서의 요소를 바꾸어 보자. 
		header.style.border = "1px solid red";
		header.style.color = "blue";
		header.style.fontStyle = "italic";
		header.innerHTML ="방가방가";
	}


</script>

</head>
<body>

	<h1 id="header">Header</h1>
	

</body>
</html>

Ex10

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

	onload = function() {
		let header2 = document.getElementById("header_2");
		
		// 특정 요소(태그)를 삭제하는 방법.
		document.body.removeChild(header2)
	}


</script>
</head>
<body>

	<h1 id="header_1">Header1</h1>
	<h1 id="header_2">Header2</h1>
</body>
</html>

Ex11

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

	onload = function() {
		let imageNode = document.getElementById("apple");
		
		document.body.removeChild(imageNode);
	}


</script>
</head>
<body>

	<h1>사과이미지</h1>
	
	<hr>
	
	<img id="apple" alt="사과이미지" src="../images/apple.jpg">

</body>
</html>

Ex12

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

	onload = function() {
		
		let header = document.getElementById("header");
		
		// 이벤트 처리 작업
		header.onclick = function() {
			alert("글자를 클릭하셨군요!!!");
			header.innerHTML = "글자 변경";
		}
		
		
	}


</script>
</head>
<body>

	<h1 id="header">HEADER</h1>


</body>
</html>

Ex13

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


	onload = function() {
		
		document.getElementById("btnChannel1").onclick = function() {
			let myDiv = document.getElementById("myDiv");
			myDiv.style.backgroundColor = "yellow";
			myDiv.style.width = "100px";
			
			document.getElementById("str").style.color = "red";
		}
		
	}
	function go_change() {
		alert("이벤트 예제입니다.");
		
	}


</script>
</head>
<body>

	<div id="myDiv" style="height: 100px;">
		<span id="str">안녕</span>하세요!!!

	</div>

	<input type="button" id="btnChannel1" value="스타일변경">
	<input type="button" id="btnChannel2"
		value="스타일변경" onclick="go_change()">
		





</body>
</html>

Ex14

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

	onload = function() {
		let text = document.getElementById("class")
			
		text.onclick = function() {
			text.style.color ="red";
			text.innerHTML ="페이지가 변경되었습니다.";
		}
			
			
		
		
	}



</script>
</head>
<body>

	<!-- 
		[문제] 해당 글자를 클릭하면 "페이지가 변경 되었습니다." 라는 
		글자로 변경되도록 하고, 글자의 색상도 빨간색으로 변경되게
	    DOM으로 진행해 주세요.
	 -->

	<div id ="class">이것이 div 요소입니다.</div>


</body>
</html>

Ex15

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

	onload = function() {
		let p_element = document.createElement("p");
		
		let p_textNode = document.createTextNode("DOM을 이용한 p 태그");
		
		p_element.appendChild(p_textNode);
		
		let hr_element = document.createElement("hr");

		// <hr> 태그에 title 속성을 추가하는 방법
		hr_element.setAttribute("title","DOM을 이용한 수평선");
		
		document.body.appendChild(p_element);
		
		document.body.appendChild(hr_element);
	
	}


</script>
</head>
<body>

	<br><br><br>
	<hr title = "직접 태그를 이용하여 생성된 수평선">
	
	<br><br><br>
	
	<!-- 
		[문제] 해당 위치에 <p> 태그와 <hr> 태그를 
		DOM을 이용하여 생성한 후 화면에 보여주세요.
		<p>DOM을 이용한 p 태그 </p>
	
	 -->


</body>
</html>

Ex16

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

	onload = function() {
		
		// 1. <p> 태그를 만들어야 한다.
		let p_element =document.createElement("p");
		
		// 2. <p> 태그 안에 들어갈 텍스트 노드를 만들어야 한다.
		let textNode = document.createTextNode("안녕하세요");
		
		// 3. 텍스트 노드를 <p> 태그에 자식 노드로 추가해 주어야 한다.
		p_element.appendChild(textNode);
		
		// 4. <div> 태그에 자식 노드로 <p>태그를 추가해 주어야 한다.
		
		
		let myDiv = document.getElementById("myDiv");
		
		myDiv.appendChild(p_element);
		
		myDiv.style.color ="blue";
		
		
		
	}


</script>
</head>
<body>

	<div id="myDiv">

	<!-- 
	[문제] 아래와 같이 DOM을 이용하여 화면을 출력해 보세요
	
	<p>안녕하세요</p>
	
	조건) "안녕하세요" 라는 글자는 파란색으로 처리
	
	
	 -->	
	
	
	</div>
</body>
</html>

Ex17

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

	onload = function() {
		let button = document.getElemetById("btn");
		
		button.onclick = function() {
			
			let text = document.getElementById("text1").value;
			if(text == "") {
				alert("내용을 입력하세요~~~");
			}else {
				document.getElementById("text2").value=text;
			}
		}
	}



</script>
</head>
<body>

	<div align="center">
	<h2>[문제] 버튼을 클릭하면 첫번째 텍스트 창에 입력된 내용을<br>
		두번째 텍스트 창으로 복사를 해 보자</h2>
		
	<input typy="text" id="text1"> <br>
	<input type="text" id="text2"> <br>
	<input type="button" id="btn" value="복사">
	
	
	
	</div>

</body>
</html>vvvvvvvv

Ex18

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

	// 일정한 시간마다 주기적으로 특정한 함수를 호출
	//setInterval(호출할 함수 이름, 시간)
	let id; 	// 전역 변수
	
	function change_go() {
		id = setInterval(flashText, 1000);
	}

	function flashText() {
		let target = document.getElementById("target");
		
		target.style.color = 
			(target.style.color == "red") ? "blue" : "red";
	}
	
	function stop_go() {
		clearInterval(id);
	}
	
	
</script>
</head>
<body>

	<div id="target">
	
		<p> 여기는 텍스트 영역입니다.</p>
	</div>

	<hr>
	
	<input type="button" value=시작 onclick="change_go()">
	 

	<input type="button" value=종료 onclick="stop_go()">

</body>
</html>

Ex19

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

	function check() {
		let userId = document.getElementById("id");
		let userPwd = document.getElementById("pwd");
		//let userName = document.getElementById("name");
		//let userPhone = document.getElementById("phone");
		//let userAddr = document.getElementById("addr");
		
		// 아이디 입력 창 입력 여부 
		if(userId.value == "") {
			alert("아이디를 입력해 주세요.");
			document.getElementById("id").focus();
			return false; // 데이터 전송이 차단됨.
		}
		// 비밀번호 입력 창 입력 여부
		if(userPwd.value == "") {
			alert("비밀번호를 입력해 주세요.");
			document.getElementById("pwd").focus();
			return false;	//데이터 전송이 차단됨.
		}
		// 이름 입력 창 입력 여부
		if(document.getElementById("name").value == "") {
			alert("이름을 입력해 주세요.");
			document.getElementById("name").focus();
			return false;
		}
		
		// 연락처 입력창 입력 여부
		if(document.getElementById("phone").value == "") {
			alert("연락처를 입력해 주세요.");
			document.getElementById("phone").focus();
			return false;
		}
		
		// 주소 입력 창 입력 여부
		if(document.getElementById("addr").value=="") {
			alert("주소를 입력하세요");
			document.getElementById("adde").focus();
			return false;
		}
	}


</script>
</head>
<body>

	<div align="center">
		<form action="http://www.google.com"
			onsubmit="return check()">
			<table border="1" cellspacing="0">
				<tr>
					<th>아이디</th>
					<td>
						<input type="text" id="id">
					</td>
				</tr>
				
				<tr>
					<th>비밀번호</th>
					<td>
						<input type="password" id="pwd">
					</td>
				</tr>
			
				<tr>
					<th>이름</th>
					<td>
						<input type="text" id="name">
					</td>
				</tr>
				
				<tr>
					<th>연락처</th>
					<td>
						<input type="text" id="phone">
					</td>
				</tr>
				
				<tr>
					<th>주소</th>
					<td>
						<input type="text" id="addr">
					</td>
				</tr>
			
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="회원가입">
							&nbsp;&nbsp;&nbsp;
						<input type="reset" value="다시작성">
					</td>
				</tr>
			</table>
			
			
		</form>
	
	
	
	</div>

</body>
</html>

저작자표시 (새창열림)

'coding > [2021.08.02~2022.01.24] 수업복습' 카테고리의 다른 글

[수업 43일차] 21.10.12 / 06_JQuery(2) (0)	2021.10.13
[수업 42일차] 21.10.08 / 05_JavaScript_09_DOM(2) / 06_JQuery(1) (0)	2021.10.08
[수업 40일차] 21.10.06 / 05_JavaScript_ 05_Array, 06_Function, 07_Object, 08_BOM (0)	2021.10.07
[수업 36일차] 21.09.29 , 01_HTML5 (0)	2021.10.06
[수업34~35차] 21.09.27~28 , 01_HTML4 (0)	2021.09.29

'coding/[2021.08.02~2022.01.24] 수업복습' Related Articles

Salted Caramel

[수업 41일차] 21.10.07 / 05_JavaScript_09_DOM(1) 본문

[수업 41일차] 21.10.07 / 05_JavaScript_09_DOM(1)

'coding > [2021.08.02~2022.01.24] 수업복습' 카테고리의 다른 글

티스토리툴바