[카테캠 7주차] JS 기초 DOM

DOM

DOM 이란 HTML 문서를 객체로 표현한 것으로, JS 에서 HTML을 제어할 수 있게 해준다.

DOM API 는 JS 로 HTML 를 제어할 때 사용하는 메서드이다.

 

 

 

Node vs Element

• 노드(Node): HTML 요소, 텍스트, 주석 등 모든 것을 의미한다.
• 요소(Element): HTML 요소를 의미한다.

HTML 코드는 다음과 같다.

 

 

 

childNodes 를 사용하면 해당 요소의 자식 노드를 모두 얻을 수 있다.

참고로 text 의 data가 \n 되어 있는 것은 줄바꿈을 의미한다.

 

 

 

 

children 을 사용하면 하위 HTML 요소만 얻을 수 있다.

 

 

 

console.dir 를 사용하여 [[Prototype]] 을 따라가 보면 HTML 요소가 어떠한 상속관계가 있는지 알 수 있다.

Node 가 Element 보다 상위 개념이다.

 

 

 

Element 클래스에 __proto__ 접근자 프로퍼티를 사용하여 상위 클래스에 접근하면 Node 클래스가 나오는 것을 볼 수 있다.

 

 

 

검색과 탐색

아래 예제들에 사용되는 HTML 코드는 다음과 같다.

 

getElementById 

• HTML `id` 속성(Attributes) 값으로 검색한 요소를 반환한다.
• 여러 요소가 검색되면, 가장 먼저 찾은 요소만 반환한다.
• 검색 결과가 없으면, `null` 을 반환한다. 

 

 

 

querySelector

• `CSS 선택자`로 검색한 요소를 하나 반환한다.
• 여러 요소가 검색되면, 가장 먼저 찾은 요소만 반환한다.
• 검색 결과가 없으면, `null` 을 반환한다. 

 

 

 

querySelectorAll

• `CSS 선택자`로 검색한 모든 요소를 `NodeList`로 반환한다.
• NodeList 객체는 `.forEach()` 를 사용할 수 있다.
• NodeListg 는 유사 배열 객체이다.

 

 

 

유사 배열 객체에 배열 메소드를 사용하기 위해서는 배열로 변환해주면 된다.

 

 

 

 

parentElement (Node)

노드의 부모 요소를 반환한다.

 

div 의 class 가 child 인 요소의 부모는 div 의 class 가 parent 인 요소이다.

 

 

 

 

closest (Element)

• 자신을 포함한 조상 요소 중 'CSS 선택자'와 일치하는 가장 가까운 요소를 반환한다.
• 요소를 찾지못하면 null 을 반환한다.

 

 

 

 

previousSibling , nextSibling (Node)

노드의 이전 형제 혹은 다음 형제 노드를 반환한다.

 

 

div 의 class 가 child 인 노드의 이전 노드는 줄바꿈 텍스트이다.

div 의 class 가 child 인 노드의 다음 노드는 텍스트 1 이다.

 

 

 

previousElementSibling , nextElementSibling (Element)

요소의 이전 형제 혹은 다음 형제 요소를 반환합니다.

 

 

 

 

children (Element)

요소의 모든 자식 요소를 반환합니다.

 

 

HTMLCollection 도 유사배열 이므로 배열메서드를 사용하기위해선 배열로 바꿔줘야한다.

 

 

 

 

firestElementChild, lastElementChild(Element)

요소의 첫 번째 자식 혹은 마지막 자식 요소를 반환한다.

 

 

 

 

생성, 조회, 수정

사용될 HTML 코드

 

 

 

createElement

메모리에만 존재하는 새로운 HTML 요소를 생성해 반환한다.

 

 

 

prepend , append (Element)

노드를 요소의 첫 번쨰 혹은 마지막 자식으로 삽입한다.

 

 

 

remove (Element)

요소를 제거한다.

 

 

 

 

insertAdjacentElement (Element)

• '대상 요소'의 지정한 위치에 '새로운 요소'를 삽입한다.
• 대상_요소.inserAdjacentElement(위치, 새로운_요소)

 

 

 

 

insertBefore (Node)

• '부모 노드' 의 자식인 '참조 노드'의 이전 형제로 '노드'를 삽입한다.
• 부모_노드.insertBefore(노드, 참조_노드)

 

 

 

contains (Node)

• '주어진 노드'가 '노드'의 자신을 포함한 후손인지 확인합니다.
• 노드.contains(주어진 노드)

 

 

 

textContent (Node)

노드의 모든 텍스트를 얻거나 변경합니다.

 

 

 

innerHTML

요소의 모든 HTML 내용을 하나의 문자로 얻거나, 새로운 HTML 을 지정합니다.

 

textContent는 문자열만 삽입이 된다.

 

 

백틱을 사용하여 템플릿 리터럴과 가독성을 높여보자.

 

 

 

dataset (Element)

요소의 각 `data-` 속성 값을 얻거나 지정한다.

 

 

 

 

tagName

요소의 태그 이름을 반환한다.

반환되는 태그 이름이 대문자 라는 것에 유의해야한다.

 

 

 

id

요소의 `id` 속성 값을 얻거나 지정합니다.

 

 

 

 

className

요소의 `class` 속성 값을 얻거나 지정한다.

클래스를 추가할 때 띄어쓰기를 포함해줘야 구분된다.

 

 

 

classList

요소의 `class` 속성 값을 제어한다.

 

 

 

style

요소의 `style` 속성(인라인 스타일)의 CSS 속성 값을 얻거나 지정한다.

style 을 사용해서 얻을 수 있는 값은 인라인 스타일만 가능하다. CSS 파일을 사용하여 적용된 스타일을 얻을 수 없다.

 

 

 

getComputedStyle

요소에 적용된 스타일 객체를 반환한다.

style 속성은 인라인 방식으로 만들어진 스타일만 확인을 할 수 있고 별도의 CSS 파일이 적용된 값은 얻을 수 없었다.

getComputedStyle 을 사용하면 요소의 스타일이 적용된 값을 전부 얻을 수 있다.

 

사용되는 HTML 코드는 다음과 같다.

 

 

 

getAttribute , setAttribute

요소에서 특정 속성 값을 얻거나 지정한다.

 

속성이라는 단어는 HTML 과 CSS, JS 에서 다르게 불린다.

• HTML : Attribute
• CSS, JS : Property

 

 

 

hasAttribute , removeAttribute

요소에서 특정 속성을 확인하거나 제거한다.

 

 

크기와 좌표

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

innerWidth, innerHeight

현재화면(Viewport)의 크기를 얻습니다.

 

 

 

window.scrollX , window.scrollY

페이지의 좌상단 기준, 현재 화면(Viewport)의 수평 혹은 수직 스크롤의 위치를 얻습니다.

 

 

 

 window.scrollTo , E.scrollTo

• 지정된 좌표로 대상(화면, 스크롤 요소)를 스크롤 합니다.
• 대상.scrollTo(X좌표, Y좌표)
• 대상.scrollTo({ top: Y, left: X, behavior: 'smooth' })

// window.scrollTo , E.scrollTo
// 지정된 좌표로 대상(화면, 스크롤 요소)를 스크롤 합니다.
// 대상.scrollTo(X좌표, Y좌표)
// 대상.scrollTo({ top: Y, left: X, behavior: 'smooth' })



setTimeout(() => {
  // window.scrollTo(0, 500);
  window.scrollTo({
    left: 0,
    top: 1500,
    behavior: "smooth",
  });
}, 1000);


setTimeout(() => {
  parentEl.scrollTo({
    left: 0,
    top: 500,
    behavior: "smooth",
  });
}, 2000);

 

E.clientWidth , E.clientHeight

테두리 선(border)를 제외한 요소의 크기를 얻습니다.

 

 

parentEl 의 clientHeight 는 240 의 값을 가진다. 그 이유는 height가 200으로 정해져있고, padding이 위 아래 20px이 잡혀있기 때문이다. 

 

parentEl 의 clientWidth 는 340 의 값을 가져야할텐데 출력값을 보면 그렇지 않다. 그 이유는 스크롤바가 차지하는 영역의 너비는 제외한 값이기 때문이다.

 

 

 

 

childEl 의 가로 너비는 따로 CSS에 정의되어있지 않기 때문에 브라우저가 계산한 값이 출력된다. 이때 border 값은 제외된다는 점을 주의하자.

 

 

 

 

E.offsetWidth , E.offsetHeight

테두리 선(border)를 포함한 요소의 크기를 얻습니다.

 

 

 

 

 

E.scrollLeft , E.scrollTop

스크롤 요소의 좌상단 기준, 현재 스크롤 요소의 수평 혹은 수직 스크롤 위치를 얻습니다.

 

 

 

 

E.offsetLeft , E.offsetTop

페이지의 좌상단 기준, 요소의 위치를 얻습니다.

 

 

 

 

E.getBoudingClientRect

테두리 선(border)를 포함한 요소의 크기와 화면에서의 상대 위치 정보를 얻습니다.

사용자가 보는 화면의 위치에 따라 요소의 다른 위치 정보가 필요한 경우에 유용하게 사용된다.