<aside> 💡 목차

</aside>

• HTML코드

1. 문서 객체 가져오기

• head, body, title요소
  • document.head
  • document.body
  • document.title
• body요소 내부에서 만든 다른 요소들
  • querySelector(선택자)
  • querySelectorAll(선택자)

2. 글자 조작하기

• 문서객체.textContent
  • 입력된 문자열을 그대로 넣습니다.
• 문서객체.innerHTML
  • 입력된 문자열을 HTML 형식으로 넣습니다.

document.addEventListener('DOMContentLoaded', () => {
  const a = document.querySelector('#textContent');
  const b = document.querySelector('#innerHtml');

  a.textContent = '<h2>textContent 속성</h2>';
  b.innerHTML = '<h2>textContent 속성</h2>';
});

+) JS에서 글자 조작 시에는 문서 구조는 HTML이 담당 따라서 문서구조를 직접 생성하는 innerHTML 보다, 기능적인 텍스트만 첨부하는 textContent를 사용하는 것을 권장

3. 속성 조작하기

• 문서 객체의 속성을 조작
• 문서객체.setAttribute(속성이름, 값)
  • 특정 속성에 값을 지정
• 문서객체.getAttribute(속성이름)
  • 특정 속성을 추출

document.addEventListener('DOMContentLoaded', () => {
  const cats = document.querySelectorAll('.cats');

  cats.forEach((cat, index) => {
    const width = (index + 1) * 50;

    // 이미지 너비와 높이를 직접 설정
    cat.style.width = width + 'px';
    cat.style.height = '250px';

    const source = `./cat01.jpg`;
    const alter = '고양이 이미지';

    // cat.setAttribute('src', source);
    // cat.setAttribute('alt', alter);
    cat.src = source;
    cat.alt = alter;
  });
});

※ setAttribute 메서드를 사용하여 src와 alt를 설정할 수도 있지만 src속성과 alt속성을 직접적으로 이용하여 사용할 수도 있다

4. 스타일 조작하기