DOM에 왜 접근할 줄 알아야 할까?

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

HTML 요소 취득

• HTML의 구조나 내용 또는 스타일을 동적으로 조작하려면 먼저 HTML 요소를 접근해야 한다.
• DOM은 HTML 요소를 접근할 수 있는 다양한 방법을 제공한다.

tag

태그 이름을 이용한 요소 취득

const allPtags = document.getElementsByTagName('p');

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

CSS 선택자

querySelector : CSS 선택자를 이용한 요소 노드 취득

const el = document.querySelector('.box-item');

• box-item라는 클래스를 사용하는 첫 번째 요소가 반환된다.
• getElementsByTagName 메서드를 사용한 것과 달리, 배열이 아닌 요소를 반환한다.

id

**getElementById : id를 이용한 요소 취득

<script>
const element = document.getElementById('id-input');
</script>

• id가 id-input인 요소가 반환된다.
  **

class

getElementsByClassName : class를 이용한 요소 취득

<script>
const element = document.getElementsByClassName('box-item');
</script>

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

DOM을 왜 조작할 줄 알아야 할까?

1. 쿠팡사이트에서 검색한 식기 건조대! 사용자가 2페이지로 넘어가길 원한다면? -> JS에서 상품 목록의 이미지, 가격, 간단 설명 등 모든 내용을 바꿔줘야 한다!!! 따라서 HTML조작이 필요하지유~
2. 웹 사이트의 실시간 검색이 있다. 1초에 한 번씩 트렌드 검색어가 바뀌어야 할텐데 -> JS에서 1초에 한 번씩 인기 검색어의 텍스트 값을 바꿔줘야 한다!!
3. gmail 페이지에서 아직 안 읽은 메일이 10개에서 11개로 변경되어야 한다면?? - JS에서 HTML에 접근하여 10을 11로 바꿔줘야 한다!
4. 구글 캘린더에서 내 일정을 초록색에서 노란색으로 변경하고 싶다면? -> JS에서 해당 스케줄의 HTML에 접근하여 노란색으로 변경해주어야 한다!

innerHTML - 내용(content) 조작

// HTML body 태그에 접근하여 내용 조작
document.body.innerHTML = '내용 다 바꿈';

• innerHTML 을 통해 요소의 내용(content), 즉 시작 태그와 종료 태그 사이의 내용에 접근하여 수정할 수 있다.
• body 태그에 접근하여 내부 내용을 '내용 다 바꿈'이라는 문자열로 조작했다.
• body 태그 자식 요소가 많더라도 innerHTML을 사용하면 안의 내용이 전부 교체된다.

style - 스타일 조작

// id가 'NM_NEWSSTAND_HEADER'인 요소 취득 >> 변수에 저장
const element = document.getElementById('NM_NEWSSTAND_HEADER');

// 해당 요소의 스타일 조작
element.style.backgroundColor = 'blue';

• HTML 요소의 style에 접근하여 스타일을 조작할 수 있다.
• HTML 페이지에 접근하여 id가 NM_NEWSSTAND_HEADER인 요소를 취득했다.
• 해당 요소를 element 변수에 저장했다.
• 해당 요소의 style 에 접근하여 배경색(backgroundColor)을 ‘blue’ 로 조작했다.
• DOM 에 접근하여 스타일을 수정하는 경우 camelCase 를 사용한다.

*createElement - 요소 생성

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

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

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

• .createElement(tagName) 함수를 사용하면 HTML 요소(element)를 생성할 수 있다.
  • createElement 함수를 통해 h1 요소를 생성하고 item이라는 변수에 할당했습니다.
• 생성한 h1 요소에 innerHTML 을 통해 내용(content)을 설정했다.
• 요소는 생성만 됐을 뿐, HTML에 추가된 상태가 아니라 눈으로 확인할 수 없다.
• 특정 요소의 자식 요소로 append 시키는 방법이 있다. (appendChild)
• id가 id-input인 요소를 찾아서, 자식으로 추가해보자!
  -> 해당 요소 내부, 즉 자식 요소로 새롭게 생성한 h1 요소를 추가할 수 있었다.

요소의 속성(attribute) 조작

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

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

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

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