[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 코드
