Dom

🔶 Dom

: Dom (=Document Object Model) (=문서 객체 모델)
: HTML 문서 전체를 객체로 표현한 것.
: HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델입니다.

Dom tree

(그림 출처: http://www.tcpschool.com/javascript/js_dom_node)

• 이때 각 html요소는 "요소노드"로 변환된다.
• 노드는 “요소 노드” , “텍스트 노드”, “어트리뷰트 노드”로 구분됨

<div class="greeting"> Hello </div>
// <div></div>  ←요소노드 
// Hello        ←텍스트 노드
// class="greeting" ←어트리뷰트 노드

🔶요소에 접근하는 법

1.

메소드	의미	결과
document.getElementById(”id”)	ID속성으로 태그 선택하기	ID에 해당하는 태그 하나
document.getElementsByClassName(”class”)	class 속성으로 태그 선택하기	class에 해당하는 태그 모음 (HTMLCollection) 유사배열
document.getElementsByTagName(”tag”)	HTML 태그 이름으로 태그 선택하기	tag에 해당하는 태그 모음 (HTMLCollection) 유사배열
document.querySelector(”css”)	css 선택자로 태그 선택하기	css 선택자에 해당하는 태그 중 “가장 첫번째” 태그 하나
document.querySelectorAll(”css”)	css 선택자로 태그 선택하기	css 선택자에 해당하는 태그모음 (NodeList)유사배열

※ getElements , querySelectorAll 처럼 여러개 요소가 나오는 경우 → 유사배열로 나옴

2.

프로퍼티	설명
element.children	자식 노드 중 요소 노드만 HTMLCollection에 담아서 반환. (텍스트 노드는 포함되지 않음.)
element.firstElementChild	첫 번째 자식 요소 노드만 반환
element.lastElementChild	마지막 자식 요소 노드만 반환
element.parentElement	부모 요소 노드만 반환
element.previousElementSibling	자신의 이전 형제 요소 노드만 반환
element.nextElementSibling	자신의 다음 형제 요소 노드만 반환

※ Node와 Element의 차이

Node.prototype.childNodes	Element.prototype.children
Node의 프로퍼티는 대부분 "텍스트 노드"이거나 "요소 노드"임.	Element의 프로퍼티는 다 "요소노드" 임. (텍스트 노드는 반환되지 않음)

* 사용예시

   <div id="wrap">
      <h1>Rainbow</h1>
      <ul id="rainbow">
        <li><span>color1 </span>red</li>
        <li><span>color2 </span>orange</li>
        <li><span>color3 </span>yellowgreen</li>
        <li><span>color4 </span>green</li>
        <li><span>color5 </span>blue</li>
        <li><span>color6 </span>darkblue</li>
        <li><span>color7 </span>purple</li>
      </ul>
      <h5>A rainbow is caused by sunlight and atmospheric conditions.</h5>
    </div>

const rainbowEl = document.querySelector("#rainbow");

// 1. element.children 와 Node.childNodes
    const ChildEl = rainbowEl.children; // HTMLCollection(7) [li, li, li, li, li, li, li]
    const ChildNd = rainbowEl.childNodes; // NodeList(15) [text, li, text, li, text, li, text, li, text, li, text, li, text, li, text]

// 2. element.firstElementChild 와 Node.firstChild
    const firstChildEl = rainbowEl.firstElementChild; // <li><span>color1 </span>red</li>
    const firstNd = rainbowEl.firstChild; // #text

// 3. element.lastElementChild 와 Node.lastChild
    const lastEl = rainbowEl.lastElementChild; // <li><span>color7 </span>purple</li>
    const lastNd = rainbowEl.lastChild; // #text

// 4. element.parentElement 와 Node.parentNode
    const parentEl = rainbowEl.parentElement; // <div id="wrap"> ... </div>
    const parentNd = rainbowEl.parentNode; // <div id="wrap"> ... </div>

// 5. element.previousElementSibling 와 Node.previousSibling
    const prevEl = rainbowEl.previousElementSibling; // 
<h1>Rainbow</h1>
    const prevNd = rainbowEl.previousSibling; // #text

//6. element.nextElementSibling 와 Node.nextSibling
    const nextEl = rainbowEl.nextElementSibling; // <h5>...</h5>
    const nextNd = rainbowEl.nextSibling; // #text

🔶노드 이동

1. 노드 이동

프로퍼티	설명
prepend	선택한요소의 자식요소 앞에 내용삽입
append	선택한요소의 자식요소 뒤에 내용삽입
before	선택한 요소의 앞에 내용 삽입
after	선택한 요소의 뒤에 내용 삽입

2. 노드 삭제

프로퍼티	설명
remove

3. 사용예시

    <div id="todos">
      				  <!--before-->
      <ul id="today"> <!--기준-->
       			  	  <!--prepend-->
        <li>놀기</li> 
        <li>숨쉬기</li>
        <li>춤추기</li>
        			  <!--append-->
      </ul>
      				  <!--after-->
      <hr/>
      
      <ul id="tomorrow">
        <li>잠자기</li>
        <li>산책가기</li>
        <li>장보기</li>
      </ul>
    </div>

    /* <노드이동> */
    const todayEl = document.querySelector('#today');
    const tomorrowEl = document.querySelector('#tomorrow');

    // 1.prepend
    // tomorrow의 첫번째 li를 today의 첫번쨰 li로 옮기기
    todayEl.prepend(tomorrowEl.children[0]);

    // 2.append
    // today의 마지막 li를 tomorrow의 마지막 li로 옮기기
    tomorrowEl.append(todayEl.children[3]);

    // 3.before
    //today ul앞에 h2태그 넣기
    const pTitle = document.createElement('h2');
    pTitle.innerHTML = 'today';
    todayEl.before(pTitle);

    // 4.after
    // tomorrow ul뒤에 h2태그 넣기
    const tomoTitle = document.createElement('h2');
    tomoTitle.innerHTML = 'tomorrow';
    tomorrowEl.after(tomoTitle);

    /* <노드삭제>*/
    // 1.remove()
    // tomoTitle삭제하기
    tomoTitle.remove();

* append와 appendChild의 차이

append	appendChild
"여러개" 자식요소 설정가능	"하나만" 가능
"html요소" , "문자열"을 넣음	"html요소"만 가능

🔶 요소의 속성 다루기

getAttribute, setAttribute, removeAttribute

1.속성 추가(수정)하기: element.setAttribute('속성', '값')
2.속성에 접근하기: element.getAttribute('속성')
3.속성 제거하기: element.removeAttribute('속성')

const aEl = document.querySelector('a');

// 1.속성 추가(수정)하기: element.setAttribute('속성', '값')
  aEl.setAttribute('href', 'http://www.naver.com');

// 2.속성에 접근하기: element.getAttribute('속성')
  console.log(aEl.getAttribute('href')); // http://www.naver.com

// 3.속성 제거하기: element.removeAttribute('속성')
  aEl.removeAttribute('href');

🔶 classList

1. Element.prototype.classlist

: class 정보를 담은 DOMTokenList 객체를 반환함.
※ DOMTokenList객체 : 유사배열, 이터러블임.

2. 대표적인 메서드

• add - 인수로 전달한 1개 이상의 문자열을 class 값으로 추가함.
• remove - 인수로 전달한 1개 이상의 문자열을 class 값에서 삭제함.
• contains - 인수로 전달한 문자열과 일치하는 클래스가 있는지 확인함.
• replacs - 첫번째 인수를 두번쨰 인수로 변경함.
• toggle - 인수로 전달한 문자열의 클래스가 존재하면 제거, 존재하지 않으면 추가함.
  
  

3. 사용예시

    <ol class="c1">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>

    const olEl = document.querySelector('.c1');
  
    // 1.add - 클래스 추가하기
    olEl.classList.add('c2', 'c3');
    console.log(olEl.classList); //  ['c1', 'c2', 'c3]

    // 2.toggle - 클래스 있으면 삭제, 없으면 추가하기
    olEl.classList.toggle('c4');
    olEl.classList.toggle('c3');
    console.log(olEl.classList); //  ['c1', 'c2', 'c4']
    
    // 3.remove - 클래스 삭제하기
    olEl.classList.remove('c4');
    console.log(olEl.classList); //  ['c1', 'c2']

🔶 innerHTML, textContent

1. innerHTML
1)조회 : HTML 마크업이 포함된 문자열을 그대로 반환함. (text뿐 아니라 , html요소도 반환함.)
2) 입력 : 문자열이 "요소 노드"로 들어감.

2. textContent
1)조회 : HTML 마크업을 무시하고 텍스트만 반환함.
2)입력 : 문자열이 "텍스트"로 그대로 들어감

<body>
    <div id="hello">
       Hello <span>World</span>
    </div>
</body>
  
const helloEl = document.querySelector('#hello');
// 1.조회
console.log(helloEl.innerHTML); // Hello <span>World</span>
console.log(helloEl.textContent); // Hello World
// 2.입력
helloEl.innerHTML = '<b>innerHTML</b>'; // <b>innerHTML</b>이 요소노드로 들어감
helloEl.textContent = '<b>innerHTML</b>'; // <b>innerHTML</b> 이 문자 그대로 들어감

🔶 data- , dataset-

• html에서 태크 속성으로 data-**를 지정하면, js에서 dataset-** 으로 그 속성을 사용할 수 있음.

• data-로 시작하는 속성은 모두 dataset이라는 프로퍼티에 저장됨.
  ex) data-status라는 속성이 있다면, element.dataset.status라는 프로퍼티에 접근해서 그 값을 가져올 수 있는 것임.

• (mdn자료)
  

• 주의
  :인터넷 익스플로러11+ 이전 버전들은 dataset을 지원하지 않음.
  IE 10 이하에선 getAttribute()를 통해 데이터 속성을 접근해야 함.