본문 바로가기

전체 글

 (124)
JS8 태그의 dataset 속성 태그에 data-key(이름상관없음) = "value" 를 추가하면 --> 해당객체의 datatset이라는 속성에 key는 키이름 value는 키값으로 추가된다 그래서 console.log(객체.dataset.key) 를 입력할경우 --> value를 출력한다. ( 여기서 브라우저의 console창에 출력되는 value는 단순 정보를 담은 문자에 불과하다 ) 이어서 value에 JSON형태의 값을 형식에맞춰(키와 값이 ""에 포함되게끔) 작성후 console.log(객체.dataset.key)을 입력할경우 --> {"키" : "값 , "키":"값"}의 문자를 출력한다 이제 해당 태그만 가져올수 있게된다면 JSON.parse(객체.dataset.key); 를이용해 해당 값을 JS..
JS7 스크립트 언어인 JS에서 코드작성시 길이가길어 행을바꾸고싶을때 "\" 백슬래쉬를 쓰면 이어줄수있다 객체.toggle("name") - 태그 class에 "name"이 있다면 삭제 없다면 추가 합니다. 상위태그에 이벤트핸들러를 부여하면 본인을포함한 하위모든태그에 동일한 이벤트가 부여된다 (단 list는 부모가 아니다 [ ex)qeurySelectorAll("id명")으로 가져온 객체는 배열이지 부모가아님! ] 이벤트위임 - 이벤트핸들러를 사용할때 함수안에는 항상 event객체가 전달된다 주의할점 - 의도하지않은 태그에도 이벤트핸들러가 작동한다 예방법 - event.target.tagName 값을 확인해서 해당반환값이 아닌경우 이벤트작동을 하지않게끔 설정을하면 원하는 자식 태그에만 이벤트를 설정하는 효과를 ..
JS6 객체.parentElement - 부모 태그를 반환 객체.parentNode - 부모의 태그,text반환 ========== Element가 없으면 text까지반환 없다면 태그만 반환 한다 ======== 객체.nextElementSibling - 다음 형제 태그 반환 객체.previousElementSibling) - 이전 형제 태그 반환 객체.firstElementChild - 첫번째 자식 태그 반환 객체.lastElementChild - 마지막 자식 태그 반환 이벤트 헨들러에 this 매개변수를 전달해주는것을 응용하면 현재태그의 부모,자식,형제 태그를 자유롭게 지정할수있다 (함수안에서 동적으로 생성된 이벤트 핸들러에도 이벤트 핸들러를 추가할수 잇다) 부모객체.insertBefore(자식객체 1번, ..

티스토리툴바