document.getElementBy...

아이디로 찾기

// HTML에 텍스트를 삽입
document.getElementById('title').innerHTML = '아이디입력하셈'; 
// CSS 디스플레이 설정을 바꿈. none=사라짐, block=보임
document.getElementById('alert').style.display = 'block'; 

클래스로 찾기

// 클래스이름으로 찾기. 몇번째 인지 [0] 으로 표시필수.
document.getElementsByClassName('title1')[0].innerHTML = '안녕';

이벤트 리스너 사용하기
"어쩌구" 아이디를 "클릭" 했을때, "function" 을 가동시킴.

document.getElementById('어쩌구').addEventListener('click', function(){
    //실행할 코드        파라미터 자리에 들어가는 function = 콜백함수 ↑
});

클래스 탈부착식으로 버튼 만들기

html 에서 show 클래스가 생기면 보이기
없어지면 안보이기

<ul class="list-group">
<ul class="list-group show">

css 는 이렇게 설정

.list-group {
  display : none
}
.show {
  display : block
}

마지막으로 js 를 만들어줌

document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
document.getElementsByClassName('list-group')[0].classList.add('show');
});

클릭하면 show 라는 클래스를 더해줘라.
이렇게 하면 다시눌렀을때 숨길수가 없음.
그럴땐 add 가아니라 toggle 을 사용.

document.getElementsByClassName('list-group')[0].classList.toggle('show');

getElementsBy~~ 대신 쿼리 셀렉터 querySelector 사용

클래스는 쩜 .
아이디는 #

<div class="test1">안녕하세요</div>
<div id="test2">안녕하세요</div>

<script>
  document.querySelector('.test1').innerHTML = '안녕';
  document.querySelector('#test2').innerHTML = '안녕';
</script>

클래스 여러개 있을땐
querySelectorAll
그리고 위에서 몇번째인지 지정해줘야함 [0]

<div class="test1">안녕하세요</div>
<div class="test1">안녕하세요</div>

<script>
  document.querySelectorAll('.test1')[1].innerHTML = '안녕';
</script>