[JavaScript]계산기 만들기

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 

---

https://github.com/Leewang31/fe-sprint-calculator

---

새로 알게된 내용

<!--calculator.html-->
<div class="calculator__display">0</div>

// script.js
const display = document.querySelector('.calculator__display');
console.log(display.textContent); // '0'
console.log(typeof(display.textContent)); // 'string'

다음과 같은 코드가 있을때 div태그 안에 0값을 15로 변경하고 싶다.

클래스 calculator_display를 document.querySelector()로 받아 display라는 변수에 저장한다.

display.textContent는 div태그 안에 0을 가르킨다.

display.textContent = '15';라고 저장하면 html의 <div>태그 안 값이 변경된다.

 

textContent대신 innerHtml을 사용해도 같은 결과같이 나온다.

차이는 무엇인지 또 innerText는 무엇인지 알아보자

    <div class='content'>
        hello
        <span style='display:none'>여기는 display:none입니다.</span>
      </div>

const content = document.querySelector('.content');

console.log(content.innerHTML);
  
console.log(content.innerText);
  
console.log(content.textContent);

• innerHtml : 해당 element안에 있는 모든 값을 가져옵니다.
• innerText : 사용자에게 보여지는 값만 가져옵니다.
• textContent : 태그에 상관없이 (사용자에게 보여지든 안보여지든) 모든 텍스트 값을 가져옵니다.