오늘은 DOM의 기초와 DOM을 한번 다뤄볼 것이다!! ( 중간에 날라가서 2번째 쓰는 중... ㅜㅜ )
DOM ?
Document Object Model의 약자, HTML 요소를 Object처럼 조작할 수 있는 모델로 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있다. DOM은 document 객체에 구현되어 있다. 만약 body에 접근하고 싶으면 document.body를 통해 접근할 수 있다.
TIP!
DOM 구조를 조회할 때에는 console.dir 이 유용하다. DOM을 객체 모습으로 출력해준다 !
아래의 코드에서 body의 자식요소를 찾아보자 !
<html>
<body>
<div id="nav">
<div class="logo"></div>
<div class="menu-wrapper">
<div class="menu"></div>
<div class="menu"></div>
<div class="menu"></div>
<div class="profile-photo"></div>
</div>
</div>
<div id="news-contents">
<div class="news-content-wrapper">
<div class="news-picture"></div>
<div class="news-title"></div>
<div class="news-description"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>body의 자식요소를 찾으려면 먼저 body에 접근해야 한다. 앞서 말했듯 document.body를 통해 객체를 조회해 보면 다양한 속성들이 존재한다. 그중 childern을 찾아보면 body의 자식요소에 접근할 수 있다. document.boyd.childern으로 바로 조회할 수 있다.
이렇게 document 객체를 통해 html 요소에 접근해서 html코드를 동적으로 만들 수 있다는 감이 올거다. 그러면 이제 직접 DOM을 다뤄볼 예정이다.
document 객체에는 많은 속성과 메서드들이 존재하는데 그 중 CRUD (create , read , update, delete)에 대해 학습해 보자
CREATE
새로운 요소를 만들 때에는 document 객체의 createElement 메서드를 이용하여 만들고 싶은 요소를 만들 수 있다.
const newDiv = document.createElement('div')위의 코드는 <div> 요소를 만든 것이다. 여기서 중요한 점은 DOM은 트리구조로 되어있는데 지금 만든 div는 연결되어 있지 않고 생성만된 상태이다. 따라서 생성한 엘리먼트를 연결해 주기 위해선 APPEND 가 필요하다.
document.body.append(newDiv)이렇게 연결하고자하는 요소. append( 연결할 요소)로 쓰면 연결이 완료된다.
READ
HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector 을 활용해 첫 번째 인자로 셀렉터를 전달하여 확인할 수 있다.
셀렉터로는 1. HTML 요소 , 2. id , 3. class 세가지가 가장 많이 사용된다.
const manchoon = document.querySelector('.me')querySelector로 클래스 이름이 me 인 엘리먼트 중 첫 번째 엘리먼트를 조회할 수있다. 만약 클래스가 me 인 요소가 여러 개 있다면
querySelectorAll 을 사용하면 된다. 조회하는 것은 정말 많이 사용되기 때문에 외워두면 좋을 거같다 !
UPDATE
HTML 엘리먼트를 변경 할 수 있다. 요소를 생성하고 연결하고 나서 만약 생성한 div 엘리먼트에 문자열을 입력해주고 싶다면 ?
const newDiv = document.createElement('div')
newDiv.textContent = '안뇽하세용 저는 만춘이에용'textContent 를 사용해서 문자열을 추가할 수 있다. 만약 클래스를 추가하고 싶다면 ?
newDiv.classList.add('newClass')classList.add 를 통해 클래스를 추가해 줄 수 있다. 만약 다른 속성을 추가하고 싶다면 setAttribute(속성이름 ,속성값) 을 사용하면된다. 만약 버튼을 비활성화 시키고 싶다면 ?
const button = document.querySelector("button");
button.setAttribute("disabled", ""); //true위의 코드 처럼 버튼의 disabled 속성을 true 로 설정해주면 됩니다.
DELETE
HTML 엘리먼트를 삭제할 수 있습니다. 삭제하는 방법에는 여러가지가 존재하는데 삭제하려는 요소의 위치를 알고 있는 경우에는 remove 메서드를 활용하면 삭제 할 수 있습니다.
const container = document.querySelector('#container')
const newDiv = document.createElement('div')
container.append(newDiv)
newDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.아까 말했듯 위의 코드에서는 querySelector 를 활용해 첫번째 요소만 가져왔다. 만약 여러개의 자식요소를 지우고 싶다면 innerHTML 을 이용하여 간단하게 삭제할 수 있다.
document.querySelector('#container').innerHTML = '';위와 같이 작성하면 컨터이너의 모든 자식요소를 지울 수 있다. innerHTML 을 이용하면 간편하지만 보안에서 몇가지 문제를 가지고 있다. 따라서 다른 방법도 알아두는 것이 좋다.
removeChild 는 자식요소를 지정해서 삭제하는 메서드이고 모든 요소를 삭제하기 위해선 반복문을 활용하면 된다.
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}위의 코드는 자식요소가 남아있지 않을 때 까지 첫번째 자식요소를 삭제한다.
오늘은 이렇게 DOM에대해 다뤄보았다. HTML을 동적으로 다룬다는 것이 참 흥미로웠고 자주 사용될 것이기 때문에 완벽히 익혀둬야 될 것 같다 !
오늘도 열공 !
'HTML-CSS-JavaScript > JavaScript' 카테고리의 다른 글
| [javascript] 비동기 - 타이머 API (0) | 2023.03.21 |
|---|---|
| [javascript] 동기-비동기 용어 설명 (0) | 2023.03.17 |
| [javascript] 문자열 - 숫자는 ? "10" - 1 = ? (0) | 2023.03.04 |
| [javascript] Scope에 대해 (2) | 2023.03.02 |
| [javascript] 원시 자료형과 참조 자료형 , 얕은 복사와 깊은 복사 (0) | 2023.03.02 |
