어제 오늘 내일

Javascript를 이용하여 dom에서 특정 부모 노드가 가지는 특정 자식 노드를 찾는 방법입니다. 부모 노드를 선택합니다. 부모 노드에서 특정 자식 노드를 선택합니다. 부모 노드를 선택하거나, 특정 자식 노드를 선택할 때 getElementById(), getElementsByClassName(), querySelector() 등의 노드 선택 함수를 사용할 수 있습니다. 노드를 선택하는 방법은 지난 포스팅을 참조하세요. [Javascript] 선택자, DOM 특정 요소(element) 찾기 Javascript에서 DOM의 특정 요소(element)를 찾는 방법을 정리합니다. 1. getElementById() 2. getElementsByClassName() 3. getElementByTagName(..

Javascript에서 class 이름으로 element를 찾는 방법은 다음과 같습니다. getElementsByClassName() querySelector() querySelectorAll() getElementsByClassName() 클래스 이름을 파라미터로 입력받아서 해당 클래스를 가진 모든 element 목록을 HTMLCollection 형태로 리턴합니다. 예제 - getElementsByClassName() 수박 사과 포도 .green { color : green; } .red { color: red; } .purple { color: purple; } .underline { text-decoration: underline; } // class 이름으로 element 목록 조회 const e..

Javascript에서 DOM의 특정 요소(element)를 찾는 방법을 정리합니다. 1. getElementById() 2. getElementsByClassName() 3. getElementByTagName() 4. querySelector() 5. querySelectorAll() 1. getElementById() Div1입니다. Div2입니다. function getDiv1() { const div1 = document.getElementById('div_1'); alert(div1.innerText); } document.getElementById(); 파라미터로 찾으려는 id를 전달하여, 해당 element를 찾을 수 있습니다. id는 유일한 값이므로, 하나의 element만 리턴합니다. ..

체크박스를 클릭하여 선택할 때마다, 총 몇개가 선택되었는지, 체크된 항목의 개수를 구하는 예제입니다. 체크박스에 체크된 항목 개수 구하기 개 고양이 토끼 function getCheckedCnt() { // 선택된 목록 가져오기 const query = 'input[name="animal"]:checked'; const selectedElements = document.querySelectorAll(query); // 선택된 목록의 갯수 세기 const selectedElementsCnt = selectedElements.length; // 출력 document.getElementById('result').innerText = selectedElementsCnt; } (HTML, JS 탭을 클릭하여 두 ..

시작하기 전에 체크 박스를 만드는 방법을 잘 모른다면, 먼저 아래 포스팅을 참조하세요. [HTML] inpu 태그로 체크박스(checkbox) 만들기 체크박스(checkbox)에 선택 된 값 출력하기 1. 체크박스를 선택 했을 때, 선택한 값만 출력하기 2. 체크박스를 선택 했을 때, 선택된 모든 값 출력하기 3. '확인' 버튼을 눌렀을 때 선택된 값 출력하기 1. 체크박스를 선택 했을 때, 선택한 값을 출력하기 체크박스에 클릭 이벤트가 발생했을 때, 선택된 값만 출력하는 예제입니다. 개 고양이 function getCheckboxValue(event) { let result = ''; if(event.target.checked) { result = event.target.value; }else { re..