[JS]DOM 접근 및 조작하기

DOM에 접근하는 법을 배우기 전에, 왜 DOM에 접근 할 수 있어야 할까..? 

1. 사용자가 (<input> 태그를 사용한) id와 비밀번호 입력란에 작성한 값을 JavaScript에서 접근해서 가져와야 합니다. → 가져온 값으로 로그인 시도!
2. 사용자가 회원가입을 할 때 체크한 각종 동의항목의 체크 유무를 가져와야 한다. → 체크 유무를 JavaScript에서 확인해서 그 다음 페이지로 넘길지 말지 결정한다!
3. 토스나 신한은행 같은 은행 어플에서 이체하고 싶을 때, 사용자가 입력한 금액의 값을 가져와야 한다 → JavaScript에서 숫자 값을 가져와서 이체 로직 시도한다!

 

그렇다면 왜 DOM을 조작 할 수 있어야 할까?

1. 쿠팡사이트에서 검색한 나이키 신발! 사용자가 2페이지로 넘어가고 싶다면? → JavaScript에서 상품 목록의 이미지, 가격, 간단 설명 등 모든 내용을 바꿔줘야 한다. (HTML 변경)
2. 네이버의 실시간 검색~ 1초에 한 번씩 트렌드 검색어가 바뀌어야 할텐데 → JavaScript에서 1초에 한 번씩 인기 검색어의 텍스트 값을 바꿔줘야 한다.
3. gmail 페이지에서 아직 안 읽은 메일이 10개에서 11개로 변경되어야 한다면? → JavaScript에서 HTML에 접근하여 10을 11로 바꿔줘야 한다.
4. 구글 캘린더에서 내 일정을 초록색에서 노란색으로 변경하고 싶다면? → JavaScript에서 해당 스케줄의 HTML에 접근하여 노란색으로 변경해줘야 합니다! (CSS 변경)

👉 위와 같이 값을 접근해 가져오는 상황과 더불어 상황에따라 javascript를 통해 HTML, CSS 값을 변경해야 할 때, DOM에 접근 및 조작할 수 있어야 한다.

 

---

1. DOM 접근하기

1.1 Tag : getElementByTagName (태그 이름을 이용한 접근)

docment.getElementByTagName('p')

• 해당 페이지에 있는 모든 <p> 요소가 배열의 형태로 반환된다.

 

1.2 CSS 선택자 : querySelector (CSS 선택자를 이용한 노드 접근)

document.querySelector('.category_item')

• .category_item 클래스를 사용하는 첫 번째 요소가 반환
• getElementsByTagName와 달리 배열이 아닌 요소를 반환한다.
• query 검색한다, selector 선택자를
• querySelector를 사용할 때만 '.'을 사용한다.

 

1.3 id : getElementById (id를 이용한 접근)

document.getElementbyId('NM_NEWSSTAND_HEADER')

• document.getElementbyId('NM_NEWSSTAND_HEADER')

 

1.4 class : getElementsByClassName (class를 이용한 접근)

document.getElementsByClassName('category_item')

• 해당페이지에 있는 class 이름이 category_item인 모든 요소가 배열의 형태로 담겨서 반환된다.

 

02. DOM 조작하기

2.1 innerHTML : 내용(content) 조작

• innerHTML 을 통해 요소의 내용(content), 즉 시작 태그와 종료 태그 사이의 내용을 수정할 수 있다.

document.body.innerHTML = '내용 다 바꿈';

• body 태그에 접근하여 내부 내용을 '내용 다 바꿈'이라는 문자열로 조작했습니다.
• body 태그 자식 요소가 많더라도 innerHTML을 사용하면 안의 내용이 전부 교체됩니다.

 

2.2 style : 스타일 조작

 

a) 먼저 id가 'NM_NEWSSTAND_HEADER'인 요소를 취득하고 element라는 변수에 저장함

const element = document.getElementById('NM_NEWSSTAND_HEADER');

b) 해당 요소의 배경 색상 style을 조작함

element.style.backgroundColor = 'blue';

• HTLM 요소의 `style`에 접근하여 스타일을 조작할 수 있다.
  • 위 예시에서는 먼저 HTML 페이지에 접근하여 `id`가 `NM_NEWSSTAND_HEADER`인 요소를 취득했고, 해당 요소를 `element` 변수에 저장했다.
  • 그런 다음 해당 요소의 `style` 에 접근하여 배경색(`backgroundColor`)을 `‘blue’` 로 조작했다.

 

2.3 createElement : 요소 생성

// h1 요소 생성 및 내용 추가
const item = document.createElement('h1'); // <h1></h1>
item.innerHTML = '제목추가' // <h1>제목추가</h1>

// h1 요소를 추가하고 싶은 위치 취득
const newsHeader = document.getElementById('NM_NEWSSTAND_HEADER'); 

// newsHeader자식으로 item 추가
newsHeader.appendChild(item);

• .createElement(tagName) 함수를 사용하면 HTML 요소(element)를 생성할 수 있다.
  • createElement 함수를 통해 h1 요소를 생성하고 item이라는 변수에 할당했다. (만약 item이라는 변수에 저장하지 않으면 휘발돼 버린다.)
  • 생성한 h1 요소에 innerHTML 을 통해 내용(content)을 넣었다.
  • 결론적으로, 현재 item에는 <h1>제목추가</h1>가 들어있는 상황
• 이 상태로는 요소가 생성만 됐을 뿐, HTML에 추가된 상태가 아니라 눈으로 확인할 수 없다.
• 특정 요소의 자식 요소로 append 시키는 방법이 있다. (appendChild)

 

 

2.4 요소의 속성(attribute) 조작

// 요소에 id 수정(추가)
element.id = 'newId';

// 요소에 class 수정(추가)
element.className = 'newClass';

// 요소 스타일 수정(추가)
element.style.backgroundColor = "red";

• document 객체로 특정 요소(element)에 접근할 수 있듯이, 요소의 속성(attribute)에도 접근할 수 있다.
• 특정 요소의 속성에 접근하여 id, 혹은 class도 추가하고 style 값도 수정할 수 있다.