DOM

정의

• 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델
• HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 잇는 역할
  
  그래서 JavaScript는 어떻게 HTML에 접근할 수 있다는 말일까요?
  바로 document라는 전역객체를 통해 접근할 수 있습니다.

innerHTML

document.body.innerHTML = '내용 다 바꿈';

위는 body태그 내부에 있는 것을 '내용 다 바꿈'이라는 텍스트로 바꾼 것입니다.
body태그내에 엄청나게 많은 요소가 있더라도 innerHTML을 사용하면 내용이 전부 교체됩니다.

selector

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

css selector 이용하여 요소에 접근이 가능하다

• background-color(x) / backgroundColor(o)
  javascript에서 style 수정할때 hypen(-) 사용할 수 없습니다
  그러므로 style의 프로퍼티에 접근하고 싶을 때 camelCase로 바꾸시면 됩니다
• camelCase??????
  낙타 대문자(駱駝大文字, CamelCase)는 합성어에서 단어 전체에서는 가운데이지만 합쳐진 부분의 첫글자를 대문자로 표기하는 방법이다. 단어의 모양이 쌍봉낙타의 등과 비슷하다는 뜻에서 이름붙여졌다

element

.createElement(tagName) : 요소 만들기
.appendChild(): 요소를 뒤쪽에 붙여준다

// class 가져오기
function updateTitle() {
  let title = document.getElementsByClassName('h1-title')[0];
  // [0] 붙인 이유는 Element's' 복수표현 메소드로 가져오면 해당 요소들의 배열로 만들기 때문이다(요소가 하나일지라도)
  title.innerHTML = '바뀐 제목!!!';
}

// tag 가져오기
function addClass(name) {
  let title = document.getElementsByTagName('h1')[0];  
  title.innerHTML = "wecode.com/img.png";
}

// tag 만들어서 삽입하기
function addElement() {
  let listWrap = document.createElement('ul');// ul 생성
  let list = document.createElement('li');// li 생성
  let listContent = document.createElement('span');// span 생성

  listContent.innerHTML = "목록이다";// span 내용
  list.appendChild(listContent);// span -> li 삽입
  listWrap.appendChild(list);// li -> ul 삽입

  document.body.appendChild(listWrap);// ul -> body 삽입
  // body 태그는 변수를 별도로 지정하지 않아도 document property(key) 존재한다
}

---

HTMLCollection & NodeList

function assignment(){
let h1_bring = document.getElementsByTagName('h1');// HTLMCollection 유사배열
for (let i in [...h1_bring]){// [...배열] 내용만을 복사하는 기능
    let p_made = document.createElement('p');// p 생성
    p_made.className = 'dom';// p <- class 부여
    p_made.innerHTML = 'DOM';// p <- 내용 입력
    h1_bring[i].appendChild(p_made);// h1 <- p 삽입
    }
}
assignment();

for/in + htmlcollection

• for/in
  객체의 속성을 추출하기 위한 기능이기에
  유사배열인 HtmlCollection(, NodeList) 사용되면 property 값 이외에 내용이 추출될 수 있다
  그러므로 웬만하면 쓰지 않아야 한다
  그렇기에 반복문이 필요할시 for 문에 변수 i 선언하는 것이 좋다
  ex) length, name.. etc

Link: HtmlCollection 에다가 for문 쓰지 않는 이유

NodeList

사용된 메소드에 따라 구별된다

• children, getElementsByTagName : HTMLCollection
• childNodes, querrySelectorAll : NodeList

Link: HTMLCollection & NodeList 살펴보기

---

Event

요소.addEventListener(이벤트종류, function() {
//이벤트가 일어났을 때 실행할 내용
});

javascript file

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