DOM
Document Object Model
- JavaScript를 이용해 Element 속성값을 얻어내거나, 변경하는 방법
- DOM은 JavaScript가 아닙니다. (JavaScript를 이용해 DOM구조에 접근)
- HTML문서의 구조와 관계를 객체(Object)로 표현한 모델입니다.
- 트리 구조
- Document라는 전역변수로 접근이 가능
기타 상식
$0 는 클릭한 현재 값을 의미한다.
<div id="practice" class="highlight red">
Here is one Element
</div>태그 이름 : div
id : practice
class : highlight, red
내용 : Here is one Element
<body>
<div id="practice" class="highlight red">
Here is one Element
<span>자식도 있습니다.</span>
<span>자식이 여러개 입니다.</span>
</div>
</body>기준은 div
부모 엘리먼트 : body (1개)
자식 엘리먼트 : span (2개)
log 와 dir의 차이
ex) console.log 입력시
<input id="username" type="text" placeholder="아이디를 입력하세요">ex) console.dir 입력시
input#username속성에 대한 값들을 구체적으로 알아볼 수 있다.
유용한 Element 객체에 대해서 알아보자
- tagName : 태그 이름 ex) li, div 등등
- id : id
- classList : class목록
- className : class 문자열
- attributes : 속성 객체
- style : 스타일 객체
- innerHTML, innerText, textContent : Element에 담긴 내용
- value : form 입력 값
- children : 자식 Element
- parentElement : 부모 Element
- childNodes : 자식 노드
- datest : data- 속성에 담긴 값
- onclick, onmouseover, onkeyup 등 : 이벤트
- offsetTop, offsetLeft, scrollTop, scrollLeft, clientTop, clientLeft : 좌표 정보
- offsetWidth, offsetHeight, scrollWidth, scrollHeight, clientWidth, clientHeight : 크기 정보
children과 childNodes의 차이 (참고 사항)
childeNodes는 자식 Element의 입력값까지 보여준다.
children은 Element가 몇개인지, 무엇인지까지만 알 수 있다.
이벤트
특정 버튼을 눌렀을 때 액션이 발생한다 == 이벤트
ex) HTML
<button>Click</button>ex) JavaScript function 생성
$0.onclick = function () {
console.log('Hello World');
} ex) JavaScript 이벤트 구현
$0.addEventListener('click', function() {
console.log('Hello World');
}Element 선택 방법
JavaScript를 통해 특정 Element를 선택하고 가져오는 방법
- getElementsByTagName : 태그를 이용
- getElementById : id를 이용 (id는 unique기 때문에 element다)
- getElementsByClassName : class를 이용
- querySelector / querySelectorAll : selector를 이용
현재는 querySelector 와 querySelectorAll에 대해서만 알아본다.
ex)
document.querySelectorAll('.comment')ex)
let allComments = document.querySelectorAll('.comment')
console.log(allComments[2]);
// 이런식으로 comment class를 불러올 수 있다.value 등록 방법
function getInputValue() {
// username을 선택한다.
// new-tweet을 선택한다.
// username의 값을 얻어온다.
// new-tweet의 값을 얻어온다.
let elUsername = document.querySelector('#username');
let elNewTweet = document.getElementById('new-tweet');
//여기서 querySelector 와 getElementById는 같은 역할을 한다.
// getElementById의 경우 #을 넣지 않는다.
console.log(elUsername.value);
console.log(elNewTweet.value);위와 같은 방법을 통해 console 창에 출력할 수 있다.
button을 통해 getInputValue 불러오기
document.querySelector('#register').onclick = getInputValue;button 클릭 시 getInputValue를 실행하면서 값을 얻어올 수 있게 된다.
DOM 조작 (innerHTML)
innerHTML 속성은 읽기 뿐 아니라, 쓰기도 가능한 속성입니다.
가장 쉽지만, 느리고 보안에 취약합니다. (textContent를 권장합니다.)
ex) HTML 코드
<div id="target">변경 전</div>ex) JavaScript
let target = document.querySelector('#target');
target.innerHTML = `
<span>변경 후</span>
`;ex) HTML 출력 결과
<div id="target">
<span>변경 후</span>
</div>DOM 조작 (메소드)
Element를 만드는 메소드는 반드시 알아야 합니다. innerHTML을 이용한 생성에 비해 다소 복잡하지만 메소드를 이용한 Element 생성은, 생성과 동시에 이벤트 핸들러 등록이 가능한 장점이 있습니다.
ex) HTML
<div id="target">변경 전</div>ex) JavaScript
let target = document.querySelector('#target');
let newSpan = document.createElement('Span'); // span Element를 만듭니다.
newSpan.innerHTML = '변경 후';
target.appendChild(newSpan); // target 아랫쪽에 newSpan(span)을 추가합니다.ex) HTML 출력 결과
<div id="target">
변경 전
<span>변경 후</span>
</div>정리 (과정)
- 새 Element 만들기 (li)
function appendNewComment() {
let li = document.createElement('li');
li.className = 'comment';
li.innterHTML = `<div class="username">KJ</div>`
let parent = document.querySelector('#view-comments')
parent.appendChild(li)
}- 삽입하기
appendNewComment();DOM 조작 (<template>태그) => 숙련됐을 때 따로 연습하기
HTML 조각을 HTML 내에 정의할 수 있습니다.
ex) HTML
<template id="will-be-rendered">
<span>변경 후</span>
</template>
<div id="target">변경 전</div>ex) JavaScript
let target = document.querySelector('#target');
let template = document.querySelector('#will-be-rendered');
// #will-be-rendered 안쪽 내용을 자식 노드를 전부 포함하여 복사합니다.
let newContent = document.importNode(template.content, true);
// target 내용을 비웁니다.
target.innerHTML = '';
target.appendChild(newContent);