DOM과 JavaScript

DOM : Document Object Model
javascript를 통해서 DOM을 조작하여 HTML을 변경할 수 있다.

js -> DOM -> HTML 조작

• script의 위치에 따라서 실행결과가 달라질 수 있다.
• script 요소를 만나면 웹브라우저는 HTML 해석을 잠시 멈춘다.
• script 요소는 등장과 함께 실행되기 때문에 만약 head 부분에 script가 존재하고, 이 script가 HTML의 body의 내용을 수정한다면, 오류가 발생할 수 있다.
• 따라서 이럴경우 script는 반드시 body의 마지막 부분에 존재해야 한다.

JS에서 DOM은 document 객체에 구현되어 있다.
-> DOM 구조를 조회할 때는 console.dir()을 통해서 확인할 수 있다. (Object처럼 볼 수 있게 해준다.)

Create

• createElement를 통해서 element를 만들 수 있다.
  document 객체의 createElement 메소드를 사용한다.
  ex) const newDiv = document.createElement("div");
• 생성되었지만, 연결되지는 않은 상태이다.
  document.body.append(newDiv); 를 통해서 연결할 수 있다.
  또는 appendChild(newDiv)로 자식에 붙일 수 있다.
  🧃 append할 때 요소는 복사되는 것이 아니라, 이미 존재하는 요소의 연결관계가 수정되는 것이다.

Read

• querySelector나 querySelectorAll을 통해서 element를 찾을 수 있다.
  ex) const findInput = document.querySelector('#input-name');
  ex) const findLi = document.querySelectorAll('.item-lists-apple');
• querySelector는 선택자와 제일 먼저 일치하는 요소를 반환하고 querySelectorAll는 선택자와 일치하는 모든 요소를 반환한다.
  각 요소에 index를 통해 접근할 수 있다.
  ex) findLi[0], findLi[1] ...

Update

• textContent로 내부의 text를 수정할 수 있다.
  ex) document.querySelector('.label-input').textContent = "값을 입력하세요";
• id를 통해서 id를 수정할 수 있다.
  ex) document.querySelector('#label-water').id = "label-melon";
• classList를 통해서 class를 추가하거나 삭제할 수 있다.
  ex) document.querySelector('.label-water').classList.add('label-coke');
  ex) document.querySelector('.label-water').classList.remove('label-water');
• setAttribute를 통해서 속성을 변경할 수 있다. 두 인자는 변경할 속성 이름과 속성값이다.
  ex) document.querySelector(".btn_press").setAttribute("disabled", 'true');

Delete

• remove를 이용해 선택한 요소를 삭제할 수 있다.
  ex) document.querySelector(".btn_press").remove();
• removeChild를 통해서 선택한 요소의 자식을 삭제할 수 있다. (정확히는 삭제가 아니라, 연결을 끊는다.)
  ex) const removeChild = document.querySelector(".remove").removeChild(document.querySelector("#naver_a"));
  🍕 인자로 lastchild나 firstchid를 붙여 사용할 수 있다.
• innerHTML = ''을 통해서 삭제할 수도 있다.
  ex) document.querySelector("#naver_a").innerText = '';
  다만 이 방법은 보안에 좋지 않다.

🧀 querySelector가 꼭 document에만 사용할 수 있는 것은 아니다.
🥧 .classList.contains('')으로 특정 클래스를 포함하고 있는지 확인할 수 있다.
🍙 입력 form에서 .value로 입력한 값을 읽을 수 있다.
🍦 태그 안에 data를 담을 수 있고, .dataset(속성이름)으로 그 데이터를 조회할 수 있다.
🥛 element.onclick = function(){ } 으로 클릭시 함수를 실행하게 할 수 있다.
(addEventListener와는 다르게 하나의 함수만 적용된다.)
.onkeyup .onsubmit .onchange .onmouseover .onmouseout event.preventDefault
등 여러 이벤트가 있다.