[JavaScript] 기본 문법 (DOM : Document Object Model, Class 속성 추가/삭제)

 ※ 이 글에서 다룬 기반기술, 프론트엔드, 백엔드, 데브옵스 등 풀스택 개발 지식은 모두 한화시스템 Beyond SW Camp 12기에서 배운 내용을 복습한 것입니다.

 

DOM : Document Object Model

1. DOM 요소 찾기

document.getElementById("id명");
document.getElementByClassName("class명");
document.getElementByTagName("태그명");

//예시
let getTagById = document.getElementById("h1_2");
let getTagByClassName = document.getElementsByClassName("color_red");
let getTagByTagName = document.getElementsByTagName("h1");

 

2. DOM 요소 수정하기

요소.innerHTML = 내용

//예시
getTagById.innerHTML = "변경";

3. CSS 속성에 접근하기

document.요소명.style.속성명

//예시
document.getElementsByTagName("h1").style.backgroundColor = "blue";

color처럼 한 단어 속성명은 그대로 사용

background-color, border-radius와 같은 속성은 backgroundColor, borderRadius처럼 표시

4. DOM 이벤트 추가하기

요소.addEventListener(이벤트, 함수, 캡처 여부);


//예시
const btn = document.querySelector("#btn");
btn.addEventListener('click', () => {
	console.log("버튼 눌렀다");
 });

• 이벤트 : 이벤트 유형 지정 (click, keypress...)
• 함수 : 이벤트가 발생하면 실행할 명령이나 함수 지정. 함수를 정의할 때는 event 객체를 인수로 받음.
• 캡처 여부 : 이벤트를 캡처하는지 여부 지정. 기본값 false

addEventListener() 함수 끝에 세미콜론(;) 꼭 붙이기

 

5. DOM 노드 추가하기

DOM에서 새로운 노드를 만들어 추가하거나 삭제하려면 노드 리스트를 사용해야함.

노드 리스트 : querySelectorAll() 메서드 사용 시 노드를 한꺼번에 여러 개 가져옴. 이때 노드 정보를 여러 개 저장한 것.

<ul id = "itemList">
	<li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
</ul>

document.querySelectorAll("li")

위의 HTML 코드에서 이런 JavaScript 명령어를 실행하면 NodeList(3) [li, li, li]라고 표시된다.

document.querySelectorAll("li")[1]

이 명령어로 2번째인 <li>CSS</li>를 가져올 수 있다.

 

//요소 노드 만들기
let newItem = document.createElement("li")

//텍스트 노드 만들기
let textNode = document.createTextNode("TypeScript")

//노드 연결하기
newItem.appendChild(textNode)

//자식 노드로 연결하기
document.querySelector('ul').appendChild(newItem)

 

//요소 노드 만들기
let newImg = document.createElement("img")

//속성 추가하기
newImg.src = "images/books.png"

//자식 노드 연결하기
document.body.appendChild(newImg)

6. DOM 노드 삭제하기

heading = document.querySelector('h1')
heading.remove()

---

Class 속성 추가/삭제

document.querySelector('h1').classList

document.querySelectorAll("ul > li")[2].classList

add(클래스명)	지정한 클래스를 classList에 추가
remove(클래스명)	지정한 클래스를 classList에서 제거
toggle(클래스명)	클래스가 있으면 classList에서 제거, 없으면 classList에 추가
contains(클래스명)	지정한 클래스 classList에 있는지 확인

 

add() 함수를 사용하면 특정 클래스 스타일을 선택한 요소에 적용할 수 있음