DOM 돔 (Document Object Model)

DOM

문서 객체 모델(Document Object Model,DOM)은 HTML, XML 문서의 프로그래밍 interface이다.

1. 요소의 내용(content) 바꾸기 innerHTML

  document.body.innerHTML = '내용 다 바꿔'

2. 특정 element에 접근하기

tag, class, id 와 같은 css selector로 접근 가능
주의! JavaScript에서 style을 수정할 때 '-'는 사용 불가능
camelCase로 바꿔야 합니다.

let blueElement = document.querySelector('blue');
blueElement.style.backgroundColor = 'blue';

3. Element 생성하기

.createElement(태그네임) 함수를 사용하면 element를 만들 수 있다
-> 만든 후
붙이고 싶은 element에 append 시켜줘야한다.
appendChild는 요소의 뒤쪽에 붙여줍니다.

4. Assignment

• p 태그를 생성하고 (hint: createElement),
• 해당 요소에 dom 이라는 class 이름을 주고 (hint: className)
• 해당 요소에 "DOM" 이라는 텍스트를 넣어서 (hint: innerHTML)
• h1요소 내부에 추가 (hint: appendChild)

<h1 id="h1-title">
   <span>난 span</span>
      여기에 추가해주세요
</h1>

<script>
function addAssignment(){
  let makeptag = document.createElement('p'); 	//p태그를 만들자
  let h11 = document.getElementById('h1-title') //h1의 아이디를 가져와 변수로 만들기
  makeptag.innerHTML = 'DOM' //만든 p태그의 내용 입력
  makeptag.className = 'dom' //만든 p태그에 class명을 부여함
  h11.appendChild(makeptag)  //h1태그에 p태그를 append
}
addAssignment()
</script>

👀 DOM Element를 동적으로 만드는 메서드

메서드	설명
element.createElement(tagName)	HTML DOM Element를 동적으로 생성하기 위한 메서드 팁 : 요소가 작성된 후 요소 .appendChild () 또는 element .insertBefore () 메소드를 사용하여 문서에 삽입
element.createTextNode(' ')	선택한 요소에 텍스트를 추가
element.removeChild(tagName)	HTML DOM Element를 동적으로 삭제하기 위한 메서드
element.innerHTML = ' '	특정 요소의 내용을 가져오거나, 특정 요소의 내용을 변경합니다
element.classList.add = (' ')	새로운 class추가(기존 클래스 존재)
element.classList.remove = (' ')	지정한 class이름 삭제(다른 클래스 그대로
element.classList.toggle('className',boolean)	클래스 이 생겼다 사라지기를 반복 두 번째 인자는 boolean 타입을 받음
element.className = ' '	class이름을 동적으로 변경하기 위한 메서드(기존 클래스 사라짐)
elememt.appendChild( )	선택한 요소 안에 자식 요소를 추가
document.querySelectorAll('선택자명')[순서]	해당 선택자를 만족하는 모든 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다

👀 DOM 접근 메서드

요소들을 이용하기 위해서는 아래와 같은 메서드를 사용해 특정 태그에 접근해야 합니다. 이 메서드를 이용해 선택한 요소를 변수에 대입하여 사용할 수 있습니다.

메서드	설명
document.getElementById('ID명')	해당 id명을 가진 요소 하나를 반환합니다
document.querySelector('선택자')	해당 선택자를 만족하는 요소 하나를 반환합니다
document.getElementsByClassName('class명')[순서]	해당 class명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다 [순서]없이 단일 class만을 가져올수 있습니다
document.getElementByTagname('태그명')[순서]	해당 태그명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다 마찬가지로 [순서]없이 단일 tag만을 가져올수 있습니다
document.querySelectorAll('선택자명')[순서]	해당 선택자를 만족하는 모든 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다