[7] Dom, Element selector, Math

Dana's Log·2022년 6월 5일
0

JavaScript

목록 보기
8/13

Document

document는 DOM트리의 최상위 객체이다
DOM(Document Object Model)이라 하면 자바스크립트 입장에서 그저 일종의 문자열일 뿐인 HTML을 자바스크립트가 이해할수있게 객체의 형태로 바꿔둔것이다.(Document를 HTML이라고 이해하면 편하다). 이 DOM을 이제 자바스크립트가 마음대로 컨트롤할 수 있어야되는데 이때 필요한 기본 함수들과 속성값을 제공해주는게 document라는 객체이다.

Element selectors

자바스크립트가 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가 있다. 수학적으로 필요한 왠만한 함수들이 다있다.

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과 textContent의 차이

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

profile
다나로그

0개의 댓글