CRUD
- CRUD란,
Create,Read,Update,Delete를 나타낸다. - 대다수의 웹이 가지고 있는 기본적인 처리기능을 이야기 한다.
- 가장 기본적인 CRUD 를 위한 메소드들을 살펴보자.
Create
document.createElement()
- HTML 의
요소를 만드는 메소드이다. document.createElement('태그이름')로 사용한다.- 메소드를 사용할 경우 HTML 의 요소가 생성되지만, 이렇게 생성된 요소는 HTML 에 바로 적용되지 않는다.
- 이때, 우리는 해당 요소를 문서와 연결 시켜주어야 하는데, 이때
Append를 사용한다.
Append
- 요소를 HTML 문서 내부의 지정된 위치에 연결시켜주는 역할을 한다.
→ append : 추가 추가하고자 하는 위치.append(추가하려는 요소)- 추가 하려는 요소는 위의
CreateElement메소드로 지정된 요소처럼 그 값으로 요소를 가지고 있어야한다.
→ 즉, 추가되기 위해 준비가 되어 있는 요소여야함. - 인자에 직접 문자열로 작성하는 경우 그 자체가 텍스트로 입력된다.
- 만약 내부에 이미 존재하는 요소를 지정한 변수를
append의 인자로 넣는 경우 해당 요소 자체가 이동한다.
<!--HTML-->
<div class="outer">
<div class="inner">
<div class="item"></div>
</div>
</div>//JS
let outer = document.querySelector('.outer')
let item = document.querySelector('.item')
outer.append(item)
// inner 안에 있는 item 을 outer 로 이동시켰다.<!--HTML-->
<div class="outer">
<div class="item"></div> <!-- 쨘 -->
<div class="inner">
<!-- 여기있던 코드가 -->
</div>
</div>Read
querySelector(), querySelectorAll()
- HTML 내부의 요소들을 CSS 셀렉터를 이용하여 조회 할 수 있는 메소드
querySelector()는 해당하는 셀렉터를 가진 요소 중 가장 첫번째 요소를 가져온다.querySelectorAll()은 해당하는 셀렉터를 가진 요소를 전부 가져온다.
→ 이때 배열의 형태로 가져오는데, 이를 유사배열이라고 한다.(Array-like Object)querySelector(),querySelectorAll()을 반드시document 객체에서만 사용할 필요는 없으며, 내가 원하는 곳을 지정하여 내부의 요소만 탐색 할 수도 있다.
<!--HTML-->
<body>
<div class="first">
<div class="this">첫번째 this</div>
<div></div>
<div></div>
</div>
<div class="second">
<div class="this">두번째 this</div>
<div></div>
<div></div>
</div>
</body>//JS
document.querySelector('.this').textContent // '첫번째 this'
// document 객체를 지정함으로, 문서 전체에서 찾아 그 첫번째 값을 리턴한다.
let second = document.querySelector('.second')
second.querySelector('.this').textContent // '두번째 this'
// .second 라는 클래스를 가진 요소의 내부에서만 탐색하여 첫번째 값을 리턴한다.- 간단한 태그나 단일 셀렉터 뿐만 아니라, 여러 셀렉터가 조합된 복잡한 셀렉터를 작성하여 선택 할 수도 있다.
→document.querySelector('body div.this > li:first-child div:hover')
여기서 query 는 개발에서 '조회한다.' 라는 뜻을 가지고 있다.
value
input내부에 있는 값을 가져오거나 지정 할 수 있다.선택한 요소.value = '값'으로 사용한다.- 값을 지정하지 않는 경우 내부의 값을 가져온다.
Update
.classList.add()
- 지정된 HTML의 요소에 class 값을 추가한다.
선택한 요소.classList.add('클래스이름')로 사용한다.
<div> hi! </div>
<!--
document.querySelector('div').classList.add('hello')
를 JS에서 실행하는 경우 아래의 값으로 바뀐다.
-->
<div class="hello"> hi! </div>.id
- 지정된 HTML 요소에 id 값을 추가한다.
선택한 요소.id = "id 값"으로 사용한다.- 만약 id 값을 지정하지 않는 경우 요소에 지정된 id 값을 반환한다.
.setAttribute()
선택한 요소.setAttribute('속성', '속성값')로 class 나 id가 아닌 속성을 추가 할 수 있다.
<div> hi! </div>
<!--
document.querySelector('div').setAttribute('style', 'color : red;')
를 JS에서 실행하는 경우 아래의 값으로 바뀐다.
-->
<div style="color:red;"> hi! </div>.textContent
- 지정된 요소 내부의 문자를 변경한다.
선택한 요소.textContent = '값'으로 이용 할 수 있다.- 만약 값이 지정되지 않으면 해당 요소에 속한 문자열을 반환한다.
Delete
.remove()
- 지정한 요소를 지우는 메소드이다.
지우고자 하는 요소.remove()로 사용한다.
.removeChild()
- 부모요소 내부에 있는 자식요소를 지정하여 삭제하는 메소드이다.
부모요소.removeChild(자식요소)로 사용한다.
<!--HTML-->
<body>
<div class="container">
<div class="here">날 지워줘!</div>
</div>
</body>- 위의 내용에서
here를 지우기 위해서 remove() 와 removeChild() 를 사용한다면 각각 아래와 같은 차이가 생긴다.
// JS
let container = document.querySelector('.container')
let here = document.querySelector('.here')
here.remove() // 지워질 요소에 사용한다.
container.removeChild(here) // 부모요소에 인자의 요소가 있는 경우 삭제한다.다수의 요소 지우기
- 다수의 요소를 지우기 위해서는
innerHTML을 사용하여 내부의 내용을 비우면 전부 지울 수 있다.
→지우고자 하는 요소.innerHTML = " "
→ 요소에 포함된 HTML 문서 내용을 수정하는 메소드이므로, 내부의 HTML 내용이 지워진다. - 하지만,
innerHTML은 보안상의 문제가 있어 사용이 권장되지 않는다. - 그러므로, 다수의 요소를 지울때는 반복문과
remove(),.removeChild()를 이용하여 제거하는 방법이 권장된다.
예시
요소 생성과 연결(Create)
<!--HTML-->
<body>
</body>let el = document.createElement('div') // div 요소를 만든다.
document.querySelector('body').Append(el)
// 혹은 document.body 로 선택이 가능하다.- 결과
<!--HTML-->
<body>
<div></div>
</body>요소를 읽고, 내용과 클래스 추가하기(Read, Update)
el.textContent = "hello" // 내부에 텍스트를 추가한다.
el.classList.add('here') // here이라는 클래스를 추가한다.- 결과
<!--HTML-->
<body>
<div class="here">hello</div>
</body>태그 삭제하기(Delete)
el.remove()- 결과
<!--HTML-->
<body>
</body>