javascript - 인터렉티브

드디어 codeit 자바스크립트 기초를 다 듣고 심화편으로 넘어간다!

초조해 하지말고 천천히 나아가자

id로 태그 선택하기

• documnet 라는 객체의 getElementById 메소드를 사용한다.
• 찾고자하는 Id 태그의 값을 가져온다.
• 존재하지 않는 태그를 선택하면 null 값을 가져온다.

	const myTag = document.getElementById('myNumber'); 

class로 태그 선택하기

• getElementsByClassName를 사용하여 class 태그를 가져온다.
• 위에서부터 차례대로 가져온다.
• 유사 배열에 주의하자.(HTMLCollection)
• null 값이 아닌 비어있는 값을 가져온다.

	const myTags = document.getElementsByClassName('color-btn');
	console.log(myTags[1]);
	console.log(myTags.length);

	for (let tag of myTags){ 
    	console.log(tag);
    }

HTML 태그 이름으로 선택

• document.getElementsByTagName
• tag에 해당하는 태그 모음(HTMLCollection)

유사배열(Array-Like Object)

HTML Collection을 할 때 종종 마주친다.
배열과 유사한 객체 ex) HTMLCollection, NodeList, DOMTokenList, ...

1. 숫자형태의 indexing이 가능하다.
2. length 속성이 있다.
3. 배열의 기본 메소드를 사용할 수 없다.
4. Array.isArray() 의 결과값은 false 이다.

css 선택자로 태그 선택하기

• querySelectorAll() 은 태그 모음(NodeList)

	// 두 개의 결과 값이 같다.
	const myTag = document.querySelector('#myNumber')
    const myTag = document.getElementById('#myNumber')

    
    // 유사배열이 출력될 것 같지만, 가장 첫 번째 클래스만 불러온다.
    const myTag = document.querySelector('.color-btn');
	
	// 유사배열을 불러온다.
    const myTags = document.querySelectorAll('.color-btn');
    const myTags = document.getElementsByClassName('.color-btn');

이벤트(Event)와 버튼 클릭

• 이벤트 핸들링은 HTML 코드에서도 작성이 가능하다.
• 다만, 자주 사용하는 작성 방식이 아니다.

	const btn = document.querySelector('#myBtn')
    
    // 이벤트 핸들링(Event handling)
    btn.onclick = function() {	// 이벤트 핸들러(Event Handler)
		console.log('Hello Codeit!')
    }