학습 목표
- DOM의 개념을 이해할 수 있다.
- DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다.
- HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다
- 태그가 적용되는 위치에 따라서 실행 결과가 달라질 수 있음을 이해할 수 있다.
DOM이란 ?
Document Object Model의 약자로, HTML 요소를 Object 객체처럼
조작(Manipulation)할 수 있는 Model이다
dom은 document 객체에 구현되어 있습니다
dom구조를 조회할때는 console.dir을 사용하여 DOM을 객체의 모습으로 출력합니다.
자식,부모 엘리먼트 찾기
document 객체에서 html의 자식과 부모 엘리먼트를 찾는 방법은 다음과 같다
document.body.children body태그 안에 자식엘리먼트를 조회
ex)
document.body.children[0].parentElement 자식엘리먼트중 0번째 인덱스의 부모엘리먼트를 조회 , 부모엘리먼트인 body가 출력된다HTML에 JavaScript 적용 (body태그 안에 적용해야한다)
<script src="myScriptFile.js"></script>보기와 같이 HTML에 JavaScript를 적용하기 위해서는 script 태그를 이용한다
근데 이 코드를 css처럼 head 태그 안쪽에 입력하는 경우
js파일에서 body안에 html요소를 DOM으로 조작해도 적용되지않는다
이미 head태그 안에서 js 파일이 종료됬기 때문이다
따라서 body안쪽에 요소를 조작하는 DOM을 사용할때는 body태그가 종료되기 직전에
js 파일을 html과 연결한다
DOM으로 HTML 조작
학습 목표
- DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.
- createElement - CREATE
- querySelector, querySelectorAll - READ
- textContent, id, classList, setAttribute - UPDATE
- remove, removeChild, innerHTML = "" , textContent = "" - DELETE
- appendChild - APPEND
- innerHTML과 textContent의 차이
CREATE - createElement
먼저 createElement메소드로 div 엘리먼트를 만듭니다
document.createElement('div')
const tweetDiv = document.createElement('div') // twwetDiv 변수에 div엘리먼트를 할당한다
현재는 dom의 트리구조를 보면 생성된 div엘리먼트가 부모엘리먼트에 연결되어있지 않는 상태이다
APPEND - append, appendChild
append 메소드를 통해 연결되어 있지 않은 변수 tweetDiv를 body엘리먼트 안에 넣는다
document.body.append(tweetDiv)READ - querySelector, querySelectorAll
querySelector
querySelector 에 '.tweet' 을 첫 번째 인자로 넣으면,
클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있다
const oneTweet = document.querySelector('.tweet')
여러 개의 엘리먼트를 한 번에 가져오기 위해서는, querySelectorAll 을 사용한다
클래스 이름이 tweet 인 모든 HTML 엘리먼트를 유사 배열로 받아옵니다.
const tweets = document.querySelectorAll('.tweet')생성한 div엘리먼트를 body가 아닌 container 엘리먼트에 넣는 방법은 다음과 같다
// id가 container인 엘리먼트를 조회하여 변수에 할당하고
// 그 변수에 append 메소드를 통해 생성한 div엘리먼트를 연결한다
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)UPDATE - textContent, classList.add
앞서 append 메소드를 통해 연결한 콘텐츠가 비어있는 엘리먼트나
기존의 엘리먼트에 textContent를 사용하면 콘텐츠에 내용을 추가할수있다
console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>css를 적용하기 위해 div엘리먼트 class 속성을 추가하려면 다음과 같다
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>
비슷한 방법으로 id나 class이외의 다른속성을 추가할 수 있는 setAttribute 함수가 있다
element.setAttribute('attribute_name','attribute_value');
함수의 인자로 속성의 키와 값을 입력받아 엘리먼트에 속성을 추가한다
ex)oneDiv.setAttribute( 'href', 'https://velog.io' );DELETE - remove, removeChild
- 삭제하려는 엘리먼트의 위치를 알고 있는 경우
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.- 여러개의 엘리먼트 삭제시 innerHTML 로 간단하게 모두 삭제
document.querySelector('#container').innerHTML = '';innetHTML은 간편하지만 보안상의 문제가 있다
innetHTML을 대신할 removeChild 메소드는 자식 엘리먼트를 지정해서 삭제하는 방법.
반복문을 통해 모든 자식엘리먼트를 삭제 할 수 있다
- 자식엘리먼트를 지정해서 삭제하는 방법
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
} // 자식엘리먼트가 전부 삭제될때 까지 , 첫번째 자식엘리먼트를 삭제하는 코드