JAVASCRIPT

[JavaScript]HTML 조작하기

[JavaScript]셀렉터와 클릭이벤트

Selector 종류

셀렉터를 사용하여 원하는 html을 조작할 수 있다.

메소드 설명
document.getElementsByTagName(태그이름) 해당 태그 이름의 요소를 모두 선택함.
document.getElementById(아이디) 해당 아이디의 요소를 선택함.
document.getElementsByClassName(클래스이름) 해당 클래스에 속한 요소를 모두 선택함.
document.getElementsByName(name속성값) 해당 name 속성값을 가지는 요소를 모두 선택함.
document.querySelectorAll(선택자) 해당 선택자로 선택되는 요소를 모두 선택함.
document.querySelector(선택자) 해당 선택자로 선택되는 요소를 선택함.

 

HTML 조작하는 방법

1.html 요소에 직접 건드려 조작하는 방법

<!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">
    <link rel="stylesheet" href="main.css">
    <title>Document</title>
</head>
<body>
    
    <div class="alert-box" id="alert">
        <p>Alert 박스</p>
        <button onclick="document.getElementById('alert').style.display = 'none'; ">닫기</button>   
    </div> 
    <button onclick="document.getElementById('alert').style.display = 'block'; ">버튼</button>

</body>
</html>

2.script로 빼서 조작하는 방법

<!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>
    <h1 id="hello">안녕하세요</h1>

    <script>
        document.getElementById("hello").innerHTML = "안녕";
    </script>
</body>
</html>

3.함수를 만들어서 조작하는 방법

<!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">
    <link rel="stylesheet" href="main.css">
    <title>Document</title>
</head>
<body>
    
    <div class="alert-box" id="alert">
        <p>Alert 박스</p>
        <button onclick="알림창닫기()">닫기</button>
    </div> 
    <button onclick="알림창열기()">버튼</button>

    <script>

        function 알림창열기(){
            document.getElementById('alert').style.display = 'block';
        }

        function 알림창닫기(){
            document.getElementById('alert').style.display = 'none';
        }

    </script>
</body>
</html>
main.css
.alert-box{
    background:#aba8f4;
    color:#4646b4;
    padding: 20px;
    border-radius: 5px;
    display: none;
}

 

최신글