html 조작하기

<h1 id="hello">Hello</h1>

<script>
document.getElementByID("hello").innerHTML="안녕";
</scirpt>

✏️위 코드의 해석 과정
document는 문서
.은 ~의
getElementByID("hello")는 hello라는 html요소(일명 element) id를 찾아서
"="는 오른쪽에 있는걸 왼쪽에 대입하라는 의미
.innerHTML="안녕"은 h1태그에 HTML요소에 있는 "hello"글자를 "안녕"이라는 글자로 대입하라

✏️위 코드의 해석 결과
문서(document)에서 hello라는 아이디를 찾아서(getElementById()) 그 안에 글씨를 안녕으로 대입(.innerHTML)해서 결국 hello라는 글자가 안녕이 됨

🌟용어정리
getElementByID()는 셀렉터(selecter)
.innerHTML는 메서드(method)나 함수(function)라고함
(.innerHTML말고도 메서드는 많이 있다.)

알람창 띄우기

<div id="alert-box" style="display:none"> <p>알람창입니다.</p> </div>
<button onclick="document.getElementById('alert-box').style.display='block';"> 버튼 </button>

onclick으로 알람창 띄우기

<div id="alert-box" style="display:none"> <p>알람창입니다.</p> </div>
<button onclick="알람창띄우기()"> 버튼 </button>

<script>
	function 알람창띄우기(){
    	document.getElementById('alert-box').style.display='block';
    }
</script>

파라미터로 알람창 띄워보기

<div id="alert-box" style="display:none"> <p>알람창입니다.</p> </div>
<button onclick="알람창띄우기('block')"> 버튼 </button>

<script>
	function 알람창띄우기(파라미터){
    	document.getElementById('alert-box').style.display=파라미터;
    }
</script>

onclick()대신 이벤트리스너 사용하기

<div id="alert-box" style="display:none"> <p>알람창입니다.</p> </div>
<button id="btn"> 버튼 </button>

<script>
	document.getElementById('btn').addEventListener('click',function(){
    	document.getElementById('alert-box').style.display='block'
    })
</script>

onclick에서 이벤트리스너까지

<script>

	// onclick
	function 알람창띄우기(){
    	document.getElementById('alert-box').style.display='block';
    }
    
    // onclick, 파라미터
    function 알람창띄우기(파라미터){
    	document.getElementById('alert-box').style.display=파라미터;
    }
    
    // click 이벤트 리스너
    document.getElementById('btn').addEventListener('click',function(){
    	document.getElementById('alert-box').style.display='block'
    })
</script>