DOM

DOM(Document Object Model) HTML 요소를 Object처럼 디테일하게 조작하자!
❗️ DOM 자체는 프로그래밍 언어가 아니다. JavaScript가 DOM을 이용해서 HTML과 그 요소에 접근하고 조작하는 것이다.

<script src="script.js"></script>

HTML에 JavaScript를 적용하기 위한 태그
<script> 태그는 등장과 함께 실행된다! HTML 요소를 사용하려면 body 맨 마지막에 적자

자식, 부모 요소 찾기

console.dir(document.body.children) DOM 구조화를 위해 객체 모습으로 출력

1. 자식 요소 찾기

document.body.children[1] // 자식요소가 여럿일때 배열로 불러올 수 있다
document.querySelector('.클래스명 또는 #아이디').children
document.querySelector('.클래스명 또는 #아이디').firstElementChild // 첫번째 자식 요소
document.querySelector('.클래스명 또는 #아이디').lastElementChild // 두번째 자식 요소

위 코드를 변수에 할당하면 반복해서 쓰는데 용이하다.

2. 부모 요소 찾기

document.querySelector('.클래스명 또는 #아이디').parentElement

DOM CRUD

Create, Read, Update, Delete 이 근본이다.

1. Create
document.createElement

let elNew = document.createElement('div')
// 위와 같이 '태그명'으로 새로운 요소를 만들어준다

2. Append
document.append document.appendchild

document.body.append(elNew)
// 하지만 만들어주는 것 만으로는 문서에 연결되지 않은 상태이므로 append로 이어준다

3. Read
document.querySelector document.querySelectorAll document.getElementById

let elContainer = document.querySelector('#container')
// append를 body말고 다른 요소의 하위로 하고 싶다면
// 쿼리셀렉터로 조회하여 새로운 변수에 할당해 사용할 수 있다
// ❗️쿼리셀렉터에 클래스명을 넣으면 가장 첫 요소만 가져온다

elContainer.append(elNew)
// container라는 id를 가진 요소의 하위요소로 elNew를 넣는다
elContainer.append(elNew, elNew2, elNew3)
// 만약 여러 요소가 있다면 한꺼번에 추가할수도 있다
elContainer.append('텍스트콘텐츠도?')
// .textContent에 할당을 해주는 것 처럼 사용도 가능하다

elContainer.appendChild(elNew)
// ❗️appendChild는 다중 값을 허용하지 않고, DOMstring도 불가하다. 오직 하나의 요소만!
// append와 달리 반환값이 있다는 특징이 있다

elContainer.appendChild(elNew)

// container라는 id를 가진 div가 있을 때, 그 자식 요소 중 id가 message인 요소를 찾고싶다면?
let elMessage = elContainer.querySelector('#message')

4. Update
.textContent document.value document.classList document.setAttribute .innerHTML

elNew.textContent = '내용 추가'
// 지금과 같은 div 태그와 같은 경우 새로운 텍스트를 추가할 수 있고

elNew.value = '인풋 태그에 작성할 수 있다'
// input 태그 같은 경우는 value를 사용해서 박스 안에 텍스트를 추가할 수 있다.

elNew.classList.add('클래스명')
elNew.classList.remove('클래스명')
// 특정 class를 추가하거나 삭제할 수 있다. 
// 이는 [display: none]이 적용된 클래스를 추가삭제하는 방식으로 특정 요소를 보여줬다 없앴다 하는데 활용할 수 있다.

elNew.setAttribute('속성명', '내용')
// class가 아닌 다른 속성은 이렇게 추가할 수 있다.

elNew.innerHTML = '내용 추가'
//❗️ innerHTML은 <>를 그대로 문자열화하지않는다. 
// 따라서 그 내용에 따라 태그로 인식해버릴 수 있으니 아주 주의해야하고 최대한 사용하지 말자

5. Delete
document.remove document.removeChild .textContent = '' .innerHTML = ''

elContainer.removeChild(elNew)
// 원래 삭제를 위해 있었던 메소드인 removechild는 삭제하고자 하는 요소의 부모요소를 알아야했다

elNew.remove() 
// 너무 불편해서 이게 추가됐다 갸꿀 부모요소 몰라도됨

// 하지만 만약 어떤 요소의 자식 요소를 지우고싶다면 전자가 더 유용할 것이다.

whild(elContainer.children.length > 1){
  elContainer.removeChild(container.lastChild);
} 
// 가장 첫 요소 빼고 모두 지울 때

let these = document.querySelectorAll('.this')
for(let thisOne of these){
  thisOne.remove()
}
// 특정 클래스명을 가진 애들만 다 빼고싶다면 이렇게!

elContainer.innerHTML = '';
// 이 안은 모두 없앤다는 뜻! 하지만 알다시피 innerHTML 앵간하면 쓰지말자