javascript _DOM(Document Object Model)

denmark-choco·2020년 5월 21일
3

code-states_3주차

목록 보기
3/9
post-thumbnail

[DOM]

HTML 문서의 구조와 관계를 객체(Object)로 표현한 모델

  • DOM은 트리구조이다

  • document라는 전역변수로 접근이 가능하다


[Element 타입]

HTML 요소를 표현하며 이를 통해 태그 이름이나 자식, 속성 같은 정보에 접근이 가능

  • nodeType은 1이다.

  • nodeName은 요소의 태그 이름이다.

  • nodeValue는 null이다.

  • parentNode는 Document 또는 Element이다.

  • 자식 노드로 Element나 Text등등을 가질 수 있다.

출처: https://boycoding.tistory.com/62 [소년코딩]

출처 : 바닐라 자바 스크립트 빠른 참조 / 치트 시트


[속성이름]

dataset

  • 특정한 데이터를 DOM 요소에 저장해두기 위함이 목적

  • 브라우저는 이러한 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다.

  • 장점 : 이전과 같이 hidden으로 태그를 숨겨두고 데이터를 저장할 필요가 없어졌다는 점

<div data-user="steve" data-role="moderator" data-user-id="1">
Steve Lee
</div>
$0.dataset.user // 'steve'
$0.dataset.role // 'moderator'
$0.dataset.userId // '1'

출처: https://dololak.tistory.com/364 [코끼리를 냉장고에 넣는 방법]


Element.classList

  • element.classList.add("") : 클래스추가

  • element.classList.remove("") : 클래스제거

  • element.classList.toggle("") : 클래스가 존재하면 제거하고 없으면 추가

  • element.classList.contain("") : 클래스가 존재하는지 확인

  • element.classList.replace("","") : 클래스를 새로운 클래스로 교체


Element.id

  • Document.getElementById(id) : 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환

Element.getElementsByClassName

  • element.getElementsByClassName() : 주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 HTMLCollection 을 반환

Element.tagName

Element.getElementsByTagName() : 제공된 태그 네임(tag name)을 가지는 엘리먼트의 유효한 HTML 컬랙션를 반환


querySelector()

제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환

	<p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <script>
      document.querySelector( '.abc' ).style.color = 'red';
    </script>

//처음 p만 빨간색으로 변한다.

querySelectorAll()

지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적(살아 있지 않은) NodeList 를 반환

	<p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <script>
      var jb = document.querySelectorAll( '.abc' );
      jb.style.color = 'red';
    </script>

//p 전부 빨간색으로 변한다.

Element의 속성 값 획득, 설정, 제거

  • Element.getAttribute(name) : 속성의 값을 획득

  • Element.setAttribute(name, value) : 속성의 값을 설정

  • Element.hasAttribute(name) : 속성의 존재여부를 확인

  • Element.removeAttribute(name) : 속성을 제거


Element.innerHTML

  • 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정

template

페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 HTML 코드

profile
codestates_2020.05.04~ing // 이제 걸음마를 시작한 초보 개발자입니다. 혹 잘못된 부분을 발견하신다면 언제든지 말씀부탁드립니다^^!!

0개의 댓글