alert
경고
window.alert("안내글")
window. = 윈도우 창에, 생략가능한 구문이다.
alert("안내글"); = 경고창에 글자를 쓰다
prompt
입력
prompt("안내글")
사용자에게 입력창을 주고
숫자(number)나true(boolean)을 입력하더라도string(문자형)으로 반환한다.
confirm
확인 or 취소
confirm("안내글")
사용자가 확인 또는 취소를 선택하게 하고
확인을 누르면true를 반환, 취소를 누르면false를 반환한다.
document
document.write("글자")
document. = 이 문서에.
write("글자"); = 글자를 입력
console
console.log("글자")
console. = 콘솔에.
log("글자"); = 로그 글자를 입력
id를 지정하여 입력하기
document.getElementById("아이디").innerHTML = "글자";
document. = 이 문서에.
getElementById("id"). = "id" 로부터 요소를 얻어온다
innerHTML = "글자" = html의 출력문을 "글자" 로 변경한다.
💡 innerHTML 로만 작성하면 이미 작성된 html의 출력문 값을 받아온다.
<script>
document.getElementById("test").innerHTML = "hello";
</script>
위와 같이 작성하면 div id="test"에 hello 가 작성된다.
id를 스크립트보다 먼저 작성해야한다.
Uncaught TypeError: Cannot set properies of null (setting 'innerHTML')
그렇지 않으면 지정한 id가 null인 상태인 것으로 간주되어 타입에러를 발생시킨다.
DOM 요소
단수 선택
<div id="box" class="no1"> 글자A </div>
html 상단에 위와 같이 작성되어있다고 가정하자.
document.getElementById("id명")
document.getElementById("box").innerHTML 과 같이 글자A를 선택할 수 있다.
document.querySelector("css 선택자")
document.querySelector("#box").innerHTML 또는 document.querySelector(".no1").innerHTML
로 글자A를 선택할 수 있다.
복수 선택
<div id="box" class="no1"> 글자A </div>
<div id="box" class="no1"> 글자B </div>
html 상단에 위와 같이 작성되어있다고 가정하자.
아래의 선택자로 지정하면 html 컬렉션 혹은 node list가 선택된다.
때문에 작성 후 [ ]로 index 순서를 지정해주어야 .innerHTML에서 값을 받아올 수 있다.
❗ [ ] 사이에 들어가는 숫자는 0부터 시작하는 양수로, 작성된 순서부터 0으로 지정된다.
document.getElementsByClassName("class명")
document.getElementsByClassName("no1")[0].innerHTML 과 같이 글자A를 선택할 수 있다.
document.getElementsByClassName("no1")[1].innerHTML 과 같이 글자B를 선택할 수 있다.
document.getElementsByTagName("tag명")
document.getElementsByTagName("div")[0].innerHTML 과 같이 글자A를 선택할 수 있다.
document.querySelectorAll("css 선택자")
document.querySelectorAll("#box")[0].innerHTML 또는
document.querySelectorAll(".no1")[0].innerHTML 과 같이 글자A를 선택할 수 있다.
