[JavaScript] DOM의 기본 조작

---

1. DOM이란?

• Document Object Model의 약자
• HTML 요소를 Object처럼 조작할 수 있는 모델
• DOM이 있어 정적인 HTML을 JS로 동적제어 가능
• DOM은 document 객체를 통해 HTML에 접근

2. DOM에서 요소 찾기

1. console에서 DOM 조회

    console.log(document.body)
    // body태그 내 DOM을 구조화 된 형태로 보여줌
    console.log(document.body)
    // body태그 내 DOM을 객체 형태로 보여줌
   

2. 자식/부모 엘리먼트 찾기

      console.log(document.body.children[1])
      // body태그 1번째 인덱스 자리에 있는 자식요소 
      let newsContents = document.body.children[1]
      // 편한 조회를 위해 변수 할당도 가능
      newsContents.parentElement
      // body
      // newsContents의 부모 요소를 보여줌
   

3. DOM으로 HTML 조작하기

   1. Create/append
      • createElement (생성)
      • append/appendChild (연결)
      • apeend는 기능 많음 / IE 미지원

   참고자료-append/appendChild의 차이

        document.createElement('태그명')
        const newDiv = document.createElement('div')
        // 새 div element를 생성 -> newDiv에 할당
   
        document.연결할곳.append(연결할변수)
        document.body.append(newDiv)
        // 변수 newDiv를 body의 자식으로 연결
   

   1. read
   • querySelector : 첫번째 엘리먼트 조회
   • querySelectorAll : 모든 엘리먼트 조회 (HTML 엘리먼트를 유사배열로 받아옴)
   • getElementBy(…)
   • ‘query-‘ 가 기능 많음 / 속도느림, IE 미지원

   참고자료 - getElementbyId와 queryselector 차이 참고자료 - getElementbyId와 queryselector 차이

        document.queryselector('선택자/태그명')
        const allDiv =  document.queryselectorAll('div')
        //태그가 div인 모든 요소 선택 -> C에 할당
        const multiID = document.queryselector('#A #B')
        //id가 A인 요소의 후손요소 중 id가 B인 요소 첫번째 요소 선택 -> D에 할당
   

   1. update
   • textContent : 엘리먼트에 문자열 업데이트
   • classList: 엘리먼트에 클래스 추가

   • setAttribute: 엘리먼트에 속성 추가

       엘리먼트명.textContent
       const oneDiv =  document.queryselector('div')
       // <div><div>
       oneDiv.textContent = '변경내용'
       // <div>변경내용<div>
       // oneDiv에 들어가는 내용을 '변경내용'으로 바꿈
       // 또는 oneDiv의 내용을 불러오는 용도로도 사용
       oneDiv.classList.add('이름')
       // <div class='이름'>변경내용<div>
       // oneDiv에 '이름'이라는 클래스를 추가
       oneDiv.id = '아이디'
       // <div class="이름" id="아이디">변경내용</div> 
       oneDiv.setAttribute('속성명','값')
     

   1. Delete
   • remove : 지정한 엘리먼트 삭제

   • removeChild: 엘리먼트의 자식 엘리먼트 삭제

       이름.remove()
       // '이름'이라는 엘리먼트 삭제
       이름.removeChild(이름.firstChild)
       //.이름' 엘리먼트의 첫 번째 자식 엘리먼트 삭제
       const 이름 = document.querySelector('#아이디');
       while (이름.firstChild) {
         이름.removeChild(이름.firstChild);
       }
       // 반복문을 이용해 '이름' 엘리먼트의 모든 자식요소 삭제
     

   1. 메서드별 비교

      	textContent	innerText	innerHTML
      값	raw text	rendered text	HTML parsed text
      성능	좋음	보통	나쁨
      보안	-	-	취약

      참고자료 - innerHTML을 쓰면 안되는 이유
      참고자료 - XSS(크로스사이트 스크립트 공격)

   2. 값 설정/가져오기
      • DOM으로 <input> 등 엘리먼트의 입력 값 설정
      • 또는 값을 얻어오기 위해서는 value 속성 사용

         // <input>에 사용자가 123 입력 시
         const el = document.querySelector('input')
         // querySelector통해 input를 el에 할당
         console.log(el)
         // <input><input>
         console.log(el.value)
         // 123
        

   3. 이벤트 할당

       변수명.onclick = 함수명
       function handler() {
           console.log('버튼이 눌렸습니다!');
         }
      
         btn.onclick = handler;
       // btn 변수 클릭 시 handler 함수 실행
       // 속성에 이벤트 핸들러 등록 시에는 () 제외
       // 실행 없이 함수 그 자체만 등록하는 개념
      

   4. 이벤트 객체
      • onclick, onkeyup 등의 이벤트 사용시
      • 사용자 입력 트리거로 발행한 정보를 담은 객체

       btn.onclick = handleClick;
       // btn변수 클릭 시 handleClick 함수 실행
       function handleClick() {
         console.log(event.target.textContent);
       }
       // event 객체 안에는 트리거에 대한 많은 값들이 저장
       // 그 중에서 target의 텍스트 정보를 가져옴
      
       btn.addEventListener('click',()={
         동작할 내용
       })
       // addEventListener 사용시 한 요소에 이벤트 중복할당 가능
       // onclick 대신 click으로 쓰는 것 유의
       // addEventListener 최신이고 기능많아 선호 높음
       // btn.onclick 은 이벤트 재할당 시 덮어쓰기 됨
      
       function handleClick(e) {
         console.log(e.target.textContent);
       }
       // event 를 인자자리에 넣어줘야 함 (또는 약자 e) 
       // 안넣어줘도 동작하는 브라우져 있으나 캐바캐
      

      e.target	value
      클릭 등 동작 발생시	input 등 입력발생 시
      동작 발생한 요소 가져옴	입력 값을 가져옴

JavaScript 카테고리 내 다른 글 보러가기