JS / 01 / 기초-9

* DOM

• Document Object Model [문서 객체 모델]
• 웹페이지 콘텐츠,구조,스타일 요소를 구조화하여, 요소에 접근 및 동작
  등을 할 수 있도록 제공하는 Web API
• JS같은 스크립트 언어가 쉽게 웹페이지에 접근,조작 할 수 있게
  요소 객체와 연결해주는 역할

✅ 쉽게 말하자면

1) 웹페이지가 HTML로 작성 됨
2) 웹페이지를 브라우저를 통해 읽으면 트리 형태로 변환함
3) 이 트리 구조를 DOM 이라고 부름

*) 위 과정을 '렌더링' 이라고 한다
*) 각 HTML요소는 이 트리에서 노드로 표현 된다
*) 이 트리를 이용해서, 스크립트 언어가 각 요소에 접근,조작 가능 



[용어]
스크립트언어 : JS,Python 등 프로그래밍 언어를 지칭
⭐⭐요소 : HTML에서 <시작태그>내용(CONTENTS)</끝태그> => 지칭

---

* Document

• 웹페이지 자체를 가리키는 객체
  HTML요소에 접근하려면, 반드시 이 객체를 통해 접근해야 한다

---

✅ Document 요소에 접근하는 방법

① 문서(Document) 객체에 접근을 한다 👉 . 
② get 👉 가져오겠다
③ Element 👉 요소
④ By ~ 👉 ~을(아이디,네임,태그,클래스)

---

✔️유사배열 : 배열 관련 함수는 불가하나, 배열의 형태를 가져서 FOR문 가능함

✔️NodeList : DOM 트리 구조에서 특정 노드 유형의 요소들의 모음 (유사배열)

① 문서(Document) 객체에 접근을 한다 👉 . 
② getquerySelectorAll(li) 👉 모든 <li>태그 가져올게

* NodeList이고, 유사배열임
* 배열 관련 함수는 적용이 안 되지만, 배열의 형태라 for문 적용 가능

---

✔️ innerText :실제로 브라우저(눈)에 보이는 실제 텍스트 반환

✔️ textContent : 해당 요소가 포함 된 모든 텍스트 내용을 반환

• (숨겨진 텍스트나, CSS 가려진 텍스트 포함 등, 눈에 안 보이는 것도)

✔️ innerHTML : 해당 요소가 포함 된 모든 텍스트 + 태그 내용을 텍스트로 반환

🧐 [참고] : https://velog.io/@supernova77/JS-02-%EA%B8%B0%EC%B4%88-9-%E4%B8%AD-innerText-textContent-innerHTML

---

✅ Document 요소를 변경하는 방법

요소명.innerHTML : 요소의 (텍스트 + 태그 ) 컨텐츠 진입 or NEW값
요소명.innerText : 요소의 (텍스트 '만') 컨텐츠 진입 or NEW값
입력요소명.value : 입력(input)요소의 value값 접근 or NEW값

✅ innerHTML or innerText를 통해서 NEW값 할당 희망시
⭐👉 요소명 = '<태그가있어도>' 문자열 처리 후 할당 ⭐

---

必 요소에 대해서 . .

요소 : <시작태그>contents</끝태그>

요소란, <시작태그> ~  내용 ~  </끝태그> 를 포함한 FULL-SET 이다 !

무의식적으로, 요소 => 단일적인 한 부분(내용) 만 생각 할 수 있는데,
절대 ❌❌

요소란, ⭐️FULL-SET 이다 !!