# getElementByClass

js005.html을 생성하고 js004.html의 내용을 복사한 후 p 태그를 추가

{% code title="js005.html" %}
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div id="alert" class="alert-box" >
    <p>알림창 제목</p>
    <p>알림창 세부내용</p>
    <button onclick="alertControl('none')">닫기</button>
</div>

<button onclick="alertControl('block', 'black')">버튼 1 </button>
<button onclick="alertControl('block', 'red')">버튼 2</button>
</body>

<script>
    function alertControl(파라미터1, 파라미터2){
        document.getElementById('alert').style.display = 파라미터1;
        document.getElementById('alert').style.backgroundColor = 파라미터2;
    }

</script>
</html>
```
{% endcode %}

{% code title="main.css" %}
```css
.text {
    color : aquamarine;
}

```
{% endcode %}

main.css 파일에 text class의 css를 추가해보자.

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2Fy1iwbMvJddMyCPm4jiZY%2FScreenshot_44.png?alt=media&#x26;token=a5e35947-6b3d-4e04-8d4e-9fe6cbffca37" alt=""><figcaption></figcaption></figure>

p 태그 중 제목 부분만 fontSize 를 키우고 싶은데 어떻게 해야할까?

지금까지 해왔던 것처럼 원하는 p 태그에 id를 부여하고&#x20;

```javascript
document.getElementById('부여한ID').style.fontSize = "50px";
```

이런식으로 해도 되겠지만 이번엔 다른 셀렉터를 사용해보자.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div id="alert" class="alert-box" >
    <p class="text">알림창 제목</p>
    <p class="text">알림창 세부내용</p>
    <button onclick="alertControl('none')">닫기</button>
</div>

<button onclick="alertControl('block', 'black')">버튼 1 </button>
<button onclick="alertControl('block', 'red')">버튼 2</button>
</body>

<script>
    function alertControl(파라미터1, 파라미터2){
        document.getElementById('alert').style.display = 파라미터1;
        document.getElementById('alert').style.backgroundColor = 파라미터2;
        document.getElementsByClassName('text')[0].style.fontSize = "50px";
    }

</script>
</html>
```

이렇게 p 태그에 class를 부여하고&#x20;

```javascript
document.getElementsByClassName('text')[0].style.fontSize = "50px";
```

'text'라는 이름의 클래스 중 \[ 몇 번째] 의 fontSize를 50px로 변경해줘 라고 할 수 있다.&#x20;

이외에도 getElementsByName , getElementsByTagName 과 같은 셀렉터가 있다.&#x20;

