DOM

1.DOM?

• Document Object Model
• HTML과 XML을 위한 프로그래밍 인터페이스
• 문서의 구조, 스타일, 내용을 변화할 수 있게 한다.

JavaScript와의 차이는?

• DOM은 프로그래밍 언어가 아니지만, Javascript 가 DOM을 이용해 문서 내의 객체나 요소에 접근을 하게 된다. DOM이 없으면 스크립팅 언어는 문서 내 접근이 힘들다.
• DOM은 다른 언어(파이썬 등)와/과도 상호작용할 수 있다.

---

1) Node 와 Element

• Node : element의 상위개념이며 DOM 객체이다.
• Element : Node 의 단일 타입
  참조사이트:StackOverflow

2.DOM 구조 조회

1) console.dir : DOM을 객체의 모습으로 보여주는 것

2) 부모 엘리먼트(parent element)

• 부모 엘리먼트 property 는 read-only.
  document.getElementById("자식 엘리먼트 ID").parentNode.nodeName;
  HTML DOM parentNode Property - w3schools

3) 자식 엘리먼트(Child element)

더 자세한 포스팅 보러가기 : DOM구조

3.CRUD

1) CREATE

• createElement
• createDocumentFragment
  : 부모요소가 없으면서 비어있는 최소 문서 객체를 생성하고 리턴한다.

2) READ

• querySelector, querySelectorAll

3) UPDATE

• textContent : 값을 할당한다.
  • id
  • classList
    • .classList.add('추가할 클래스명'); - 클래스를 추가할 수 있다.
    • .classList.remove('제거할 클래스명'); - 클래스를 제거할 수 있다.
    • .classList.toggle('바꿀 클래스명'); - 없으면 만들고, 있으면 없앤다.

특정 배열의 값을 할당해서 넣기

const el = document.getElementById('container');
const newItem = document.createDocumentFragment();
const add = [ 'chai', 'mocha', 'javascript' ];
add.forEach(function(item) {
let newDiv = document.createElement('div'); // div 태그로 새로운 요소 생성
newDiv.textContent = item; // 해당 요소 내용은 add 배열 안의 요소로 채워넣고
newDiv.classList.add('Basic'); // 해당 요소의 클래스는 'Basic'이라는 값으로 할당한다
newItem.appendChild(newDiv); // 빈 저장소에 newDiv를 할당해놓는다.
});
el.appendChild(newItem); 
// 부모 요소인 container 안에 newItem에 저장해둔 newDiv 요소를 하단에 추가한다.

• setAttribute
  예제 참조 : 생활코딩
  

4) DELETE

• remove, removeChild, innerHTML = "", textContent = ""

5) Append

• appendChild

  append와 prepend 차이점
  append는 부모 element의 마지막에 추가하고
  prepend는 부모 element의 첫번째에 추가한다.

  ---

  참조사이트 1 : StackOverflow

  appendChild 와 append 차이점

  • append는 DOMString 객체를 추가하지만,
    appendChild는 오직 노드 객체만 승락한다.
  • append는 리턴하는 값이 없지만
    appendChild는 추가한 노드객체가 무엇인지 결과를 리턴해준다.
  • append는 여러개의 노드를 붙일 수 있지만,
    appendChild는 오직 하나의 노드만 붙일 수 있다.

    ---

    참조사이트
    동기분이 전달주신 정보
    MDN - append
    MDN - appendChild
    append vs appendChild

---

내용 추가 예정 ↓

4.이벤트 객체

• onclick
• eventHandler 함수와 eventHandler의 첫번째 인자 사용

function hadleClick(event){
let x = event.target.textContent;
}

1) onsubmit

• 현재 창에서 폼을 제출하는 이벤트를 다루는 이벤트핸들러

2) onchange

3) onmouseover

4) onkeyup

5) event.preventDefault

• 이벤트를 취소할 수 있는 경우, 이벤트를 전파하지 않고 취소시킨다.

6) onclick 과 addEventListner의 차이

• 아무리 많은 이벤트를 실행해도 addEventListner는 이벤트가 추가되지만 onclick는 하나밖에 지정할 수 없다.
• addEventListner 사용시, 주의사항
  • IE 8 이하는 호환되지 않는다.
  • attachEvent 로 바꿔서 사용해야한다.

그외 참조사이트
https://www.w3.org/TR/DOM-Level-2-Events/events.html
Introduction to events

---

5.template

① HTML 안에 반복되는 혹은 반복할 템플릿 양식을 만들어둔다.

 <template id="liStyle">
      <li>
        <div class="name"></div>
        <div class="drink"></div>
        <div class="ordertime"></div>
      </li>
    </template>

② 기존에 쓰던 javascript 코드는 하단처럼 길다

        let orderList = document.querySelector('#orderlist');
        //make li element
        let liElement = document.createElement('li');
        // make - div.name
        let nameDiv = document.createElement('div');
        nameDiv.classList.add('name');
        nameDiv.textContent = 'Steve';
        // make - div.drink
        let drinkDiv = document.createElement('div');
        drinkDiv.classList.add('drink');
        drinkDiv.textContent = 'coffee';
        // make - div.ordertime
        let ordertimeDiv = document.createElement('div');
        ordertimeDiv.classList.add('ordertime');
        ordertimeDiv.textContent = '2020-08-12 13:00:01';

        // li 의 자식으로 append하기
        liElement.appendChild(nameDiv);
        liElement.appendChild(drinkDiv);
        liElement.appendChild(ordertimeDiv);
        //결과 출력하기
         orderList.appendChild(liElement);

③ HTML에 저장해둔 template를 이용하면 훨씬 코드가 간결해진다

    let orderList = document.querySelector('#orderlist');
    let tmp = document.querySelector('#liStyle');

    let liElement = document.importNode(tmp.content, true);       
        liElement.querySelector('.name').textContent = 'Steve';
        liElement.querySelector('.drink').textContent = 'coffee';
        liElement.querySelector('.ordertime').textContent = '2020-08-12 13:00:01';
        
    orderList.appendChild(liElement);