lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webIntroJsChapter4Title

webIntroJsChapter1Title

webIntroJsChapter2Title

webIntroJsChapter3Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>DOM 예시</title>
  </head>
  <body>
    <p id="intro">초록색 버튼을 클릭해 보세요</p>
    <div class="paragraphs-container">
      <p>첫 번째 단락입니다.</p>
      <p>두 번째 단락입니다.</p>
      <p>세 번째 단락입니다.</p>
    </div>
    <button id="changeColor">색상 변경하기</button>
  </body>
</html>

document.getElementById('changeColor').addEventListener('click', function () {
  // ID를 통한 요소 선택과 수정
  const introElement = document.getElementById('intro');
  introElement.textContent = '글자색이 파란색으로 바뀌었습니다';

  // 태그 이름을 통한 요소 선택과 수정
  const paragraphs = document.getElementsByTagName('p');

  for (let para of paragraphs) {
    para.style.color = '';
  }
});

# HTML 요소 선택법 - 1

## getElementById

`document.getElementById()`는 HTML에서 특정 `id` 속성을 가진 요소를 선택하는 메서드입니다.

### 코드 예시:

```html title="HTML: intro id를 가진 p 요소"

<p id="intro">안녕하세요</p>
```

```javascript title="JavaScript: getElementById로 요소 선택"
// JavaScript로 해당 요소 선택하고 내용 변경
const introElement = document.getElementById('intro');
introElement.textContent = '반갑습니다';
```

<br />

## getElementsByTagName

`document.getElementsByTagName()`는 HTML에서 특정 태그를 가진 모든 요소들을 선택하는 메서드입니다.

### 코드 예시:

```html title="HTML: 여러 p 요소"

<p>첫 번째 단락입니다.</p>
<p>두 번째 단락입니다.</p>
<p>세 번째 단락입니다.</p>
```

```javascript title="JavaScript: getElementsByTagName로 요소 선택"
// JavaScript로 <p> 태그를 가진 모든 요소 선택
const paragraphs = document.getElementsByTagName('p');

for (let para of paragraphs) {
  para.style.color = '';
}
```