JS로 HTML 태그 선택하기

Choose HTML tag using JS

var 후보군 = Array(45)
.fill()
.map(function(요소,인덱스){
    return 인덱스 + 1;
});

var 셔플 = [];
//반복문 사용 팁
//정확히 몇 번 루프 돌아야할 지 알 땐 for문 쓰고, 모른다면 또는 기준값이 계속 바뀐다면 while문.
//배열의 길이가 한번씩 뽑을 때마다 바뀌기 때문에 이때 while문 쓴다.
while(후보군.length > 0) {
    var 이동값 = 후보군.splice(Math.floor(Math.random() * 후보군.length),1)[0];//랜덤한 인덱스값에서 원소 1개를 뽑는다!
    셔플.push(이동값);
}
console.log(셔플);
var 보너스 = 셔플[셔플.length-1];//마지막 숫자 가져온다.
var 당첨숫자들 = 셔플.slice(0,6);//0번째부터 6번째 전까지 자른다. 6번째는 포함 안 된다.
//sort(function(p,c) {p-c;});오름차순 정렬.원리 : 뺀 결과가 0보다 크면 순서를 바꾼다.
//sort(function(p,c) {c-p;});내림차순 정렬.원리: c-p를 해서 뺸 결과가 0보다 크면 순서를 바꾼다.

var 당첨숫자들 = 셔플
    .slice(0,6)
    .sort(function(p,c){return p-c;
});
//html의 id로 태그를 선택할 수 있다.
var 결과창 = document.getElementById('결과창');
for(var i=0; i < 당첨숫자들.length; i+=1) {
    

    var 공 = document.createElement('div');
    공.textContent = 당첨숫자들[i];
    결과창.appendChild(공);
}
//html의 클래스 이름으로 태그를 선택할 수 있다. + getElemntsByTagName : 태그 이름으로 찾을 수도 있다.
    var 보너스칸 = document.getElementsByClassName('보너스')[0];//클래스 이름으로 찾을 때 주의점!같은 클래스 이름으로 여러개의 하위 클래스가 있을 수 있기 때문에 인덱스를 꼭 붙여준다!
    var 보너스공 = document.createElement('div');
    보너스공.textContent = 보너스;
    결과창.appendChild(보너스공);