WebDevelop 수업 - Day17 JS : QuerySelectorAll, Event

김지원·2022년 7월 1일

JavaScript

WebDevelop2

목록 보기

17/34

ID속성

: id속성 값은 스타일링 목적으로 사용하지 않고 주로 Javascript에서 요소를 선택하기 위해 많이 사용한다.

한 문서 내에 같은 이름을 가지는 id가 중복되면 안된다.

window

: 브라우저 그 자체

document(혹은 window.document)

: HTML 태그

이거 자체가 document 이다.

innerText

: 선택된 요소의 내부 텍스트 내용을 지정한다.

innerHTML

: 선택된 여소의 내부 HTML 태그

<script>
      window.document.getElementById('message').innerHTML = '<input type= "text">';
</script>

<script>
     let message = window.document.getElementById('message')
     message.innerHTML = '<input type= "text">';
</script>

변수로 지정해도 적용이 된다.

< 참고 >

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

ID로 요소 선택

window.document.getElementById(ID 값);
ID 값 을 id속성 값으로 가지는 요소를 변수로 반환한다.

innerText로 텍스트를 바꾸려고 했는데 속성을 지정할 수 없다는 오류가 뜬다.
Cannot set properties of null (setting 'innerText')
: null의 innerText 속성을 지정할 수 없다. ('innerText' 지정 중)

innerText는 속성이다.
그런데 자바스크립트는 순차적으로 위에서 부터 읽으며 실행을 한다. 그래서
window.document.getElementById('message').innerText = 'Changed!';
이 밑으로는 인식하지 못해서 적용이 되지 않아 오류가 뜨는 것이다.

script를 body안 맨 밑으로 넣어보면 오류가 뜨지않고 적용이 되는 것을 볼 수 있다.

style 속성

: 선택된 요소의 CSS 속성을 변경한다.

단 케밥 케이싱되어 있는 CSS 속성이름을 카멜케이싱해야한다.

background-color -> backgroundColor

remove 메서드

: 선택된 요소를 제거한다.
<script>
     message.remove();
</script>
해당 요소는 사라졌으며 <br>이 있어서 공간이 비어있는 것이다.

CSS 선택자로 요소를 선택 : querySelector

: (어떠한 부모 / 선조 요소).querySelector(CSS 선택자)
window.document.body.querySelector();
CSS 선택자에 부합하는 요소를 한 개만 선택한다.
단 이때 이는 반드시 앞서 나온 요소의 자식이거나 자손이다.

<script>
	let second = window.document.body.querySelector('a:nth-of-type(1)');
	second.innerText = 'I am second element';
</script>

왜 꼭 선택한 요소가 앞서 나온 요소의 자식이거나 자손이여야 할까?

<body>
	<a id="message">Hi!</a>
</body>
<script>
	let second = message.querySelector('a');
	second.innerText = 'I am second element';
</script>
message.querySelector('a');에게 innerText 속성을 주어보았는데 오류가 터진다.

message라는 id를 가진 a 태그에는 자식이 없기 때문에 오류가 발생한다.

CSS 선택자로 요소들을 선택 : querySelectorAll

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

이 때 반환되는 타입은 Array가 아니고 NodeList임 (비슷함)

NodeList를 Array로 바꾸기 위해서는 Array.form()을 사용한다.
.filter()도 가능하다.

<script>
	let anchors = window.document.body.querySelectorAll('a');
	console.log(anchors.length);
</script>

a태그의 총 갯수를 돌려준다.

<script>
	anchors.forEach(x => {
          x.innerText = 'Changed!';
	});
</script>

forEach도 사용가능하다.

getElementById는 항상 document 뒤부터 적혀야하고
querySelector 과 querySelectorAll은 항상 자신의 부모 / 선조의 뒤부터 적혀야한다.

<div>
	<div>A</div>
</div>
<div>B</div>
<div>C</div>
이 body를 참고하여 script예제를 추가하겠음.

scope

: scope는 querySelectorAll 하고 있는 주체 스스로를 의미한다.

querySelectorAll, querySelector은 자식 혹은 자손을 선택하는데, 자손만 선택하고 싶을 때 scope를 사용한다.

<script>
     window.document.body.querySelectorAll(':scope > div >  div').forEach(x => {
         x.style.color = 'red';
     });
</script>

여기서는 scope는 body이다.

<body>
    <div id="button">Click!</div>
</body>
이 body를 참고하여 script를 작성하겠음.

EVENT

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

<script>
	let buttonElement = window.document.getElementById('button');
     buttonElement.addEventListener('click', () => {
            alert('Hello!');
     });
</script>

클릭 했을 때 뒤에적은 함수를 실행하겠다는 의미이다.

alert(x)

: x라는 내용을 가지는 메세지 출력

confirm(x)

: x 라는 내용을 가지는 메세지를 출력하나 [확인] 클릭시 true, [취소]클릭시 false를 반환한다.

if(confirm('Really?')) {
	alert('Yes');
} else {
	alert ('No');
}

예제 1) 아래의 HTML을 변경없이 계산기를 만드시오.

<body>
    <input autofocus type="number" value="0">
    <select>
        <option selected value="plus">+</option>
        <option value="minus">-</option>
        <option value="mutiply">*</option>
        <option value="divide">/</option>
        <option value="remain">%</option>
    </select>
    <input type="number" value="0">
    <input type="button" value="계산">
    <span>
        <span>결과 : </span>
        <span>0</span>
    </span>
    <script>

    </script>
</body>

1. Input 요소의 값을 가져오기 위해서는 우선 Input 요소를 선택한 뒤 value 속성을 받아오면 됨.
2. Input 요소의 value 속성 값은 문자열이며 이를 숫자로 변환하기 위해서는 parseInt함수를 이용한다.
가령,
let input = window.document.body.querySelector('input');
let value = input.value;
에서 value는 문자열이며 이를 숫자로 바꾸기 위해서는 아래와 같이 한다.
let value = parseInt(input.value);

<select> : 현재 상태에서 해당 Select 요소의 vlaue를 가져오면 'plus'가 반환된다. 즉, 선택된 option요소의 value를 반환함.

    <script>

        let result = window.document.body.querySelector(':scope > span > span:nth-child(2)');
        let button = window.document.body.querySelector(':scope > input[type=button]');
        let number1 = window.document.body.querySelector(':scope > input[type=number]');
        let number2 = window.document.body.querySelector(':scope > input[type=number]:nth-of-type(2)');

        let plus = window.document.body.querySelector(':scope > select > option[value=plus]');
        let minus = window.document.body.querySelector(':scope > select > option[value=minus]');
        let multiply = window.document.body.querySelector(':scope > select > option[value=multiply]');
        let divide = window.document.body.querySelector(':scope > select > option[value=divide]');
        let remain = window.document.body.querySelector(':scope > select > option[value=remain]');
        
        button.addEventListener('click', () => {
            let value1 = parseInt(number1.value);
            let value2 = parseInt(number2.value);
            if(plus.selected) {
                result.innerText = value1 + value2;
            } 
            else if(minus.selected) {
                result.innerText = value1 - value2;
            }
            else if(multiply.selected) {
                result.innerText = value1 * value2;
            }
            else if(divide.selected) {
                result.innerText = value1 / value2;
            }
            else if(remain.selected) {
                result.innerText = value1 % value2;
            }
            

        });
</script>