souvenir

20.06.08_DOM 정리 본문

2020년/TIL(Today I Learn)

20.06.08_DOM 정리

풀빵이 2020. 6. 18. 01:44

DOM(Document Object Model)

: HTML 요소들을 JavaScript 객체로 표현하는 문서

 

 

  1. DOM =JavaScript 는 아니며
  2. HTML의 트리 구조를 JS의 객체 형식으로 표현한 것.
  3. Document라는 전역변수로 접근 가능
  • Console.dir을 통해 HTML의 내용을 JS의 객체처럼 확인할 수 있음.

 

 

 

1. 활용 용도

  • JS를 통해 HTML 문서 중 해당 사항을 검색 혹은 수집하여 묶거나, 수정하는 것도 가능함.

아래와 같은 내용을 주로 확인함.

 

 

1) 태그이름(tagName), id(id), class 목록(classList), class 문자열(className)

  • classList : 해당 태그의 속한 class들의 목록을 '객체 형식'으로 보여줌
    Ex) $0.classList.contains('comment') : 해당 태그에 'commet'라는 클래스가 있는지 확인하는 매소드

MDN을 통해 더 공부해보기

  • className : 해당 태그의 속한 class들의 목록을 string으로 보여줌.

 

 

2) 속성객체(attribute)  : class나 id 속성의 유무를 표시한 객체

3) 스타일 객체(style)

4) 엘리먼트에 담긴 내용 : 해당 태그의 내용을 출력함.

    1. innerHTML : 내용과 태그가 모두 보임
    2. (innerText)
    3. textCeontent  : 포함된 공백 등이 표시되어 출력됨.
  • a,c 모두 내용을 변경할 수 있음.
    Ex) $0.textContent = "내용이 바뀌는 것을 볼 수 있어요"
    Exx) $0.innerHTML : = '네이버</a>

 

 

5) Form 입력값 : value

  • Input 태그에 입력된 값을 확인할 수 있음.

 

  1. Element vs node(참고)
  • Element는 node에 속해 있습니다.
  • Text는 node이나 element는 아닙니다.
<body>

  <div id="practice" class="highlight red">

  여기 엘리먼트가 하나 있습니다.

    <span>자식도 있습니다.</span>

    <span>자식도 여럿 있습니다.</span>

  </div>

</body>

 

  • 자식 엘리멘트(children) : span, span
  • 자식 노드(childNodes) : (공백도 포함)

 

 

 

6) Data-*속성에 담긴 값(dataset)

  • 태그자체에 data를 심어 놓고 싶을 때

Ex)

HTML

<div data-user="steve" date-role="moderator" data-user-id="1">

Steve Lee

</div>

 

JS

$0.dataset.user //'steve'

$0.dataset.role //'moderator'

$0.dateset.userId //'1'

 

 

 

7) 이벤트(onclick, comouseover, onkey 등)

<클릭 이벤트> 

Html 

<!--addEventListner-->

 <button> Click Me<button>

 

JS         

$0.onclick =  foo() //'onclick' : 클릭했을 때 특정 이벤트를 일으킬 수 있음.

Funtion foo(){

  console.log('마우스가 눌렸습니다');

}

 

 

<엘리멘트 선택>

  • 태그를 이용 : getElementsByTagName
  • Id를 이용 : getElementById
  • Class를 이용 : getElementByClassName
  • Selector를 이용 : querySelector(유일하거나, 첫번째 속성만 받아오고 싶을 때)/ querySelectorAll(태그나 클래스를 여러 개 선택할때)

Ex) document.querytSelectoAll('.comment')

Return : 유사배열로 나옴

 

 

엘리먼트를 만드는 매소드 : creatElement('태그')

~.appendChild(A) : ~ 아랫쪽에 A 엘리먼트를 추가합니다.

 

cloneNode(): 복사

 

 

★오늘의 포인트 : CRUD

- Create : creatElement
- Read : value, querySelector, querySelectorAll
- Unchange : appendChild(a)-아래에 작성, prepend(a)- 위에 작성, setAttribute
   innerHTML과 textContent의 차이/변경 update
- Delete : remove()

 

 

 

 

 

 

 

'2020년 > TIL(Today I Learn)' 카테고리의 다른 글

20.06.13_mini 해커톤  (0) 2020.06.18
20.06.12 코딩연습  (0) 2020.06.18
20.06.10 코딩연습  (0) 2020.06.18
20.06.09 코딩연습  (0) 2020.06.18
20.06.04 코딩연습  (0) 2020.06.18
'2020년/TIL(Today I Learn)' Related Articles more
Comments