오늘 DOM 파트 초반에 몸에 문제가 있어서 집중을 하지 못했다. ㅠㅠ
정리하는데 시간이 꽤 소요될 것 같다.

DOM

HTML의 html,body,h1 태그 등을 HTML언어에서는 요소(element)라고 부른다. 이를 자바스크립트에서는 문서객체 라고 부른다.
따라서 문서객체를 조작한다는 뜻은 HTML요소들을 조작한다 라는 뜻이다.

문서 객체를 조합해서 만든 전체적인 형태를 문서객체모델(dom) 이라고 부르고, dom은 html 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할을 한다.

이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 노드(node) 라고 한다.

DOM 트리에 접근하기

document 객체를 통해 HTML 문서에 접근이 가능하다.
document는 브라우저가 불러온 웹페이지를 나타내며, DOM 트리의 진입점 역할을 한다.

// 해당하는 Id를 가진 요소에 접근하기
document.getElementById()

// 해당하는 모든 요소에 접근하기
document.getElementsByTagName();

// 해당하는 클래스를 가진 모든 요소에 접근하기
document.getElementsByClassName();

// css 선택자로 단일 요소에 접근하기
document.querySelector("selector");

// css 선택자로 여러 요소에 접근하기
document.querySelectorAll("selector");

탐색을 document 부터 시작할 필요는 없다.
더 깊숙이 코드 지정하여 시작해주면 더 좋다

DOM 제어 명령어

이벤트 삽입

// 이벤트의 타입에는 click, mouseover, mouseout, wheel 등 다양한 이벤트를 감지합니다.
// listener 함수의 인수에는 이벤트에 대한 정보가 담겨있습니다.
target.addEventListener( type, listener )

클래스 제어

dom api 를 통해 class 속성을 제어 가능하다.

오늘 진행한 실습

박스를 만들고, 버튼 3개로 색상 조작하기!

        const box = document.querySelector(".box");
        const redBtn = document.querySelector(".redBtn");
        const yellowBtn = document.querySelector(".yellowBtn");
        const greenBtn = document.querySelector(".greenBtn");
		// 박스와 각각 버튼들에 접근함

        const btnArr = [redBtn,yellowBtn,greenBtn];
        // 1. 버튼 array 만들기

		// 2. 버튼 arr 순환하려고 forEach 함수 사용함
        btnArr.forEach((item) => {
          // 여기서 item은 배열의 각각 요소들
            item.addEventListener("click",()=>{
              // item을 클릭하면~!
                box.classList.remove('red','yellow','green');
				// 먼저 box의 class list 에서 위 3개 클래스 다 제거해줌
           	   // 그리고 각각 효과를 주려고 if문을 돌린다.
                if(item.classList.contains("redBtn")){
                  /* item의 클래스 리스트에 redBtn 클래스가 포함되어있다면 =>
                  현재 돌고있는 이 배열의 item이 redBtn 이라면! */
                    box.classList.add('red')
                  // red 클래스를 추가해줘라~
                } else if (item.classList.contains("yellowBtn")){
                    box.classList.add('yellow')
                } else if (item.classList.contains("greenBtn")){
                    box.classList.add('green')
                };
            })
        })

또 다른 방법: 일일이 이벤트리스너 속성 작성하기 (계속 반복되는 코드가 생김)

        redBtn.addEventListener('click', function(){
             box.classList.remove('red','yellow','green');
             box.classList.add("red");
        })

         yellowBtn.addEventListener('click', function(){
             box.classList.remove('red','yellow','green');
             box.classList.add("yellow");
         })

        greenBtn.addEventListener('click', function(){
            box.classList.remove('red','yellow','green');
            box.classList.add("green");

• 수업도중 작동이 정상적으로 안되는 현상 발생해서 살펴보았다.

1. box를 아이디로 준것.
   #box에 backhground 속성을 black 으로 줘서, 그 뒤 추가되는 class들의 배경색들이 제대로 적용되지 않았다.
   => 이는 css의 우선순위 특성때문. id, class, tag 순서대로 우선순위가 결정된다!!
   그래서 box의 속성을 class 로 변경 해주었다.

요소 제어

DOM api 이용하여 요소 새롭게 생성하고, 위치시키고,제거할수 있다.

// document.createElement(target); target 요소를 생성합니다.
// document.createTextNode(target); target 텍스트를 생성합니다.
// element.appendChild(target);    target 요소를 element의 자식으로 위치합니다.
// element.removeChild(target);    element의 target 자식 요소를 제거합니다.
// parentElement.insertBefore(target, location); target요소를 parentElement의 자식인 location 위치 앞으로 이동합니다.

        const myBtn = document.querySelector("button");
        const myUl= document.querySelector("ul");

        myBtn.addEventListener('click',function(){
          //버튼 클릭하면 for문 실행하는함수 시작
            for (let i =0;i<5;i++){
                // li 요소를 작성해주는 변수 선언
                const myLi = document.createElement("li");
                // Text 노드 생성해주는 변수 선언
                const myTxt= document.createTextNode(`안녕하세요! ${i}번째`);
              // Li 요소가 Txt 요소를 자식으로 갖겠다.
                myLi.appendChild(myTxt);
              // ul 요소가 li 요소를 자식으로 갖겠다.
                myUl.appendChild(myLi);
            } //5번 돌아서 5개 생김
          
            //자식 요소 제거
            const li = document.querySelector('li');
            myUl.removeChild(li);

        })

요소 안에 접근하여 값을 가져오거나, 변경할 수 있다.

• innerHTML
  요소(element) 내에 포함된 HTML 마크업을 가져오거나 설정합니다.
• innerText
  요소의 렌더링된 텍스트 콘텐츠를 나타냅니다.
  (렌더링된에 주목하세요. innerText는 "사람이 읽을 수 있는" 요소만 처리합니다.)
• textContent
  노드의 텍스트 콘텐츠를 표현합니다.

가장 많이 쓰이는 두가지.
innerText 는 문자열 자체로 전달된다
innerHTML 은 문법을 html 요소로 바꿔서 넣는다.

  myP.innerHTML ="<strong>Im strong</strong>"
// 출력 I'm strong
  myP.innerText ="<strong>Im strong</strong>"
// 태그표시까지 그대로 출력됨.

더 인접한곳(Adjacent)으로 정밀하게 배치하기

insertAdjacentHTML : 요소 노드를 주어진 위치에 배치.

-> innerHTML과의 차이는?
innerHTML을 사용하게 되면 기존에 있던 것은 덮어쓰기가 되어버리는 것이다.. 기존의 값은 보이지 않는다..
하지만 insertAdjacentHTML은 기존의 값은 건드리지 않고, 새롭게 내가 입력하고 싶은 값을 어떤 위치에 놓을지 까지 설정할 수 있다. 
출처:[새아의 테크노트:티스토리]

만약 요소 변경이 아닌 삽입만 원한다면, inserAdjacentHTML 사용하기!

    const sayHi = document.querySelector('.sayHi');
    sayHi.insertAdjacentHTML('beforebegin', '<span>beforbegin의 위치</span>');
    sayHi.insertAdjacentHTML('afterbegin', '<span>afterbegin의 위치</span>');
    sayHi.insertAdjacentHTML('beforeend', '<span>beforeend의 위치</span>');
    sayHi.insertAdjacentHTML('afterend', '<span>afteend의 위치</span>');

이벤트 객체

이벤트에서 호출되는 핸들러에는 이벤트와 관련된 모든 정보를 가지고 있는 매개변수가 전송된다.
이것을 이벤트 객체라고 부른다.