자바 스크립트 DOM 기초

🚀 자바 스크립트 DOM 기초

❗ 개인이 공부한 내용을 적은 것 이기에 오류가 많을 수도 있음

2022-02-22

TEXTCONTENT

console.log(document.querySelector('.message').textContent); // 메세지 부분을 선택하고
 // start guessing이 나옴                                  // 선택된 부분의 text를 얻어오기

document.querySelector('.message').textContent = 'Correct number' // start gussing을 Correct number로 바꿈

• 아랫줄 윗줄 코드 바꾸는 법 단축키 : ALT + 방향키 아래

VALUE

let num = document.querySelector('.message').Value // 메세지의 value를 가져와서 num에 저장

자바스크립트에서 CSS 활용하기

Document.querySelector('body').style.backgroundColor = 'blue';
// 바디의 백그라운드를 블루로 바꾸기  // 항상 string식으로 ' ' 사이에 써주기

ESC 눌렀을때 창 꺼지게 만들기

document.addEventListener('keydown', function(e){  // keydown은 키를 입력했을때 반응
  console.log(e.key);   // 매개변수 e 부분에는 반드시 들어와야함  // e.key 에서 key 부분은
})                                                         //key말고도 code등등 사용가능

innerHtml vs innerText

function setInnerText()  {
  const element = document.getElementById('content');
  element.innerText = "<div style='color:red'>A</div>";//<div style='color:red'>A</div>
}

function setInnerHTML()  {
  const element = document.getElementById('content');
  element.innerHTML = "<div style='color:red'>A</div>"; // A(빨간색)
}

innertext는 (HTML)텍스트만 출력
innerHTML은 (HTML)텍스트와 CSS속성 까지 출력

Window.getComputedStyle()

ex) window.getComputedStyle(h1).fontSize // 32px

• 무슨 속성이 들어가있는지 확인하는 방법