DOM 조작하기

• getElementsByClassName()
• getElementById()
• getElementsByTagName()
• querySelector()
• querySelectorAll()
• createElement()
• textContent
• appendChild()
• insertBefore()
• removeChild()

😄 code 1. DOM 요소 가져오기

// HTML
<div>div입니다</div>
<h1 class="h1">h1입니다</h1>
<h1 class="h1">또 h1입니다</h1>
<h2 id="h2">h2입니다</h2>
<h3 class="h3">h3입니다</h3>
<h4 id="h4">h4입니다</h4>

// JavaScript
// 클래스명으로 DOM요소 가져오기
// 해당 클래스명을 가진 요소들을 전부 가져온다
// 여러개의 요소를 가져오기 때문에 배열로 반환한다
const h1 = document.getElementsByClassName('h1');
console.log(h1); // output : HTMLCollection(2) [h1.h1, h1.h1]

// id로 DOM요소 가져오기
// id는 유일한 값을 가지므로 하나의 요소만 반환한다
const h2 = document.getElementById('h2');
console.log(h2); // output : <h2 id="h2">h2입니다</h2>

// HTML 태그로 요소 가져오기
// 해탕 태그 전부를 가져오기 때문에 배열로 반환한다
const div = document.getElementsByTagName('div');
console.log(div); // output : HTMLCollection [div]

// querySelector로 가져오기
const h3 = document.querySelector('.h3');
console.log(h3); // output : h3.h3
const h4 = document.querySelector('#h4');
console.log(h4); // output : h4#h4

querySelector

• 해당하는 요소중 첫번째 요소만 반환한다
• 클래스명으로 찾아보고 싶으면 . 사용
• id명으로 찾아보고 싶으면 # 사용
• 아무것도 안넣으면 태그로 찾아본다

querySelectorAll

• 해당하는 요소 전부를 배열로 반환한다 (for문 등 이용해야함)
• 클래스명으로 찾아보고 싶으면 . 사용
• id명으로 찾아보고 싶으면 # 사용
• 아무것도 안넣으면 태그로 찾아본다

😄 code 2. DOM 요소 추가하기

// HTML
<section>
	<img src="home.png" alt="home" />
    <h1 id="h1">h1입니다</h1>
    <h3>h3입니다</h3>
</section>

// JavaScript
// section 태그 선택
const section = document.querySelector('section');
// 새로운 element(h2) 추가
const h2 = document.createElement('h2'); // <h2></h2>
// h2 element에 텍스트 추가 
h2.textContent = 'h2입니다'; // <h2>h2입니다</h2>
// <section>에 자식 노드로 <h2> 추가
section.appendChild(h2); 

• append는 IE에서 지원을 안하기 때문에 이전 브라우저 호환성을 고려한다면 appendChild()를 사용하는 것이 좋다 (동작은 비슷)

• appendChild()는 자식 요소를 부모 요소 끝부분에 추가해주기 때문에 부모요소 안의 특정 위치에 추가하고 싶으면 insertBefore()를 이용한다

  • section.insertBefore(새로 추가하는 노드, 참고할 노드)

😄 code 3. DOM 요소 삭제하기

// HTML
<section>
    <h1 id="h1">h1입니다</h1>
    <h3>h3입니다</h3>
</section>

// JavaScript
// section 태그 선택
const section = document.querySelector('section');
section.removeChild(h3); // h3 element 제거

😄 code 4. DOM 요소 속성 추가하기

요소.setAttribute(key, value)

• Ex) h2.setAttribute('class', 'h2'); // h2 element에 h2라는 클래스명 추가

요소.getAttribute(속성)

• 요소의 속성값 반환

요소.removeAttribute(속성)

• 요소의 속성 제거

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍