JavaScript04 - 요소선택, 이벤트

요소선택

• id 속성 값은 스타일링 목적으로 사용하지 않는다. cf) CSS 선택자 : #
• 주로 Javascript에서 요소를 선택하기 위해 사용.
• 한 문서 내에 같은 이름을 가지는 id가 있으면 안된다.

window : 브라우저 그 자체
document(혹은 window.document) : HTML 태그

ID로 요소 선택
: window.document.getElementById(ID 값)

• 'ID 값'을 id 속성 값으로 가지는 요소를 변수로 반환한다.
  let message = window.document.getElementById('message');
• innerText : 선택된 요소의 내부 텍스트 내용을 지정한다. input을 넣으면 텍스트 그대로 출력.
  message.innerText = '<input type = "text">';
window.document.getElementById('message').innerText = 'Changed!';
• innerHTML : 선택된 요소의 내부 HTML 내용을 지정한다. input을 넣으면 제대로 작동됨.
• style 속성 : 선택된 요소의 CSS 속성을 변경한다. 단, 케밥케이싱되어 있는 CSS 속성 이름을 카멜케이싱 해야한다.
  (background-color -> backgroundColor)
  message.style.backgroundColor = 'red';
• remove 메서드 : 선택된 요소를 제거한다.
  message.remove();

something.some(); // some이라는 메서드(함수)
something.some; // some이라는 속성(Property)

CSS 선택자로 요소를 선택
: (어떠한 부모/선조 요소).querySelector(CSS 선택자)

• CSS 선택자에 부합하는 요소를 한 개만 선택한다. 단, 이때 이는 반드시 아서 나온 요소의 자식이거나 자손이다.
  let second = window.document.body.querySelector('a:nth-of-type(1)');

let second = message.querySelector('a');
second.innerText = 'I am second element.';

• (어떠한 부모/선조 요소).querySelectorAll(CSS 선택자)

  • 이때 반환되는 타입은 Array 아니고 NodeList임.
  • NodeList를 Array로 바꾸기 위해서는 Array.from()을 사용한다.
    let anchors = Array.from(window.document.body. querySelectorAll('a'));
console.log(anchors.length);
anchors.forEach(x =>
{ x.innerText = 'Changed!'; });
  • scope : 쿼리셀렉트 or 쿼리셀렉터를 하고 있는 주체. 여기서는 body를 의미한다.
    window.document.body.querySelectorAll(':scope > div > div').forEach(x => {x.style.color = 'red';});

기타

• 요소.classList.add(x) : 요소에 x 클래스를 추가한다.
• 요소.classList.remove(x) : 요소에서 x 클래스를 제거한다.
• 요소.classList.contains(x) : 요소가 x 클래스를 가지는가에 대한 여부를 반환한다.
• html 태그에 'data-어쩌고' 라고 되어있는 속성 값에는
  '그 요소'.dataset['어쩌고']로 접근할 수 있다.

이벤트

: 선택된 요소.addEventListener(이벤트 종류, 함수)

let buttonElement = window.document.getElementById('button');
buttonElement.addEventListener('Click', () => {
    if(confirm('Really?')){
        alert('Yes');
    } else {
        alert('No');
    }});

• alert(x); // x라는 내용을 가지는 메시지 출력
• confirm(x); // x라는 내용을 가지는 메시지를 출력하나 '확인' 클릭시 true, '취소' 클릭시 false를 반환한다.

Math.random() : 0 이상 1 미만의 무작위 소수를 뽑는다.
Math.ceil(x) : x 수를 올림한다.
Math.floor(x) : x 수를 내림한다.
Math.round(x) : x 수를 반올림한다.

URL 사용법

https://developer-talk.tistory.com/340