본문 바로가기
반응형

JavaScript

 (46)
자바스크립트로 태그에 class 클래스 추가하기 (jQuery + Vanilla js) - class 추가하기 - html 요소에 class를 추가하고 싶다면 어떻게 해야 할까? 특히 어떤 요소를 만들고, 그 요소에 class 값을 추가한 뒤에, 다른 요소 안에 넣어주는 작업을 할 떄가 많다. JavaScript를 이용해서 추가한다면 다음과 같다. 다음과 같이 특정 요소를 선택하여 classList 속성에 접근하여 add() 함수를 호출한다. cell.classList.add(className); - 헷갈리기 쉬운 부분 - JavaScript에서 어떤 요소의 속성 값을 변경할 때 '='로 바로 넣어줄 때가 많아서 헷갈리기 쉽다. ele.innerHTML = 'myMsg'; ele.onchange = myFunc; 이런 식으로 속성을 바로 넣어주는 문법이 많다. 이와 다르게 class는 함수..
자바스크립트 queryselector 사용법 : 꼭 document가 아니어도 가능 - 요소를 선택하는 함수 querySelector - 문서 객체 안에서 특정 요소 하나를 선택할 때 querySelector 함수를 쓴다. 아래와 같이 쓴다. document.querySelector('선택자'); 보통 위처럼만 쓰다 보니 그대로 굳어져 버렸다. 사실 실행하는 객체가 굳이 document일 필요는 없다. ele.querySelector('선택자'); 위처럼 어떤 요소에서 함수를 호출해도 된다. querySelector를 부르는 어떤 요소가 있고, 그 요소부터 시작해서 하위 요소를 찾는 개념이다. - 예시 - 테이블에서 어떤 셀을 클릭했을 때, 같은 행에 있는 다른 열의 값을 얻어오는 기능이다. const row = e.currentTarget.parentNode; const price =..
[JavaScript] html 객체 내부를 비우는 empty 함수 (jquery 를 vanilla js로) - 어떤 요소의 내부 비우기 - html에서 어떤 요소를 나중에 채워야 할 때가 있다. 예를 들어서 서버에서 어떤 데이터를 불러와서, 그때그때 화면에 뿌려줘야 할 때도 그렇다. 특히 tbody 나 div 태그 등에서 자주 쓴다. 내부를 비우거나 새로운 요소로 채우거나 한다. 댓글을 지우거나, 버튼을 추가하는 등 어떤 동작이 일어날 때마다 특정 요소 안을 비우고 다시 채워야 할 때가 있다. - jQuery 로 비우기 - 이럴 때 어떤 태그의 내부를 어떻게 비울 수 있을까? jQuery라면 간단하다. 아래 함수를 사용하면 내부 요소들을 지워준다. $('selector').empty(); - Vanilla js 로 비우기 - JavaScript 만으로 지울 수 없을까? 한 번에 지우는 함수는 따로 없는 것 같..
체크박스 값 확인 및 가져오기 (checkbox value checked) 체크 박스는 토글 기능이 있는 태그다. radio 가 여러 선택지 중에 하나를 고르는 기능이라면, checkbox 는 켜거나 끄거나, 둘 중 하나다. 이 checkbox 가 켜져 있는지 꺼져 있는지 확인하려면 JavaScript에서 어떻게 접근해야 할까? checkbox의 현재 체크 상태 값을 받아와야 한다. const chTF = row.querySelector('#chbox').checked; checkbox 요소는 'checked' 라는 속성을 갖는다. 이 속성 안에 체크 상태 여부가 들어 있다. 현재 체크박스가 체크된 상태라면 checked 속성값이 'true'이고, 체크가 해제된 상태라면 'false'이다. 해당 요소가 어떤 속성값들을 갖는지, 그리고 그 속성들의 현재 값은 무엇인지 알려면 크롬..
JavaScript 이벤트 여러 개 걸어 두기 (vanilla js 또는 jQuery 로 event 2개 이상 걸기) - 이벤트 덮어쓰기 - 버튼에 클릭 이벤트를 추가하려고 한다. 처음에 아래와 같은 형태로 이벤트를 추가했다. btn.onclick = funcA; 그런데 이벤트가 적용이 되지 않았다. 이유는 밑에서 다른 이벤트로 덮어쓰고 있었기 때문이다. btn.onclick = funcB; 위에서 onclick은 btn 안에 있는 특정 속성 값을 변경한다. 한 번에 하나씩밖에 들어가지 못한다. 먼저 다른 값이 있다면, 나중에 들어오는 값이 덮어쓴다. 물론 이런 기능이 필요할 때도 있다. 어떤 이벤트를 특정하게 하나만 갖도록 만들고 싶다면 onclick이나 onchange 같은 속성 값을 건드리면 된다. 한 번에 여러 이벤트들을 걸어 놓고 싶은 때도 있다. 둘 모두 작동하도록 만들려면 어떻게 해야 할까? - 한 요소에 ..
JavaScript에서 배열이면서 객체인 자료형? 배열 값 가져오기 여러 방법 - 이것은 배열인가 객체인가? - 자료형이 배열이면서 동시에 객체일 수 있을까요? 자바스크립트에서는 가능합니다. 저는 querySelector로 a태그를 하나 불러왔습니다. 그리고 그 태그 안에서 어떤 값을 얻고 싶었습니다. 내가 꺼내려는 그 값에 어떻게 접근할 수 있는지 알아야 했습니다. 그래서 일단 console.log로 a태그 요소를 출력한 뒤에 내부를 살펴보기로 했습니다. let btn = document.querySelector('#putCartProduct'); console.log(btn); 그런데 이상한 부분이 있었습니다. 제가 출력한 a태그는 attributes 라는 속성으로 어떤 값들을 들고 있었는데, 어떤 부분은 배열(리스트)처럼 인덱스로 숫자를 갖고 있었고, 어떤 부분은 객체(오브젝..
JavaScript로 select 태그에 option 요소들 나중에 추가하기 (appendChild) - 전체적인 흐름 - > select 태그 중에 id가 sales_type인 요소를 선택하기 > option 태그를 요소로 만들기 > option 태그 안에 넣고 싶은 텍스트 값 넣기 > 새로 만든 option 요소를 select 태그 안에 넣기 전체 function listSelectOptionSalesType(list) { list = ['opA', 'opB', 'opC']; //서버에서 받아오는 배열 let sel = document.querySelector('#sales_type'); //select 태그 중에 id가 sales_type인 요소를 선택하기 list.forEach(function(item, index) { //배열 요소들을 가지고 반복문 let newOption = document...
<select> 태그 안에서 선택된 <option> 값 가져오기 (options.selectedIndex) 전체 ups type1 type2 type3 type4 type5 type6 type7 type8 type9 위래처럼 select 태그가 있고 그 안에 option 태그들이 있다. 여기서 사용자가 어떤 option을 선택했는지 값을 받아오려면 어떻게 해야 할까? document.querySelector('#sales_type').options 위처럼 select태그.option 를 console로 출력했을 때 아래처럼 나온다. HTMLOptionsCollection(11) [option, option, option, option, option, option, option, option, option, option, option, selectedIndex: 6] 0: option 1: option 2: o..
반응형

티스토리툴바