200828 [DOM]

DOM(Document Object Model)

 : javascript 를 이용하여 html 에 접근해 html을 조종 할 수 있는 model

 

1. 부모와 자식이 존재하는 트리구조의 html

 

 - 부모와 자식의 관계를 이해하고 찾을 수 있어야 한다.

  ※트리구조(tree strucment)에서 하위요소를 가지고 있다면 부모, 상위 요소를 가지고 있다면 자식, 동일한 부모를 가지고 있다고 있다면 형제의 구조를 가지고 있다.

 

 - 자식(children) 찾기

 :  document.부모.children  // 부모 element에 속해 있는 자식 element 를 모두 찾을 수 있다.

 

 - 부모(parent) 찾기

 : 변수에 자식객체를 선언한 후  변수.closest(조건) 을 이용하여 조건에 해당하는 부모를 찾을 수 있다.

  ※ 조건에는 id, 공백, > , :not(tag) 등을 이용하여 가장 가까운 부모중 조건에 맞는 부모를 찾는다.

 

2. C. R. U. D 이해하기

 

 - Create(만들기) 

  : DOM을 이용하여 html내에 tag를 만들 수 있다.

  // 변수 = document.createElement("tag") 를 이용하여 변수에 tag를 선언 할 수 있다.

 ※ 생성된 element는 어디에도 속하지 않은 node이기 때문에 꼭 부모엘리먼트에 연결해줘야 사용 가능하다.

 

 - Read(읽기) 

  : css 의 Selector을 이용하여 DOM에서 html을 쉽게 읽어 들일 수 있다.

 

  ＠ Selector을 이용하여 읽어 들이는 방법은 여러가지가 있다.

    1. document.querySelector("id or class name") // (".class name") or ("#id name")

       : Selector를 이용하여 해당하는 하나의 element 를 읽어 올 수 있다.

    2. document.querySelectorAll("id or class name")

       : Selector를 이용하여 해당하는 모든 element 를 읽어 올 수 있다.

    3. document.getElementById("id name") 

       : id를 찾기 위한 메소드로 Selector을 이용하지 않고 바로 id name를 찾을 수 있다.

    4. document.getElementByClassName("class name")

       : class 를 찾기 위한 메소드로 Selector을 이용하지 않고 모든 class name를 찾을 수 있다.

 

 - Update(갱신하기)

  : 생성하고 만들어진 element 에 id 와 class 를 만들고 내용을 수정하여 갱신 할 수 있다.

 

  ＠ id 와 class 를 생성하는 방법 

    1. id 만들기 : 생성된 element 변수에 dot notation 으로 id name 를 넣을 수 있다.

      ex)  name.id = "name1"  // console.log(name)  => <div id = "name1"> </div>

    2. class 만들기 : classList 메소드를 이용하여 class name를 넣을 수 있다.

      ex) name.classList.add("class1") // console.log(name)  => <div id = "name1" class = "class1"> </div>

 

  ＠ 생성된 element에 내용 넣기

    1. textContent 메소드를 이용하여 내용 생성 및 변경

       ex) name.textContent = "dev" // console.log(name)  => <div id = "name1" class = "class1">dev</div>

    2. innerHTML 메소드를 이용하여 내용 넣기

       ex) name.innerHTML = "dev" // console.log(name)  => <div id = "name1" class = "class1">dev</div>

※ textContent vs innerHTML vs innerText에 대하여 명확히 구분 할 수 있어야 한다.

※ textContent 와 innerHTML 의 값에 "" 을 넣으면 element 를 삭제 할 수 있다.

 

 - Delete(삭제하기)

  : remove() / removeChild() 메소드를 사용하여 원하는 element 를 삭제 할 수 있다.

※for문과 while 문을 이용한 자식 element 를 삭제 하는 방법도 있으니 참고.

 

3. append 하기

 : 지금까지 만들어온 element는 아무 곳에서도 사용 할 수 없는 지정 되지 않은 값이다. 이런 element 를 할당해 주기 위해서 부모에게 자식으로 지정해 줘야 하는데 이때 append 메소드를 사용 할 수 있다.

ex) parent.append(name) 

  => <div id="parent">

         <div id = "name1" class = "class1">dev</div>

      </div>

 

 

※ CRUD 와 append 를 활용하여 DOM으로 html의 내용을 생성 수정 삭제 할 수 있고 또 생성되어 있는 값을 JS로 읽어 올수 도 있다. 이점을 잘 인지 하고 활용하자!!