DOM (Document Object Model)
- JavaScript Object처럼 html요소를 조작할 수 있는 모델
- DOM을 이용하여 html로 구성된 웹페이지를 동적으로 움직이게 만들 수 있음
html에 JavaScript 적용하기
웹브라우저의 코드 해석 과정에서 <script> 요소를 만나면 웹브라우저는 html해석을 멈추고 <script> 요소를 먼저 실행한다. <script> 추가하는 2가지 방법이 있다.
<head>안쪽에 삽입하는 경우<body>요소가 끝나기 전에 삽입하는 경우
DOM구조 조회
console.dir(XXX)
- 제어할 대상 찾기
getElementById(),getElementsByName(),getElementsByTagName() - 예시
ex)<div>요소를 전부 조회하는 방법
document.getElementsByTagName('div')
document.querySelectorAll('div')console.log 이용하여 class이름으로 자식요소 찾기
html 화면
개발자도구 화면
변수로 선언하여 찾기
부모요소 가리키는 속성 찾기
.parentNode
DOM 트리구조
DOM 다루기 (Create, Read, Update, Delete => CRUD) & Append
새로운 <div>요소 만들기
document.createElement('div') //<div></div> const tweetDiv = document.createElement('div') // 변수를 선언하여 작업 결과를 할당 // 현재까지는 화면상에 변화 없음. 엘리먼트를 화면에서 확인하기 위해서는 APPEND 작업을 통해 트리구조에 연결하는 작업이 필요
APPEND
document.body.append(tweetDiv);// 화면 상에 변화는 없지만 개발자도구 Elements탭에서는 새로 생성된
div가 확인됨
const container = document.querySelector('#container') const tweetDiv = document.createElement('div') container.append(tweetDiv)container의 마지막 자식요소로 tweetDiv 추가
READ
- 셀렉터(selector)로 읽기
- html요소 (
"div") - id요소 (
"#tweetList") - class (
".tweet")
- html요소 (
- 예시
const oneTweet = document.querySelector('.tweet') // querySelector로 클래스 이름이 tweet인 html요소 조회 const tweets = document.querySelectorAll('.tweet') // querySelectorAll로 클래스 이름이 tweet인 **모든** html요소를 조회
cf) get메소드와 DOM조회 메서드는 동일
const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // trueelement안에 문자열 입력 및 class명 추가
textContent
const oneDiv = document.createElement('div'); console.log(oneDiv) // <div></div> oneDiv.textContent = 'dev'; console.log(oneDiv) // <div>dev</div> oneDiv.classList.add('tweet')// 클래스명 추가 console.log(oneDiv) //<div class='tweet'>dev</div> const container = document.querySelector('#container') container.append(oneDiv); // container div안에 넣어주고 적용시키기
.value
let elInputUsername =
document.querySelector('#username')
console.log(elInputUsername);
elInputUsername.value = '김코딩';
setAttribute()
선택한 element의 속성값(attribute)을 정함
element.setAttribute('attributeName', 'attributeValue')
=> attributeName: 속성 이름, attributeValue: 속성값
예시)
document.getElementbyId('xyz').setAttribute('title', 'This is title')
=> id값이 xyz인 요소의 title속성을 this is title로 바꿈
예시)
<p><a id="abc" href="#">LIVE BLOGGER</a></p>
document.getElementById( 'abc' ).setAttribute( 'href', 'https://urliveblogger.blogspot.com' );Delete
- 삭제하려는 요소의 위치를 알고 있는 경우
const container = document.querySelector('#container') const tweetDiv = document.createElement('div') container.append(tweetDiv) tweetDiv.remove() // 삭제하는 방법
- 여러개의 자식 요소를 지우는 경우 =>
innerHTML
document.querySelector('#container').innerHTML = ''; // id가 container인 요소 아래의 모든 요소를 지움
- removeChild
innerHTML의 경우 보안에서 몇 가지 문제점을 가지고 있음
removeChild는 자식요소를 지정해서 삭제할 수 있음
모든 자식 요소를 삭제하기 위해 반복문(while, for)을 활용 할 수 있음
const container = document.querySelector('#container'); while (container.firstChild) { container.removeChild(container.firstChild);
const container = document.querySelector('#container'); while (container.children.length > 1) { container.removeChild(container.lastChild); }container의 자식 요소가 1개만 남을 때까지 마지막 자식 요소를 제거함
const tweets = document.querySelectorAll('.tweet') tweets.forEach(function(tweet){ tweet.remove(); }) // or for (let tweet of tweets){ tweet.remove() }클래스 이름이 tweet인 요소만 찾아서 지우는 방법
oneThing