[Achievement Goal]

1. CRUD - Create , Read , Update and Delete

• CRUD 를 이용하여 html 을 조작 할 수 있다.
• append 와 prepend 의 차이에 대해 안다.
• append 와 appendChild 의 차이에 대해 안다.
• classList, setAttribute 로 속성을 생성할 수 있다.

1. CRUD

Create , Read , Update and Delete 의 약어로,
콘솔이 아닌 웹상에 자바스크립트를 대입할 수 있도록 crud 를 자유자재로 다룰 수 있어야 한다.

Create - createElement
Read - querySelector , querySelectorAll
Update - textContent , id , classList, setAttribute
Delete - remove , removeChild, innerHTML = '' , textContent = ''
Append - appendChild

create

createElement 는 dom 으로 새로운 태그를 생성해줄때 쓴다.
사용 형태 : document.createElement('div') // div 태그가 생성된다.

하지만 생성을 해도 웹 상에서 보여지지 않는다.
생성만 한 채 동동 떠있는 상태라고 상상해보자.
이렇게 허공에 떠있는 태그를 웹상과 연결시켜주는 것이 바로 append 기능이다.

append

append는 실제 웹상에 연결시켜주는 속성 중 하나이며 웹의 구현 위치, 특징에 따라 사용 종류가 나뉘게 된다.

append() - 선택한 요소를 끝부분에 보내는 것
prepend() - 선택한 요소를 처음부분에 보내는 것

append 와 prepend 의 예시를 보겠다.

  <div id = 'container'>
    <header id = 'header'>
      <h1>첫번째 자식</h1>
      <nav>head-1</nav>
      <nav>head-2</nav>
      <nav>head-3</nav>
    </header>
    <section id = 'section'>
      <h1>두번째 자식</h1>
      <ul>
        <li>section-1</li>
        <li>section-2</li>
        <li>section-3</li>
      </ul>
    </section>
    <footer id = 'footer'>
      <h1>세번째 자식</h1>
      <p>footer-1</p>
    </footer>
  </div>

footer의 footer-1 밑에 footer-2 라는 자식을 하나 더 추가 하고 싶다.
그럴땐 어떻게 해야할까.

먼저 생각해 보아야 할것은,
필요한 dom 요소들을 모두 변수안에 담아주고 들어갈 내용도 지정해주었다.

const footer = document.querySelector('#footer')
const footerP = footer.children[1]; //footer-1

const addP = document.createElement('p');
addP.textContent = 'footer-2';

여기까지 만들면 아직 변수 선언 해준 꼴 밖에 되지 않으므로 append 처리하여 연결시켜 준다.

footer.appendChild(addP) 
document.createElement('p'); 

여기서 생각해야 할 것은 ,footer-1 인 p 태그 뒤에 와야한다는 것이다.
appendChild 를 이용하여 부모인 footer를 기준으로 작성하면
footerP(footer-1) 의 뒤에 안착하게 된다.
footerP 에 두어도 웹상에는 보여지지만, 태그가 제대로 안먹히는것을 볼 수 있으므로
왠만하면 부모를 기준으로 추가하도록 하자!

그렇다면 prepend를 쓰면 어떻게 될까?

기준이 된 footerP 위로 오게 된다.

만약 기준이 footer 가 된다면 ?

footer 태그 앞으로 나오게 된다!

그렇다면 append 와 appendChild 의 차이는 뭘까?
appendChild에 텍스트요소를 넣어주면 에러가 나지만 append 는 인자에 텍스트 요소를 바로 넣을 수 있다.
appendChild 를 이용하여 텍스트를 넣고싶으면 위의 예시처럼 addP.textcontent = 'footer-2' 라고 넣어 준 후 대입시켜야 하지만 append('footer-2') 라고 바로 사용할 수 있어 불필요한 코드를 줄일 수 있다.

const addP = document.createElement('p');
footer.append('footer-2')

또한 단 한개의 노드만 추가 가능한 appendChild 에 비해,
스프레드 연산자 지원(...), 여러개의 노드선택 , 태그와의 조합이 가능하다는 장점이 있다.

read

querySelector , querySelectorAll 둘다 id 나 class ,tag 를 가진 dom 요소를 불러들이는 역할을 한다.

형태 :
document.querySelector('#id')
document.querySelector('.class')
document.querySelector('div')
document.querySelectorAll('p') ..

두개의 차이라면 querySelectorAll() 는 인자에 담긴 모든 값을 선택하는 것이다.
그래서 특히 반복문, 배열 등 에서 선택할때 매우 유용하다.
document.querySelectorAll('p')[0] // p태그들 중 0번째 인덱스 선택.

//querySelectorAll
const nav = document.querySelectorAll('nav')
for(let i = 0; i <nav.length;i++){
  nav[i].addEventListener('click',function(){
    if(nav[i].style.color = 'black'){
      nav[i].style.color = 'pink'
    }
  })
}

이렇게 되면 각 nav 의 쿼리셀렉터를 선택할 때마다 글자색은 핑크로 바뀌게 된다.

• 참고로 id 선택 dom 중 getElementById('id') 도 있다.
  사용해도 무방하지만 요즘은 잘 안쓰고 쿼리셀렉터로 주로 쓰는 모양이다.
  이유는 모르겠지만 대세를 따라가자-! ㅎ

update

아까 createElement 로 만들어놓은 addP로 다시 가보자.

const addP = document.createElement('p');
addP.textContent = 'footer-2'
footer.appendChild(addP)

뭔가 심심한 p 태그에 클래스명을 지정해보도록 하겠다.

addP.classList.add('addP')

class 이름이 잘 들어갔다.
id,name,disalbed 등과 같은 다른 속성 또한 추가 가능하다.

addP.setAttribute('id','addP')
addP.setAttribute('name','addP')

delete

dom 에서 어떠한 값을 지울땐 remove 메소드를 사용한다.
innerHTML = '' 해서 지우는 방법도 있지만 해커가 털면 답없는 ..? 보안상의 문제가 있다고 하여 remove / removeChild 메소드를 사용하는것을 강력 추천한다! 고배웠다 ㅎ

아까 작성한 클래스명 addP 를 지워보겠다.

addP.classList.remove('addP')

class 가 사라진 것을 볼 수 있다.

그렇다면 removeChild 는 뭘까?

removeChild 는 자식 엘리먼트를 직접 지정하여 삭제하여 웹상에서 보일땐 remove 와 같지만 실제 메모리는 지워지지 않은, 하늘에 둥둥 떠있는 상태를 말한다.
그렇기 때문에 removeChild 로 삭제하고 다른 노드에 append 나 prepend 를 이용하여 갖다 붙이면 다시 데이터가 나타나게 된다!