본문 바로가기
JavaScript

[JavaScript] selector 셀렉터 실습

by happenstance 2021. 8. 6.
<!-- 셀렉터 selector -->
<!-- document.getElementById('hello') => selector -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2 id="hello">안녕하세요</h2>
    <h2 id="hi">올 때 메로나</h2>

    <script>
        /* '안녕하세요'를 '안녕'으로 변경함 */
        /* document : 웹 문서 */
        /* . : ~의, ~안에 있는 */
        /* Element : HTML 요소 */
        /* ById : id가 ~인 */
        /* innerHTML : 내부 글자 */
        document.getElementById('hello').innerHTML = '안녕';
        /* ('???')에 바꾸고 싶은 HTML 요소의 id를 작성 */
        /* ????에 무엇을 바꿀지 작성 (색상, 사이즈 등) */
        /* '?????'에 무엇으로 바꿀지 작성 */
        // document.getElementById('???').???? = '?????';
        document.getElementById('hello').style.color = 'red';
        document.getElementById('hello').style.fontSize = '30px';

        document.getElementById('hi').innerHTML = '올 때 바밤바';
    </script>
</body>

</html>