출처 : 코드스테이츠
THE DOM IS...
· HTML 문서의 구조적 관계와 속성에 대한 모델
· HTML 문서를 대표하는 트리 구조
· JavaScript에서 document 객체를 통해 전역으로 접근할 수 있음
THE DOM IS NOT...
· JavaScript 언어의 한 부분
ANATOMY OF AN HTML ELEMENT
Element는 Opening Tag와 Closing Tag를 다 포함한 것
사진출처 : MDN
$0
선택했던 것에대한 정보가 나옴.. ?
console.dir($0) 해보면
element에 내장된 속성을 객체로 볼 수 있음.
요소를 선택할때마다 $0이 바뀜
$0.parentElement / 현재 선택된 요소의 부모를 확인할 수 있음.
$0.children / 현재 선택된 요소의 자식을 확인할 수 있음.
$0.innerHTML = '입력한대로 바뀜'
IT CONTAINS...
· nodeName
· className
· innerHTML
· textContent
· style
· attributes
· childNodes / parentNode
· children / parentElement
· dataset
· offsetTop / offsetLeft / offsetWidth / offsetHeight
· clientTop / clientLeft / clientWidth / clientHeight
· onEventName (e.g. onClick)
<ul>을 선택하고 $0.children하면
리스트가 3개이므로 HTMLCollection(3) [li, li, li] 이렇게 뜸.
그런데 $0.childNodes라고하면 NodeList가 7개가 뜸.
<li>, </li>, <ul>, </ul>간의 간격을 text라고함 text까지 포함하여 7개다.
ELECTING ELEMENTS
어떻게 HTML element를 JavaScript를 이용해 가져올 수 있을까요?
· tag name을 이용: getElementsByTagName
· id 속성을 이용: getElementById
· class name을 이용: getElementByClassName
· selector를 이용: querySelector / querySelectorAll
ex )
document.getElementById('selecting-elements') // 해당 id를 불러올 수있음
document.getElementByClassName('present') // 해당 class를 불러옴
document.querySelector('#selecting-elements') // 해당 id를 불러올 수있음
document.querySelectorAll('.present') // 해당 class를 불러옴
document.querySelectorAll('h2') // 해당 태그를 다 불러옴
ADDING EVENT HANDLER
· Event: 어떠한 동작의 발생을 전달하기 위해 객체가 보낸 메시지
· e.g.
· 웹페이지의 로드
· 버튼의 클릭
· 브라우저 창의 Resize
· on~~ 이렇게 적힌 것은 대부분 event
· DOM을 이용해 이벤트 핸들러를 추가할 수 있음
· onEventName (e.g. onClick)
(콘솔에서)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var btn = document.querySelector('#mybutton'); // mybutton이라는 id를 선택
console.dir(btn) // 여러정보와 이벤트목록을 확인할 수있음 ..
btn.onclick = function() {
console.log('클릭!!!!');
};
// 이렇게 입력할 시 버튼을 클릭하면 '클릭!!!!' 이라고 콘솔에 입력된다.
var input = document.querySelector('input');
input.onkeyup = function() {
console.log('타이핑 중...')
}
// 입력할때 콘솔창에 타이핑 중이라고 뜸.
|
cs |
input text에 입력한 값대로 결과창에 표시하기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="myinput" type="text">
<button id="mybutton">버튼</button>
<div id="result">결과창</div>
<script type="text/javascript" src="main.js">
</script>
<!-- 자바스크립트 불러오기 위치는 바디위에올려놓으면 됨-->
</body>
</html>
|
cs |
main.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
var myinput = document.querySelector('#myinput');
var mybutton = document.querySelector('#mybutton');
var result = document.getElementById('result');
console.log(myinput);
console.log(mybutton);
console.log(result);
// 1. mybutton이 눌렸을 때,
// 2. myinput의 값을 가져온다.
// 3. 가져온 값을 result에 찍는다.
mybutton.onclick = function() {
var myvalue = myinput.value;
result.innerHTML = myvalue;
}
// result에 myvalue값이 나옴.
|
cs |
결과
main.js (입력과 동시에 결과창에 보여지기)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 1. myinput에 타이핑을 할 때,
// 2. myinput의 값을 가져온다.
// 3. 가져온 값을 result에 찍는다.
function printResult() {
var myvalue = myinput.value;
result.innerHTML = myvalue;
}
myinput.onkeyup = printResult;
// printResult();라고 안쓰고 printResult;라고 쓴 이유 !
// printResult();라고 입력해버리면, 함수가 실행되버리기 떄문.
// myinput.onkeyup = 이곳에는 함수가 입력되어야 할 자리기 때문.
|
cs |
CREATING ELEMENT
어떻게 JavaScript를 이용해 HTML element를 생성하고 렌더링할 수 있을까요?
|
1
2
3
4
5
6
|
function createButton() {
var btn = document.createElement("BUTTON");
var t = document.createTextNode("Click Me!");
btn.appendChild(t);
document.body.appendChild(btn);
}
|
cs |
THE JQUERY WAY!
|
1
2
3
4
5
|
function createButton() {
var $btn = $('<button>Click Me!</button>');
var $body = $('body');
btn.appendTo($body);
}
|
cs |
MORE SIMPLY
|
1
2
3
|
function createButton() {
$('<button>Click Me!</button>').appendTo('body');
}
|
cs |
JQUERY (OPTIONAL)
WHY JQUERY?
· 커뮤니티의 지원이 훌륭합니다
· DOM 조작을 비교적 수월하게 합니다
· AJAX의 사용이 간편합니다
· 간단한 애니메이션도 쉽게 만들 수 있습니다
· 다양한 플러그인들이 있습니다
· 버그의 신속한 수정이 이루어지고 있습니다
https://www.webdesignerdepot.com/2012/09/jquery-the-good-the-bad-and-the-ugly/
· 강력한 method chaining을 쓸 수 있습니다
BASIC JQUERY SYNTAX
· Element 선택
· $(selector)
· Element 생성
· $(htmlstring)
· $('<div></div>')
· 항상 jQuery object를 리턴합니다 (array-like)
USEFUL METHODS
· 조작
· addClass / removeClass
· html / text
· append / appendTo
· prepend / prependTo
· remove / empty
· val
· 이벤트
· on / off
· 효과
· show / hide
JQUERY CHEET SHEET
http://htmlcheatsheet.com/jquery/
'Programing > HTML & CSS' 카테고리의 다른 글
| [CSS] CSS & SELECTOR (0) | 2019.02.24 |
|---|---|
| [HTML] WHAT IS HTML (0) | 2019.02.24 |
