비전공자의 IoT 국비 교육 수강일지 Day_32

getElementById()실습

코드

html

<h1>클릭 한번 해볼까요?</h1>
<button onclick="mkH1()">h1태그 생성</button> 
<button onclick="mkA()">a태그 생성</button>
<button onclick="mkUl()">ul태그 생성</button>

javascript

let div1 = document.getElementById("div1");

function mkH1(){
    div1.innerHTML += "<h1>DOM활용해보기!</h1>"
}
function mkA(){
    div1.innerHTML += "<a href='https://www.google.com'>Google로 가보자!</a>"
}
function mkUl(){
    div1.innerHTML += "<ul><li>HTML</li><li>CSS</li><li>Javascript</li></ul>"
}

 

 

코드

html

<p id="span1">0</p>
<button onclick="add()">+1 증가</button>
<button onclick="minus()">-1 감소</button>​

javascript

let span1 = document.getElementById("span1");

function plus(){
    //innerText(innherHTML) : 반환되는 값이 문자열
    let num = Number(span1.innerText);
    span1.innerText = num+1;
}
function minus(){
    let num = Number(span1.innerText);
    if(num > 0){
        span1.innerText = num-1;
    }
}

 

innerHTML VS value

HTMLElement.innerHTML
<태그 내에 새로운 요소객체나 내용을 저장하거나 가져올 때 사용>

HTMLInputElement.value
<input 태그의 value값을 저장하거나 가져올 때 사용>

 

HTMLElement 요소 접근

querySelector(selector)
<css 선택자를 이용하여 하나의 요소를 검색>

querySelectorAll(selector)

<css 선택자를 이용하여 모든 요소를 검색>