본문 바로가기

분류 전체보기153

[Javascript] 스타일과 클래스 className과 classList ✔️ className : 클래스 속성의 값을 가져오거나 설정할 수 있다. ✔️ elem.classList.add/remove("class") : class 추가/제거 ✔️ elem.classList.toggle("class") : class가 존재할 경우 class를 제거하고, 없으면 추가 ✔️ elem.classList.contains("class") : class 존재 여부에 따라 true/false를 반환 📌 classList는 이터러블 객체이기 때문에 반복문으로 나열할 수 있다. 요소의 스타일 ✔️ elem.style 뒤에 오는 프로퍼티는 카멜 표기법으로 표기한다. background-color => elem.style.backgroundColor z-ind.. 2022. 1. 13.
[Javascript] 요소 생성,삽입,삭제 메서드 요소 생성하기/삭제하기 노드 생성 메서드 ✔️ document.createElement('tag') : 태그 이름을 사용해 새로운 요소를 만듬. 노드 복제 메서드 ✔️ elem.cloneNode(deep) : 요소를 복제함. 노드 삽입 메서드 ✔️ node.append() : 노드나 문자열을 해당 자식중 맨 끝에 삽입 ✔️ node.prepend() : 노드나 문자열을 해당 자식 중 맾에 삽입 ✔️ node.before() : 노드나 문자열을 node 이전에 삽입 ✔️ node.after() : 노드나 문자열을 node 다음에 삽입 📌 insertAdjacentHTML/Text/Element 로 더 가편하게 노드를 삽입할 수 있는데 브라우저, 모바일 지원이 약함. 삭제 메서드 ✔️ node.remove(.. 2022. 1. 13.
[Javascript] 속성과 프로퍼티 DOM 프로퍼티 ✔️ DOM 프로퍼티는 많지만 내장 프로퍼티만으로 충분하지 않은 경우 자신만의 프로퍼티를 만들어 사용할 수도 있다. document.body.myData = { name: 'Caesar', title: 'Imperator' } console.log(document.body.myData.title); //Imperator HTML 속성 ✔️ 표준이 아닌 속성을 HTML에 넣을 수 있다. ✔️ 속성은 대,소문자를 구분하지 않는다. ✔️ 속성 값은 모두 문자열로 취급된다. ✔️ attributes 로 속성들을 모두 반환하고, nanem, value 프로퍼티로 속성 전체에 접근할 수 있다. 비표준 속성, dataset ✔️ 사용자가 직접 지정한 데이터를 HTML 에 자바스크립트로 넘기고 싶은 경.. 2022. 1. 11.
[Javascript] 주요 노드 프로퍼티 'nodeType' 프로퍼티 ✔️ nodeType 프로퍼티는 DOM 노드의 '타입’을 알아내고자 할 때 쓰이는 구식 프로퍼티. nodeName과 tagName으로 태그 이름 확인하기 ✔️ DOM 노드의 태그 이름 확인 가능. innerHTML로 내용 조작하기 ✔️ 요소 안의 HTML을 문자열 형태로 받아올 수 있다. ✔️ 수정도 가능. 안녕하세요 //추가된 html 안녕하세요 잘지내죠? 보고싶네요 outerHTML로 요소의 전체 HTML 보기 ✔️ 요소 전체 HTML이 담긴다. ✔️ 문서상에서는 수정되나 div 요소 자체가 수정되지 않는것을 조심해야 한다. Hello, world! textContent로 순수한 텍스트만 ✔️ 는 제외하고 오로지 텍스트만 추출! ✔️ 텍스트를 안전한 방법으로 쓸 수 있기 .. 2022. 1. 11.
[Javascript] getElement, querySelector로 요소 검색하기 document.getElementById 혹은 id를 사용해서 요소 검색하기 Element let elem = document.getElementById("elem"); console.log(elem); elem.style.background = 'red'; querySelectorAll ✔️ 주어진 css 선택자에 대응하는 요소 모두를 반환. ✔️ css 선택자를 활용할 수 있음 : hover, :active, :last-child let elements = document.querySelectorAll('ul > li:last-child'); for(let elem of elements){ console.log(elem.innerHTML); } querySelector ✔️ 주어진 CSS 선택자에 .. 2022. 1. 11.
[Javascript] 배열 메소드 연습문제 border-left-width 를 borderLeftWidth 로 변경하기 camelize("background-color") == 'backgroundColor'; camelize("list-style-image") == 'listStyleImage'; camelize("-websit-transition") == 'WebkitTransition'; Hint : split을 사용해 문자열을 배열로 바꾼 다음 join을 사용해 다시 합친다. function camelize(str){ let result = str //1. '-' 기준으로 나누어 배열로 반환한다. .split('-') //[background, color] //2. 배열의 첫번째는 그대로 반환하고 두번째부터는 첫글자만 대문자가 되어야 한다.. 2022. 1. 10.
반응형

티스토리툴바