💕 알아두기:
사용자의 접근으로 인해 웹 페이지가 load되면, 브라우저는 DOM(Document Object Model 문서 객체 모델)을 생성하게 됨. 생성된 HTML DOM을 통해 자바스크립트는 HTML 문서의 모든 element(요소), attribute(속성), CSS(스타일)에 접근 및 변경(추가/제거 포함)이 가능해짐.
>> 컨트롤하기 위해서는 먼저 자바스크립트에서 HTML element를 찾아야하므로, 아래 방법을 알아보자!
💗 자바스크립트에서 document 객체의 내장함수(browser API) 이용하여 HTML element(요소)를 찾는 방법들:
>> 다양한 CSS selector(선택자)이용
1. getElementByID()
document.getElementById("user_id")
// HTML element를 반환
// 해당 id 값을 가진 HTML element를 발견하지 못할 경우 null을 반환 2. getElementsByTagName()
document.getElementsByTagName("p")
// 해당 tag을 가진 *모든* HTML element를 반환 3. getElementsByClassName()
document.getElementsByClassName("user_class")
// 해당 class 속성값을 가진 *모든* HTML element를 반환 4. querySelector()
>> 해당되는 요소 중 가장 첫번째 것을 반환함
document.querySelector("#user_id") //id selector
document.querySelector(".user_class") //class selector
document.querySelector("p") // type(tag) selector
document.querySelector("a[title="Java"]") // attribute selector
//attribute selector은 다양한 방법으로 스타일을 적용할 수 있음, 내용이 많아 css selector 관련 포스팅에 더 깊이 다룰 예정
document.querySelector("p a") //descendant combinator
document.querySelector("ul.nav > li") //child combinator
document.querySelector("p ~ a") //general sibling combinator
document.querySelector("p + a") //adjacent sibling combinator
document.querySelector("li:nth-child(2)") //pseudo class combinator
document.querySelector("li:nth-of-type(2)") //pseudo class combinator
5. querySelectorAll()
>> querySelector()와 달리, 해당되는 모든 요소 반환함
>> id의 경우 전체 문서에 해당되는 게 하나 뿐이기 때문에 All을 쓰는게 큰 의미 없음
document.querySelectorAll("p") 추가) getElementsByClassName(), getElementsByTagName(),querySelectorAll()을 사용해서 한 개 이상의 element가 반환될 경우 Array(배열)처럼 보이지만, Array-like object(유사배열)이 반환되는 것임. (+ function에서 전달받는 arguments도 유사배열로 저장됨)
여기서 tip) Array.isArray()를 사용하면 배열 여부 확인가능 > boolean값 반환
🍎getElementsByClassName(), getElementsByTagName(): HTML Collection 반환 (동적인 유사배열_node의 변화를 실시간으로 반영)
🍎querySelectorAll(): nodelist 반환 (정적인 유사배열_node의 변화를 실시간으로 감지하지 않음)
- length property 사용 가능
- forEach(콜백함수) method 사용가능
- for loop, for...of loop 사용 가능
- array 전용 method사용 불가(push, indexOf,map 등)
여기서 tip) method와 property의 차이는 뭘까? method는 행동, property는 속성. push()는 method, length는 property
🍎HTML collection & nodelist & arguments 와 같은 Array-like object(유사배열)을 array(배열)로 변환하여 사용하는 법
Array.from($NodeList)
/*예시
const btns = document.querySelectorAll('button');
const btnsArr = Array.from(btns);
*/Arry.prototype.slice.call($NodeList)
/*예시
const btns = document.querySelectorAll('button');
const btnsArr = Array.prototype.slice.call(btns);
*/🎈여기저기 흩어진 지식들을 해부 & 테스트 과정을 거쳐 정리해봅니다...다음에는 이것만 봐도 빠르게 정리가 되겠지요 시간은 소중하니까요!!
swift log