document
아래 코드 자체가 document 이다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// window : 브라우저 그 자체
// document(혹은 window.document) : HTML 태그
// ID로 요소 선택
</script>
</head>
<body>
<!-- id 속성 값은 스타일링 목적으로 사용 x.
주로 Javascript 에서 요소를 선택하기 위해 사용
한 문서 내에 같은 이름을 가지는 id가 중복되면 안된다. -->
<a id="message">Hi!</a>
<br>
<a>Hello?</a>
<br>
<a>Bye.</a>
</body>
</html>Window
브라우저 그 자체
document
HTML 태그
getElementById
'ID 값' 을 id 속성 값으로 가지는 요소를 변수로 반환.
innerText
innerText를 실행하였을 때 아래 오류가 떴다.
window.document.getElementById('message').innerText = 'Changed!';js는 위에서 아래로 순차적으로 진행하는데
한 줄 실행 시 그 밑에는 아무것도 없는 것.
그래서 body 태그 아래로 위치한다
querySelectorAll
반환되는 타입은 Array가 아니고 NodeList이다.
:scope
:scope는 querySelectorAll 하고 있는 주체 스스로를 의미한다.
querySelectorAll, querySelector은 자식 혹은 자손을 선택하는데,
자손만 선택하고 싶을 때 scope를 사용한다.
addEventListener
선택된 요소에 이벤트를 부여한다.
confirm
문제
연산 기호에 따라 결과 값이 바뀌기
코드를 두드리면 문이 열린다