1. 지난 시간에 공부한 것을 복습하기 위한 예제
** 1_시계만들기.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>시계 만들기</title>
</head>
<body>
<h2>시계 만들기</h2>
<div id="result"></div>
<p><input type="button" value="시작" onclick="startClock()"></p>
<p><input type="button" value="중지" onclick="stopClock()"></p>
<script>
'use strict';
function printTime() {
const today = new Date();
const hh = today.getHours();
const mm = today.getMinutes();
const ss = today.getSeconds();
document.getElementById('result').innerHTML = hh + ":" + mm + ":" + ss;
}
let timeId = null;
function startClock() {
timeId = setInterval(printTime, 500);
}
function stopClock() {
clearInterval(timeId);
}
</script>
</body>
</html>
2. 문서 객체 모델(Document Object Model)
: XML이나 HTML문서에 접근하기 위한 일종의 인터페이스이다.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
** HTML로 표현
<html lang="ko">
<head>
<title>간단한 HTML 문서</title>
</head>
<body>
<h2>HTML 문서</h2>
<img src="apple.png">
</body>
</html>
** DOM으로 표현
3. document 객체
: 웹 페이지 그 자체를 의미한다.
웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document 객체로부터 시작해야 한다.
** DOM에 필요한 document 객체 메소드
getElementsByTagName() : 해당 태그 이름의 요소를 모두 선택한다.
getElementById() : 해당 아이디의 요소를 선택한다.
getElementsByClassName() : 해당 클래스에 속한 요소를 모두 선택한다.
getElementsByName() : 해당 name 속성값을 가지는 요소를 모두 선택한다.
querySelectorAll() : 해당 선택자로 선택되는 요소를 모두 선택한다.(ECMA6부터 추가된 메소드)
4. DOM에 필요한 document 객체 메소드
1) getElementsByTagName()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 객체 모델 - 1</title>
</head>
<body>
<h2>문서 객체 모델 - 1</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Apache</li>
<li>PHP</li>
<li>MySQL</li>
<li>Node.js</li>
<li>React.js</li>
</ul>
<script>
'use strict';
const tagName = document.getElementsByTagName("li");
for(let i=0; i<tagName.length; i++){
tagName.item(i).style.color = "gold";
}
</script>
</body>
</html>
** 실행결과
2) getElementsByClassName()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 객체 모델 - 1</title>
</head>
<body>
<h2>문서 객체 모델 - 1</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li class="js">JavaScript</li>
<li class="js">jQuery</li>
<li>Apache</li>
<li>PHP</li>
<li>MySQL</li>
<li class="js">Node.js</li>
<li class="js">React.js</li>
</ul>
<script>
'use strict';
const tagName = document.getElementsByTagName("li");
for(let i=0; i<tagName.length; i++){
tagName.item(i).style.color = "gold";
}
const className = document.getElementsByClassName('js');
for(let i=0; i<className.length; i++){
className.item(i).style.color = "deepskyblue";
}
</script>
</body>
</html>
** 실행결과
3) getElementById()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 객체 모델 - 1</title>
</head>
<body>
<h2>문서 객체 모델 - 1</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="js" class="js">JavaScript</li>
<li id="js" class="js">jQuery</li>
<li>Apache</li>
<li>PHP</li>
<li>MySQL</li>
<li id="js" class="js">Node.js</li>
<li id="js" class="js">React.js</li>
</ul>
<script>
'use strict';
const tagName = document.getElementsByTagName("li");
for(let i=0; i<tagName.length; i++){
tagName.item(i).style.color = "gold";
}
const className = document.getElementsByClassName('js');
for(let i=0; i<className.length; i++){
className.item(i).style.color = "deepskyblue";
}
// id는 한 개만 설정 가능
// 만약 id 설정을 여러 개 설정했다면...!
// 에러는 나지 않으나 제일 먼저 검색된 첫 id만 색상 변경이 된다.
// 또한 id는 하나만 설정하는 것이기 때문에 리턴값이 배열이 아니다.
// 배열이 아니기 때문에 for문으로 돌릴 수 없다.
const id = document.getElementById('js');
id.style.color = "deeppink";
</script>
</body>
</html>
** 실행결과
4) getElementsByName()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 객체 모델 - 1</title>
</head>
<body>
<h2>문서 객체 모델 - 1</h2>
<ul>
<li name="model">HTML</li>
<li>CSS</li>
<li id="js" class="js">JavaScript</li>
<li id="js" class="js">jQuery</li>
<li>Apache</li>
<li>PHP</li>
<li>MySQL</li>
<li id="js" class="js">Node.js</li>
<li id="js" class="js">React.js</li>
</ul>
<script>
'use strict';
const tagName = document.getElementsByTagName("li");
for(let i=0; i<tagName.length; i++){
tagName.item(i).style.color = "gold";
}
const className = document.getElementsByClassName('js');
for(let i=0; i<className.length; i++){
className.item(i).style.color = "deepskyblue";
}
// id는 한 개만 설정 가능
// 만약 id 설정을 여러 개 설정했다면...!
// 에러는 나지 않으나 제일 먼저 검색된 첫 id만 색상 변경이 된다.
// 또한 id는 하나만 설정하는 것이기 때문에 리턴값이 배열이 아니다.
// 배열이 아니기 때문에 for문으로 돌릴 수 없다.
const id = document.getElementById('js');
id.style.color = "deeppink";
const name = document.getElementsByName('model');
for(let i=0; i<name.length; i++){
name.item(i).style.color = "red";
}
</script>
</body>
</html>
** 실행결과
5) querySelectorAll()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 객체 모델 - 1</title>
</head>
<body>
<h2>문서 객체 모델 - 1</h2>
<ul>
<li name="model">HTML</li>
<li>CSS</li>
<li id="js" class="js">JavaScript</li>
<li id="js" class="js">jQuery</li>
<li class="server">Apache</li>
<li class="server">PHP</li>
<li class="server">MySQL</li>
<li id="js" class="js">Node.js</li>
<li id="js" class="js">React.js</li>
</ul>
<script>
'use strict';
const tagName = document.getElementsByTagName("li");
for(let i=0; i<tagName.length; i++){
tagName.item(i).style.color = "gold";
}
const className = document.getElementsByClassName('js');
for(let i=0; i<className.length; i++){
className.item(i).style.color = "deepskyblue";
}
// id는 한 개만 설정 가능
// 만약 id 설정을 여러 개 설정했다면...!
// 에러는 나지 않으나 제일 먼저 검색된 첫 id만 색상 변경이 된다.
// 또한 id는 하나만 설정하는 것이기 때문에 리턴값이 배열이 아니다.
// 배열이 아니기 때문에 for문으로 돌릴 수 없다.
const id = document.getElementById('js');
id.style.color = "deeppink";
const name = document.getElementsByName('model');
for(let i=0; i<name.length; i++){
name.item(i).style.color = "red";
}
const querySelector = document.querySelectorAll("li.server");
for(let i=0; i<querySelector.length; i++){
querySelector.item(i).style.color = "blue";
}
</script>
</body>
</html>
** 실행결과
5. 노드(node)
: HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장한다.
HTML DOM은 노드들을 정의하고, 그 사이의 관계를 설명해주는 역할을 한다.
HTML 문서의 정보는 노드 트리라고 불리는 계층적 구조에 저장된다.
노드 트리는 노드들의 집합이며 노드 간의 관계를 보여준다.
노드 트리는 최상위 레벨인 루트 노드로부터 시작하고, 가장 낮은 레벨인 텍스트 노드까지 내려간다.
HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근 할 수 있다.
6. 노드 종류
문서 노드(document node) : 문서 전체를 나타내는 노드
요소 노드(element node) : HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드이다.
속성 노드(attribute node) : HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있다.
하지만 해당 요소 노드의 자식 노드에는 포함되지 않는다.
텍스트 노드(text node) : HTML 문서의 모든 텍스트는 텍스트 노드이다.
주석 노드(comment node) : HTML 문서의 모든 주석은 주석 노드이다.
7. 노드 간의 관계
parentNode : 부모 노드
childNodes : 자식 노드 리스트
firstChild : 첫번째 자식 노드
lastChild : 마지막 자식 노드
nextSibling : 다음 형제 노드
previousSibling : 이전 형제 노드
8. 빈 텍스트
: 익스플로러를 제외한 대부분의 브라우저는
요소와 요소 사이에 빈 공백 또는 개행이 이루어지면 텍스트노드로 처리된다.
따라서 노드간의 관계에 텍스트 노드가 중간에 사용되면 노드 이동이 불명확해질 수 있다.
9. 노드 간의 관계 예제
1) 스크립트 위치
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 객체 모델 - 2</title>
<script>
'use strict';
// 1. 여기에다가 바로 id='gnb'를 찾으면 null 값이 출력된다.
// 왜?
// 스크립트는 위에서 아래로 인터프리터 방식으로 읽는다.
// 아직 html을 읽기도 전에 id='gnb'를 찾으려고 하니 null 값이 출력되는 것이다.
console.log(document.getElementById('gnb'));
</script>
</head>
<body>
<h2>문서 객체 모델 - 2</h2>
<div>
<nav id="gnb">
<ul>
<li class="first">내용 1</li>
<li>내용 2</li>
<li>내용 3</li>
</ul>
</nav>
</div>
<script>
// 2. 따라서 html을 읽은 다음에 스크립트를 읽을 것이니
// 스크립트를 사용할 html 다음에 작성해야 한다.
console.log(document.getElementById('gnb'));
// 3. 그럼 무조건 html 다음에 스크립트를 작성해야하는 것일까?
// 아니다!! window.onload 프라퍼티를 사용하면 된다.
// window.onload()를 사용하지 않으면 아래의 코드들이 실행되지 않음
// 브라우저에 따라 null, 못찾을 수 있고 에러가 날 수 있음
</script>
</body>
</html>
** 실행결과
2) window.onload, 노드 간의 관계
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 객체 모델 - 2</title>
<script>
'use strict';
// 1. 여기에다가 바로 id='gnb'를 찾으면 null 값이 출력된다.
// 왜?
// 스크립트는 위에서 아래로 인터프리터 방식으로 읽는다.
// 아직 html을 읽기도 전에 id='gnb'를 찾으려고 하니 null 값이 출력되는 것이다.
console.log(document.getElementById('gnb'));
// 4. window.onload : 브라우저 객체가 다 읽혔다면 그 때 익명함수를 실행하라는 뜻으로
// html을 다 읽은 다음에 window.onload의 익명함수를 실행하란 뜻이다.
window.onload = function(){
const gnb = document.getElementById('gnb');
console.log(gnb);
console.log(gnb.parentNode);
console.log(gnb.children[0]);
console.log(gnb.children[0].nextElementSibling);
console.log(gnb.children[0].children[1].nextElementSibling);
console.log(gnb.children[0].firstChild); // firstChild(텍스트 노드 포함)
console.log(gnb.children[0].firstElementChild);
}
</script>
</head>
<body>
<h2>문서 객체 모델 - 2</h2>
<div>
<nav id="gnb">
<ul>
<li class="first">내용 1</li>
<li>내용 2</li>
<li>내용 3</li>
</ul>
</nav>
</div>
<script>
// 2. 따라서 html을 읽은 다음에 스크립트를 읽을 것이니
// 스크립트를 사용할 html 다음에 작성해야 한다.
console.log(document.getElementById('gnb'));
// 3. 그럼 무조건 html 다음에 스크립트를 작성해야하는 것일까?
// 아니다!! window.onload 프라퍼티를 사용하면 된다.
// window.onload를 사용하지 않으면 아래의 코드들이 실행되지 않음
// 브라우저에 따라 null, 못찾을 수 있고 에러가 날 수 있음
</script>
</body>
</html>
** 실행결과
10. 노드 추가
appendChild() : 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가한다.
insertBefore() : 새로운 노드를 특정 자식 노드 바로 앞에 추가한다.
insertData() : 새로운 노드를 텍스트 데이터에 새로운 텍스트로 추가한다.
** 4_노드의추가.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>노드의 추가</title>
</head>
<body>
<h2>노드의 추가</h2>
<p id="item1">JavaScript</p>
<p id="item2">jQuery</p>
<hr>
<div id="list">
<p id="server">node.js</p>
<p>CSS</p>
<p>HTML</p>
</div>
<hr>
<p id="text">지금 시간은 오전 11시 30분입니다.</p>
<hr>
<button onclick="appendNode()">노드 추가1</button>
<button onclick="insertNode()">노드 추가2</button>
<button onclick="appendText()">텍스트 추가</button>
<script>
'use strict';
function appendNode() {
const parent = document.getElementById('list');
const newItem = document.getElementById('item1');
parent.appendChild(newItem);
}
function insertNode() {
const parent = document.getElementById('list');
const serverItem = document.getElementById('server');
const newItem = document.getElementById('item2');
parent.insertBefore(newItem, serverItem);
}
function appendText(){
const text = document.getElementById('text').firstChild;
text.insertData(7, "아주 피곤한 ");
}
</script>
</body>
</html>
** 실행결과
11. 노드 생성
createElement() : 새로운 요소 노드를 만들 수 있다.
createAttribute() : 새로운 속성 노드를 만들 수 있다.
만약 같은 이름의 속성 노드가 존재한다면, 기존 속성 노드는 새로운 속성 노드로 대체된다.
createTextNode() : 새로운 텍스트 노드를 만들 수 있다.
** 5_노드의생성.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>노드의 생성</title>
</head>
<body>
<h2>노드의 생성</h2>
<p id="el">새로운 문장이 이 문장 앞에 추가됩니다.</p>
<p id="attr">이 단락에 새로운 속성이 추가됩니다.</p>
<p id="text"></p>
<button onClick="createNode()">요소 노드 생성</button>
<button onClick="createAttr()">속성 노드 생성</button>
<button onClick="createText()">텍스트 노드 생성</button>
<script>
'use strict';
function createNode() {
const elNode = document.getElementById('el'); // <p id="el">새로운 문장이 이 문장 앞에 추가됩니다.</p>
const newNode = document.createElement('p'); // <p></p>
newNode.innerHTML = "<b>새로운 요소입니다.</b>"; // <p><b>새로운 요소입니다.</b></p>
document.body.insertBefore(newNode, elNode);
}
function createAttr() {
const attr = document.getElementById('attr'); // <p id="attr">이 단락에 새로운 속성이 추가됩니다.</p>
const newAttr = document.createAttribute('style'); // style=""
newAttr.value = 'color: deepskyblue'; // style="color: deepskyblue"
// <p id="attr" style="color: deepskyblue">이 단락에 새로운 속성이 추가됩니다.</p>
attr.setAttributeNode(newAttr);
}
function createText() {
const textNode = document.getElementById('text');
const newText = document.createTextNode('새로운 텍스트입니다.');
textNode.appendChild(newText);
}
</script>
</body>
</html>
** 실행결과
12. 노드 제거
removeChild() : 자식 노드 리스트에서 특정 자식 노드를 제공한다.
성공적으로 노드가 제거되면 노드를 반환한다.
노드가 제거될 때에는 제거되는 노드의 모든 자식들도 다같이 제거된다.
removeAttribute() : 속성의 이름을 이용하여 특정 속성 노드를 제거한다.
** 6_노드의제거.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>노드의 제거</title>
</head>
<body>
<h2>노드의 제거</h2>
<div id='list'>
<p>HTML</p>
<p id="item">CSS</p>
<p id="js" style="background-color: gold; color: deeppink">JavaScript</p>
<p>jQuery</p>
</div>
<button onclick="removeNode()">요소 노드 삭제</button>
<button onclick="removeAttr()">속성 노드 삭제</button>
<script>
'use strict';
function removeNode() {
const parent = document.getElementById('list');
const removeItem = document.getElementById('item');
const result = parent.removeChild(removeItem);
console.log(result);
console.log(result.nodeName);
}
function removeAttr(){
const js = document.getElementById('js');
js.removeAttribute('style');
}
</script>
</body>
</html>
** 실행결과
13. 노드 복제
cloneNode() : 기존의 존재하는 노드와 동일한 새로운 노드를 생성하여 반환한다.
[예] 복제할_노드.cloneNode(자식노드 복제여부);
[자식노드 복제여부] 전달된 값이 true면 복제되는 노드의 모든 속성과 자식노드도 같이 복제되고,
false면 속성 노드만 복제하고 자식 노드를 복제하지 않는다.
** 7_노드의복제.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>노드의 복제</title>
</head>
<body>
<h2>노드의 복제</h2>
<h3 id="item">복제된 아이템입니다.</h3>
<div id="list">
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<p>jQuery</p>
</div>
<button onclick="cloneElement()">노드 복제</button>
<script>
'use strict'
function cloneElement(){
const parent = document.getElementById('list');
const originItem = document.getElementById('item');
parent.appendChild(originItem.cloneNode(true));
}
</script>
</body>
</html>
** 실행결과
14. 노드 교체
replaceChile() : 기존의 요소 노드를 새로운 요소 노드로 교체할 수 있다.
[예] 교체된_노드 = 부모노드.replaceChild(새로운 자식노드, 기존 자식노드);
replaceData() : 텍스트 노드의 텍스트 데이터를 바꿀 수 있다.
[예] 텍스트_노드.replaceData(오프셋, 교체할 문자수, 새로운 데이터);
** 8_노드의교체.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>노드의 교체</title>
</head>
<body>
<h2>노드의 교체</h2>
<div id="parent">
<p id="first">김사과</p>
<p>오렌지</p>
<p>반하나</p>
</div>
<p id="second">이메론</p>
<hr>
<p id="text">좋아하는 과일은 사과 입니다.</p>
<button onclick="changeNode()">요소 노드 교체</button>
<button onclick="changeText()">텍스트 노드 교체</button>
<script>
'use strict';
function changeNode(){
const parent = document.getElementById('parent');
const first = document.getElementById('first');
const second = document.getElementById('second');
parent.replaceChild(second, first);
}
function changeText(){
const text = document.getElementById('text').firstChild;
text.replaceData(9, 2, "오렌지");
}
</script>
</body>
</html>
** 실행결과
15. 폼(Form) 객체
: 일반적인 폼에 접근할 때 사용한다.
id 또는 name을 이용하여 접근한다.
또한 documents.forms 컬렉션을 이용하여 접근 할 수도 있다.
<form name="myform" id="regform" method="post" action="regist.php">
아이디 : <input type="text" name="userid" id="id"><br>
비밀번호 : <input type="password" name="userpw" id="pw"><br>
</form>
1) 폼에 접근
const frm = document.myform;
const frm = document.getElementById('regform');
2) 아이디 value 접근
const id = document.myform.userid.value;
const id = frm.userid.value;
const id = frm.elements[0].value;
const id = frm.elements['userid'].value;
const id = document.getElementById('id').value;
** 9_폼객체.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼 객체</title>
</head>
<body>
<h2>폼 객체</h2>
<form name="frm1">
<input type="search" name="search" placeholder="검색어 입력"><br>
<input type="submit" value="확인">
</form>
<form name="frm2">
<input type="text" name="userid" id="id" placeholder="아이디 입력" value="apple"><br>
<input type="password" name="userpw" placeholder="패스워드 입력"><br>
<input type="submit" value="확인">
</form>
<script>
'use strict';
const frm1 = document.frm1;
const frm2 = document.frm2;
console.log(frm1.search.placeholder);
console.log(frm2.userid.placeholder);
console.log(frm2.userid.value);
console.log(document.forms[1][0].value);
console.log(document.forms['frm2'].elements['userid'].value);
console.log(document.getElementById('id').value);
</script>
</body>
</html>
** 실행결과
16. 10_SELECT다루기.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SELECT 다루기</title>
</head>
<body>
<h2>SELECT 다루기</h2>
<select id="testSel">
<option value="0">선택하세요.</option>
</select>
<button onclick="setSelect()">셀렉트 값 설정</button>
<script>
'use strict';
const fruitList = [
{ oKey: 'apple', oVal: '사과' },
{ oKey: 'banana', oVal: '바나나' },
{ oKey: 'orange', oVal: '오렌지' },
{ oKey: 'peach', oVal: '복숭아' },
];
const targetSel = document.getElementById('testSel');
function setSelect(){
// foreach(function(item, index, array)
fruitList.forEach(function(list, i){
// 앞에는 item이 찍히고 그 다음은 index가 찍힌다.
//console.log(list, i);
const opt = document.createElement('option'); // <option></option>
opt.setAttribute('value', list.oKey); // <option value='apple'></option>
opt.innerText = list.oVal; // <option value='apple'>사과</option>
targetSel.appendChild(opt);
});
}
</script>
</body>
</html>
** 실행결과
'웹_프론트_백엔드 > 프론트엔드' 카테고리의 다른 글
| 2021.01.10 (0) | 2021.01.11 |
|---|---|
| 2020.09.27 (0) | 2020.09.29 |
| 과제-주민등록번호 검증 페이지 작성 (0) | 2020.09.25 |
| 2020.09.20 (0) | 2020.09.22 |
| 2020.09.19 (0) | 2020.09.22 |