index.js 파일 html에 넣기
<script src="index.js"></script>이걸 주로 사용한다. 이때 넣는 위치는 body태그의 맨 밑에 넣는게 룰이라고 한다.
ID로 태그 선택하기
맨 처음 자바스크립트를 배울 때 가장 많이 사용했던 console.log 처럼 미리 만들어져있는 document.getElementById() 메소드를 사용하면 된다.
getElementById
메소드 이름 그대로, 어떤 요소를 가져오겠다는 의미이다. 그래서 이 메소드의 파라미터로 우리가 접근하고자 하는 태그의 id값을 문자열로 전달해주면 해당되는 태그가 선택되는 원리이다.
const myTag = document.getElementById('id');우리가 html을 배울 때 id 속성은 다른 태그들과 구분하기 위해 붙여주는 고유한 값이라 배웠으니까, id속성을 활용하면 우리가 필요한 태그만을 명확하게 선택할 수 있는 장점이 있다.
그렇기 때문에 자바스크립트로 딱 하나의 요소만을 선택할 땐 html 태그에 id 속성을 부여하고 getElementById로 불러주면 된다.
참고로, 존재하지 않는 태그를 선택하게 되면 null 이 출력된다.
Class로 태그 선택하기
id는 고유한 값이라 하나의 태그를 선택할 땐 유용하지만 만약 여러 요소들을 동시에 선택해야 하는 경우에는 활용하기가 좀 어렵다.
css로도 여러 요소들을 선택할 땐 class 속성을 활용한다.
class로 속성을 선택할 땐 getElementsByClassName을 사용한다.
getElementsByClassName
한 가지 주의해야 할 점은 여러가지 속성을 선택하는 것이므로 Element's'가 붙는다는 점!
const myTags = document.getElementsByClassName('className');console.log로 출력해보면 className 클래스가 있는 모든 태그들이 대괄호로 감싸져서 배열의 형태로 선택되게 되는데, HTMLcollection이라고 붙으며 출력된다.
각각의 index도 있고, length 프로퍼티도 있어서 배열 같아 보이지만 완벽한 배열은 아니다. 배열의 메소드인 splice, push같은 것들은 사용할 수 없어 엄밀히 말하면 배열은 아니다. 하지만 대괄호 표기법으로 1번 인덱스에 접근하거나 length 프로퍼티를 사용할 수 있고, for...of 문도 사용할 수 있어 유사배열(Array-Like Object)이라 부른다.
요소들의 순서는 html 태그에서 봤을 때 깊이와는 상관없이 무조건 위에서부터 아래로 내려간다.
또, 클래스 이름이 한 번만 선언된 것에 접근하려 한다면 딱 그 태그만 선택될 거라고 생각할 수 있는데, 그렇지 않다. 출력해보면 요소 한 개가 들어있는 HTMLcollection이 선택되기 때문에 하나만 선택하려면 0번 인덱스에 접근해야 한다.
console.log(myTags[0]);getElementsByClassName으로 존재하지 않는 클래스에 접근하게 되면 null이 아닌 빈 HTMLcollection이 출력된다.
console.log(myTags === null); //false
console.log(myTags.length); //0태그 이름으로 태그 선택하기
document.getElementByTagName('태그이름') 메소드를 활용하면 태그 이름으로 태그를 선택할 수 있게 된다.
const btns = document.getElementsByTagName('button');
// html문서 내의 모든 button 태그를 선택하게 됨document.getElementsByClassName('class')메소드와 마찬가지로 태그 이름으로 요소를 찾는 경우에 여러 개의 요소가 선택될 수 있기 때문에 메소드 이름에 Element's'가 있고, 실행결과 역시 HTMLCollection을 리턴한다.
참고로 css 선택자처럼 '*' 값을 전달하게 되면 모든 태그를 선택할 수도 있는데,
const btns = document.getElementsByTagName('button');
const allTags = document.getElementsByTagName('*');...하지만 css에서도 *을 많이 사용하는걸 보지 못했듯이, 많이 사용되는 메소드는 아니다.
CSS 선택자로 태그 선택하기
css선택자로 태그를 선택하면 보다 간편하게 태그를 선택할 수 있다.
ID
const myTag = document.querySelector('#myNumber');
const myTag2 = document.getElementById('myNumber');myTag와 myTag2는 서로 같은 동작을 하게 된다.
id를 선택할 땐 #을 붙인다.
Class
const myTag3 = document.querySelector('.color-btn');위 코드를 실행해보면 맨 처음 코드만 실행되게 된다. 이게 의도한 것이라면 상관없지만, 클래스나 태그 이름으로 여러 요소를 선택하고 싶을 땐
const myTags1 = document.querySelectorAll('.color-btn');
const myTags2 = document.getElementsByClassName('color-btn');
이렇게 해주면 된다. 출력을 확인해보면 Nodelist라는 유사 배열이 출력되는데, querySelector을 이용할 땐 Nodelist, getElementsByClassName을 이용할 땐 HTMLCollection이 사용된다. 그래도 내용은 같다!
이벤트와 버튼 클릭
// 이벤트(Event)와 버튼 클릭
const btn = document.querySelector('#myBtn');
// 이벤트 핸들링(Event Handling)
btn.onclick = function() { // 이벤트 핸들러(Event Handler)
console.log('Hello Codeit!');
};이벤트 핸들링은 html에서도 사용할 두 싰는데,
<button id="myBtn" onclick="console.log('Hello Codeit!')">Click!</button>이렇게도 사용 가능하다. 근데 사실 잘 쓰지는 않는다. 실제로 동작시킬 코드들은 간단하지가 않아서 가독성이 매우 떨어진다. 또한 코드의 일관성이 떨어져서 나중에 유지보수가 어려워질 수 있다.
유사 배열?
- 배열과 유사한 객체 ex) HTMLCollection, NodeList, DOMTokenList, ...
특징
- 숫자 형태의 indexing이 가능하다.
length프로퍼티가 있다.- 배열의 기본 메소드를 사용할 수 없다.
Array.isArray(유사배열)의 리턴값은 false다.
