document는 DOM트리의 최상위 객체이다
DOM(Document Object Model)이라 하면 자바스크립트 입장에서 그저 일종의 문자열일 뿐인 HTML을 자바스크립트가 이해할수있게 객체의 형태로 바꿔둔것이다.(Document를 HTML이라고 이해하면 편하다). 이 DOM을 이제 자바스크립트가 마음대로 컨트롤할 수 있어야되는데 이때 필요한 기본 함수들과 속성값을 제공해주는게 document라는 객체이다.
자바스크립트가 HTML을 가져와서 다루기 위해선 원하는 HTML태그를 선택해야하는데, document객체에서 다양하게 선택하는방식을 제공한다
document.getElementById : id로 선택
document.getElementsByClassName: class로 선택, 같은class가 여러개 있을 경우엔 모두 다 선택이 되서 배열에 저장된다
다음 코드를 실행해 결과를 확인해보라
<div class="menu">menu1</div>
<div class="menu">menu2</div>
<div class="menu">menu3</div>
console.log(document.getElementsByClassName("menu"))
🎈 결과
document.querySelector : id, class둘다 선택이 가능하고 좀더 디테일한 선택이 가능하다 참고로 선택가능한 값이 여러개가 있을경우 그중에 첫번째 태그 하나만 반환한다
let userInput = document.querySelector("#user-input"); // id=user-input을 선택
let resultAreaImg = document.querySelector(".main-img");// class=main-img를 선택
let menus = document.querySelector("nav a")// nav태그밑에있는 a태그를 선택
document.querySelectorAll: 위에 document.querySelector와 같다 하지만 All에서 알수있듯이 선택된값 모두를 NodeList에 담아 반환한다
자바스크립트에서 유용한객체중 하나인 Math가 있다. 수학적으로 필요한 왠만한 함수들이 다있다.
Math.random(): 0~1사이의값을 반환 (1에 근접한값까지지만 1은미포함이다)
Math.floor():소수점 버림이다
Math.ceil():소수점 올림이다
Math.round():소수점 반올림
Math.max():여러개의 값중 제일 큰값반환
Math.min():여러개의 값중 제일 작은값 반환
등등 여러가지 유용한 함수들이 많으니 참고하자
textContent : 노드의 text값을 반환
innerText: 노드의 text값을 반환 textContent랑 비슷하지만 textContent는 모든 요소를 반환하는 반면 innerText는 사람이 읽을 수 있는 요소만 가져옴 (글자사이에 스페이스가 많다면 textContent 있는 그대로 가져오는 반면 innerText는 스페이스를 한칸만 남기고 가져온다)
innerHTML: html 요소를 반환한다
<h1 id="test">
<div>Hello world</div>
</h1>
let test= document.getElementById("test")
console.log(test.innerText)
console.log(test.textContent)
console.log(test.innerHTML)
🎈 결과
참고) 이외에도 다양한 노드 속성과 함수는 다음 사이트에서 확인
https://developer.mozilla.org/ko/docs/Web/API/Node
innerHTML: Element의 HTML, XML을 읽어오거나, 설정할 수 있습니다. 태그 안에있는 HTML 전체 내용을 들고옴
textContent: 해상 노드가 가지고 있는 텍스트 값을 그대로 가져옴.
<div id="test"><span>hi</span></div>
console.log(document.getElementById("test").innerHTML)
console.log(document.getElementById("test").textContent)
🎈 결과
document.getElementById("test").textContent=`<h1>Noona</h1>`
document.getElementById("test").innerHTML=`<h1>Noona</h1>`
다양한 노드 속성과 함수 참고 사이트
https://developer.mozilla.org/ko/docs/Web/API/Node