DOM이란
- Document Object Model의 약자로 자바스크립크를 이용해서 엘리먼트의 속성을 얻어내거나 변경하는 방법을 통칭
- HTML 문서의 구조와 관계를 객체(Object)로 표현한 모델
- 트리구조
- document라는 전역변수로 접근이 가능
<body>
<div id="practice" class="hight red">
여기 엘리먼트가 있습니다.
<span>자식1</span>
<span>자식2</span>
</div>
</body>div#practice에 대하여
태그 이름 -> div
id -> practice
class ->hight, red
안쪽에 담긴 내용 -> 여기 엘리먼트가 있습니다.
부모 엘리먼트 -> body
자식엘리먼트 ->span, span
콘솔에서 확인
console.dir(document) //Object처럼 html을 확인 할 수 있다.console.dir($0) //Elements와 Console에서 내가 선택한 엘리먼트를 $0로 바로 조회가 가능유용한 속성들
태그이름, id, class목록, class문자열, 속성 객체
$0.tagName // 태그 이름
"INPUT"
$0.id // id
"username-content"
$0.classList // 클래스 목록 유사배열의 형태
DOMTokenList(3) ["comment", "hello", "world", value: "comment hello world"]
$0.classList[0]
"comment"
$0.className //클래스 문자열
"comment hello world"
$0.attributes //속성 객체
NamedNodeMap {0: id, 1: type, id: id, type: type, length: 2}
length: 2
0: id
1: type
id: id
type: type
__proto__: NamedNodeMap엘리먼트에 담긴내용
$0.innerText: 텍스트만 추출한다. 잘 사용하진 않는다.
$0.innerHTML: tag를 포함한 전체를 추출한다. html 통째로 내용을 바꿀 때 사용한다.
$0.textContent: 공백이 모두 포함이 된 텍스트를 추출 한다. 하나의 단일 엘리먼트에 내용을 채울 때 사용한다.
innerHTML과textContent는 실제로 내용을 바꿀 수 있다.
$0.textContent = "Friends don't lielie"
"Friends don't lielie"
$0.innerHTML = "<a href=www,naver.com>네이버</a>" //실제로 링크가 걸린다.
"<a href=www,naver.com>네이버</a>"
$0.textContent = "<a href=www,naver.com>네이버</a>" // 링크가 아닌 문자열로만 출력
"<a href=www,naver.com>네이버</a>"form 입력 값(중요)
$0.value //내가 입력한 값이 나온다
""
//웹에서 값을 입력한 후
$0.value
"dsfsfsf"
//웹에서 또 다른 값을 입력한 후
$0.value
"ghgdhd"자식 엘리먼트, 자식 노드
<body>
<div id='a' class='bold red'>
엘리먼트하나
<span>자식 하나</span>
<span>자식 둘</span>
</div>
</body>-
자식 엘리멘트(children) : span, span
-
자식 노드(childNodes) : text, span, text, span, text
텍스트까지 다 나오게 된다.
data-* 속성에 담긴 값
dataset: 태그 자체에 데이터를 담고 싶을 때 사용하는 방법
data 다음 대쉬가 오는 경우에 사용할 수 있다.
html
<div data-user="steve" data-role="moderator" data-user-id= "1"> Steve Lee</div>JavaScript
$0.dataset.user //'steve'
$0.dataset.role //'moderator'
$0.dataset.userId //'1'클릭 이벤트
클릭이벤트를 거는 방법
function clickE() {console.log('클릭했습니다.');}
$0.onclick = clickE;엘리먼트 선택(중요)
$0이 아닌 JavaScript를 이용해, 특정 엘리먼트를 선택하고, 가져올 수 있다.
- 태그를 이용: getElementsByTagName
- id를 이용: getElementById
- class를 이용: getElementsByClassName
- selector를 이용: querySelector / querySelectorAll
//username이라는 class 선택
document.querySelectorAll('.username')
//Nodelist라는 유사배열 형태로 나오게 된다.
NodeList(4) [div.username, div.username, div.username, div.username]
/*
length: 4
0: div.username
1: div.username
2: div.username
3: div.username
__proto__: NodeList
*/id를 선택 할 때는 id는 유일한 값이니까
querySelectorAll로 배열로 받을 필요없이 querySelector로 바로 받아 올 수 있다.
document.querySelector('#username-content')
//<input id="username-content" type="text">이벤트(중요)
- onclick
function getInputValue(){
//username을 선택한다
//new-tweet을 선택한다
let elUsername = document.querySelector('#username-content');
let elNewTweet = document.getElementById('comment-content');
//querySelector와 달리 getElementById에서 id를 가져오기로 명시했으니# 넣지않는다
//usernam의 값을 얻어온다.
//new-tweet의 값을 얻어온다
console.log(elUsername.value);
console.log(elNewTweet.value);
}
//버튼을 누르면 함수 실행
document.querySelector("#tweetBtn").onclick = getInputValue;DOM조작(중요)
innerHTML
innerHTML속성은 읽기 뿐 아니라 쓰기도 가능한 속성이다.
HTML태그를 입력할 수도 있다.
가장 쓰기 쉬우나, 느리고 보안 위협이 있다.
메소드
엘리먼트를 만드는 메소드를 사용한다(createElement).
다소 복잡하나, 메소드를 이용한 엘리먼트 생성은, 생성과 동시에 이벤트 핸들러 등록이 가능하다는 장점이 있다.
프로세스
function appendNewTweet(id,content){
//1. 먼저 새 엘리먼트 li를 만든다
let li = document.createElement("LI");
//2. li에 내용을 추가한다
li.className = 'comment';
li.innerHTML=`<div class="username">`+id+`</div><div class="comment">`+content+`</div>`
//3. 삽입하려는 부모 엘리먼트를 선택하여 가져온다
let parent = document.querySelector("#allcomments");
//4. 부모 엘리먼트에 새 엘리먼트 li를 추가한다
parent.appendChild(li);
}
appendNewTweet('dd','ddddddd') //실제로 웹에 추가가 되는 모습을 확인할 수 있다.삭제하는 방법
//HTML
<div id="target">변경 전</div>
//JS
let target = document.querySelector('#target');
taget.remove();html 출력결과 div#target은 제거되어 있다.
<template>태그
<template>태그는, 실제로 스크립트를 이용해 어딘가 붙여넣기 전까지는 화면에 보이지 않는 HTML조각이다.
template의 내용을 반복적으로 사용하고 싶을때 유리한 방법
//HTML
// 템플릿 내용
<template id="will-be-rendered">
<li>
<div class="username">아이디</div>
<div class="tweet">트윗 내용</div>
<div class="username">2019-10-10</div>
</li>
</template>
<div id="target">변경 전</div>//JS
let target= document.querySelector("#target");
//template 가져오기
let tmpl = document.querySelector("#will-be-rendered");
let element1 = document.importNode(tmpl.content, true);
// 유저네임을 바꾸고 싶을때
element1.querySelector(".username").textContent ='steve'
//target에 추가
target.appendChild(element1);
HTML에 script 로딩하기
HTML body 끝나기 직전에 스크립트 삽입
<script src="____.js"></script>