html
과 javascript의 object
는 Tree구조다.
document
라는 전역변수로 접근이 가능하다.
DOM 구조 접근을 그저 JavaScript를 이용해서 접근할 뿐이다.
<body>
<div id="practice" class="highlight red">
여기 엘리먼트가 하나 있습니다
<span>자식 엘리먼트도 있습니다</span>
<span>하나 더 있습니다</span>
</div>
</body>
div#practice
기준으로
태그 이름: div
ID: practice
CLASS: highlight red
안쪽에 담긴 내용: 여기 엘리먼트가 하나 있습니다 ~ 하나 더 있습니다.</span>
부모 엘리먼트: body
자식 엘리먼트: span
, span
{
tagName: 'div',
id: 'practice',
classList: ['highlight', 'red']
textContent: '여기 엘리먼트가 하나 있습니다 자식도 있습니다 자식도 여럿 있습니다',
parentElement: 'body',
children: [
{
tagName: 'span'
textContent: '자식도 있습니다'
},
{
tagName: 'span',
textContent: '자식도 여럿 있습니다'
}
]
}
DOM을 대표하는 객체
document를 html element
형식으로 확인할 수 있다.
DOM을 대표하는 객체인 document의 다양한 속성
들을 확인할 수 있다.
현재 선택한 엘리먼트는 $0
라는 변수에 담긴다
엘리먼트를 console
창에서 확인할 수 있다.
태그이름
id
class 목록
유사 배열 형태
class 문자열
속성 객체
스타일 객체
엘리먼트에 담긴 내용
form 입력값
자식 엘리먼트
부모 엘리먼트
자식 노드
data-* 속성에 담긴 값
데이터를 엘리먼트에 직접 집어넣고 싶을 때
이벤트
좌표정보
크기 정보
innerHTML
, textContent
는 반드시 기억해두자.
$0
를 <li>
엘리멘트로 선택해보자.
실제로 화면에 렌더링
되고 있는 텍스트만 출력해서 보여준다.
렌더링된 화면이 아니라, 공백
까지 포함한다.
HTML 통째로 전체적으로 보여진다.
innerHTML
, textContent
는 실제로 내용을 바꿀 수 있다.
<input id="username" type="text" placeholder="아이디를 입력하세요" />
를 $0
으로 선택해준다.
입력한 값
을 의미한다.
$0.value
"내용을 다르게 입력했어요
<body>
<div id="practice" class="highlight red">
여기 엘리먼트가 하나 있습니다
<span>자식 엘리먼트도 있습니다</span>
<span>하나 더 있습니다</span>
</div>
</body>
children
: span, span
childNodes
: "\n 여기 엘리먼트가 하나 있습니다", span, "\n ", span, "\n "
단순 string이 아닌 'Text 노드'입니다. '문자열을 담은 객채'입니다.
Element
는 Node
에 속해있습니다.
Text
는 Element
는 아닙니다.
버튼을 눌렀을 때 생기는 action
<button>Click Me</button>
$0.onclick= function() {
console.log('thank you!')
}
// 참고: 위 내용을 아래와 같이 메소드를 이용해 구현할 수도 있습니다.
$0.addEventListener('click', function() {
console.log('thank you!')
});
$0
만 가지고 DOM을 다루기엔 한계가 있다.
JavaScript를 이용해, 특정 element를 선택하고 가져올 수 있다.
Tag
를 이용
elements
id
를 이용
element
class
를 이용
element
Selector
를 이용
'등록'버튼 눌렀을 때, username, new-tweet 받아오는 방법
<button id="register">등록</button>
button
에 대해 Javascript
에서 엘리먼트를 선택하는 방법
document.querySelector('#register')
여기에선, '#register'
가 셀렉터(선택자)이다.
innerHTML 속성은 읽기 뿐만 아니라, 쓰기도 가능한 속성
가장 쓰기 쉬운 속성이지만, 보안 위협이 있기 때문에 textContent
가 제일 안전하다.
<div id="target">변경 전</div>
let target = document.querySelector('#target');
target.innerHTML = `
<span>변경 후</span>
`
<div id="target">변경 후</div>
엘리먼트를 만드는 메소드는 반드시 알아두시기 바랍니다.
innerHTML
을 이용한 생성에 비해 다소 복잡하게 느껴질 수 있지만,
메소드를 이용한 엘리먼트 생성은 생성과 동시에 이벤트 핸들러 등록이 가능하다는 장점이 있습니다.
<div id="target">변경 전</div>
let target = document.querySelector('#target');
// span 엘리먼트를 만듭니다.
let newSpan = document.createElement('SPAN');
newSpan.innerHTML = '변경 후';
// target 아랫쪽에 newSpan 엘리먼트를 추가합니다.
target.appendChild(newSpan);
<div id="target">변경 후</div>
<div id="target">변경 전</div>
let target = document.querySelector('#target');
// target 엘리먼트를 삭제합니다.
target.remove();
div#target
은 사라지고 없습니다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="new-comment">
<div>댓글 9</div>
<input id="username" type="text" placeholder="아이디를 입력하세요" />
<input id="new-tweet" type="text" placeholder="댓글를 입력하세요" />
<button>등록</button>
</div>
<ul id="viwe-comments">
<li class="comment">
<div class="username">hoyoung</div>
<div class="contents">시각장애인들 짱</div>
<div>2019-10-11</div>
<div class="buttons"></div>
</li>
<li class="comment">
<div class="username">johnny</div>
<div class="contents">좋네요</div>
<div>2019-10-11</div>
<div class="buttons"></div>
</li>
<li class="comment">
<div class="username">steve</div>
<div class="contents">스티브가 쓴 글</div>
<div>2019-10-11</div>
<div class="buttons"></div>
</li>
</ul>
</body>
</html>
사용자 입력(onclick
, onkeyup
, onscroll
등)을 트리거로 발생한 이벤트 정보를 담은 객체
클릭이나 드래그하는 일
이벤트 발생 트리거가 된 엘리먼트
function handleClick() {
// 아래의 빈 칸(____)을 채우세요.
let currentMenu = event.target.textContent; // TODO
console.log(currentMenu + "를 클릭하셨습니다.");
}