DOM 다루기

17662 단어 JavaScriptDOMDOM

자바스크립트를 이용해 DOM을 선택하고 다루는 방법을 정리합니다😋

이 포스팅의 내용과 자료는 ko.javascript.info를 토대로 하고 있습니다.

요소 검색하기

DOM에서 원하는 노드를 검색하게 해주는 주요 메서드 6가지

메서드검색 기준호출 대상이 요소가 될 수 있는지에 대한 여부컬렉션 갱신 여부
querySelectorCSS 선택자✔-
querySelectorAllCSS 선택자✔-
getElementByIdid--
getElementsByNamename-✔
getElementsByTagName태그나 '*'✔✔
getElementsByClassNameclass✔✔

matches

요소가 주어진 CSS선택자와 일치하는지 여부를 판단해줍니다(bool 리턴)

// 예시
<a href="http://example.com/file.zip">...</a>
<a href="http://ya.ru">...</a>

<script>
  // document.body.children가 아니더라도 컬렉션이라면 이 메서드를 적용할 수 있습니다.
  for (let elem of document.body.children) {
    if (elem.matches('a[href$="zip"]')) {
      alert("주어진 CSS 선택자와 일치하는 요소: " + elem.href );
    }
  }
</script>

closest

자기 자신(elem)을 포함하여 주어진 CSS선택자와 일치하는 가장 가까운 조상 요소를 찾습니다. 찾으면 그 값을 리턴합니다.

// 예시
<h1>목차</h1>

<div class="contents">
  <ul class="book">
    <li class="chapter">1장</li>
    <li class="chapter">2장</li>
  </ul>
</div>

<script>
  let chapter = document.querySelector('.chapter'); // LI

  alert(chapter.closest('.book')); // UL
  alert(chapter.closest('.contents')); // DIV

  alert(chapter.closest('h1')); // null(h1은 li의 조상 요소가 아님)
</script>

DOM 노드 클래스

DOM 노드는 종류에 따라 다른 프로퍼티를 지원합니다. 하지만 모든 DOM 노드의 조상은 공통되기 때문에 공통된 메서드와 프로퍼티를 사용할 수 있습니다.

🎨 DOM 계층 구조

nodeName, tagName

  • 두 프로퍼티를 사용하면 DOM 노드의 태그 이름을 알아낼 수 있음.
  • tagName 프로퍼티는 요소 노드에만 존재
alert( document.body.nodeName ); // BODY
alert( document.body.tagName ); // BODY

innerHTML

  • 요소 안의 HTML을 문자열 형태로 받아올 수 있음
  • 수정하는 것도 가능.
  • 추가가 아니라 덮어쓰기 때문에 주의해서 사용
<body>
  <p>p 태그</p>
  <div>div 태그</div>

  <script>
    alert( document.body.innerHTML ); // 내용 읽기
    document.body.innerHTML = '새로운 BODY!'; // 교체
  </script>

</body>

outerHTML

  • 요소 전체 HTML이 담겨 있음. innerHTML에 요소 자체를 더한 것이라고 생각하면됨.

textContent

  • 요소 내의 텍스트에 접근. 오로지 텍스트만 추출

hidden

  • 요소를 보여줄지 말지 지정. html, javascript 둘다 사용 가능
<div id="elem">깜빡이는 요소</div>

<script>
  setInterval(() => elem.hidden = !elem.hidden, 1000);
</script>

속성과 프로퍼티

브라우저는 웹페이지를 만나면 HTML을 파싱해 DOM 객체를 생성합니다.
요소 노드에서 대부분의 표준 HTML 속성은 DOM 객체의 프로퍼티가 됩니다. 하지만 항상 일대일 매핑되는 건 아닙니다.

DOM 프로퍼티

DOM 객체의 종류에 따라 프로퍼티는 다양하게 존재합니다. 내장 프로퍼티만으로 충분하지 않은 경우 커스텀하게 프로퍼티를 만들어 줄 수 있습니다.

// 프로퍼티를 추가하는 예시
document.body.myData = {
  name: 'Kim ye chan',
  age: 29
};

HTML 속성

태그는 복수의 속성을 가질 수 있습니다. 브라우저가 HTML를 파싱해 DOM 객체를 만들 때 표준 속성을 DOM 프로퍼티로 만들어 줍니다. (ex: id, class)

비표준 속성은 자동으로 프로퍼티로 만들어 주지 못합니다. 비표준 속성을 다룰 땐 아래의 API를 이용합니다.

  • elem.hasAttribute(name) – 속성 존재 여부 확인
  • elem.getAttribute(name) – 속성값을 가져옴
  • elem.setAttribute(name, value) – 속성값을 변경함
  • elem.removeAttribute(name) – 속성값을 지움

비표준 속성, dataset

'data-'로 시작하는 속성 전체는 개발자가 용도로 맞게 사용하도록 별도로 예약됩니다. dataset 프로퍼티를 사용하면 이 속성에 접근이 가능합니다.
(ex: 요소 elem에 data-about 속성에 elem.dataset.about로 접근해 값을 얻을 수 있음)

data-order-state 같이 여러 단어로 구성된 속성은 카멜 표기법(camel-cased)을 사용해 dataset.orderState으로 변환됩니다.

// 예시, ko.javascript.info를 참조했습니다.

<style>
  .order[data-order-state="new"] {
    color: green;
  }

  .order[data-order-state="pending"] {
    color: blue;
  }

  .order[data-order-state="canceled"] {
    color: red;
  }
</style>

<div id="order" class="order" data-order-state="new">
  A new order.
</div>

<script>
  // 읽기
  alert(order.dataset.orderState); // new

  // 수정하기
  order.dataset.orderState = "pending"; // (*)
</script>
[구현, 리팩토링] carrot harvest game, 오류 해결
간단한 sns 만들기 - 07/18 틀만 잡음

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage