Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- 화이자1일차
- 자바이벤트
- java
- 백준10171
- cs지식
- 화이자백신후기
- 백준2739
- 자바컴포넌트
- 백준고양이
- 스터디
- 백준 #백준알고리즘 #백준 Hello World #Hello World
- 코로나백신
- 포장방스터디
- 자바수업
- GUI
- 자바
- 백준구구단
- 자바화면구현
- 화이자접종후기
- 자바공부
- 컴퓨터공부
- 자바컨테이너
- 자바조건문
- 백준고양이자바
- 백준자바 #백준10718
- 2739자바
- 자바토글버튼
- 백준10718자바
- 1일1로그
- 화이자미열
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에서 호출이 안되고 자바스크립트에서 호출이 될 때 사용
09_DOM
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>
09_DOM
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>
09_DOM
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>
09_DOM
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>
09_DOM
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>
09_DOM
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>
09_DOM
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>
09_DOM
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>
09_DOM
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>
09_DOM
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>
09_DOM
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>
09_DOM
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>
09_DOM
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>
09_DOM
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>
09_DOM
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>
09_DOM
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>
09_DOM
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
09_DOM
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>
09_DOM
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="회원가입">
<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 |