개발 일기

브라우저 창의 너비와 높이 ✔️ document.documentElement.clientWidth ✔️ document.documentElement.clientheight 스크롤 정보 얻기 ✔️ window.pageXoffset : 세로 스크롤에 의해 가려진 위쪽 영역 높이 ✔️ window.pageYoffset : 가로 스크롤에 의해 가려진 왼쪽 영역 높이 scrollTo, scrollBy 로 스크롤 상태 변경하기 ✔️ window.scrollBy(x,y) : 현재 위치를 기준으로 상대적으로 값을 조정한다. ✔️ window.scrollTo(x,y) : 절대 좌표를 기준으로 페이지 스크롤 상태를 변경한다. scrollIntoView ✔️ 해당 요소가 창 제일 위로, 창 가장 아래로 보이도록 스크롤 상태..

기하 프로퍼티 offsetParent / offsetLeft / offsetTop ✔️ offset은 요소가 화면에서 차지하는 영역 전체 크기를 나타냄. ✔️ 요소의 너비 + padding + 스크롤바 + 테두리를 합친 크기 ✔️ margin 포함 ❌ offsetParent 좌표 계산에 사용되는 가장 가까운 조상 요소의 참조를 반환 offsetLeft/offsetTop offsetParent를 기준으로 각각 요소가 오른쪽, 아래쪽으로 얼마나 떨어져 있는지를 나타낸다. offsetWidth / offsetHeight ✔️ 테두리를 포함한 요소 전체의 사이즈 정보를 제공 clientTop / clinetLeft ✔️ 요소의 테두리(border)의 값을 반환한다. clientWidth / clienthHeig..

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..

요소 생성하기/삭제하기 노드 생성 메서드 ✔️ document.createElement('tag') : 태그 이름을 사용해 새로운 요소를 만듬. 노드 복제 메서드 ✔️ elem.cloneNode(deep) : 요소를 복제함. 노드 삽입 메서드 ✔️ node.append() : 노드나 문자열을 해당 자식중 맨 끝에 삽입 ✔️ node.prepend() : 노드나 문자열을 해당 자식 중 맾에 삽입 ✔️ node.before() : 노드나 문자열을 node 이전에 삽입 ✔️ node.after() : 노드나 문자열을 node 다음에 삽입 📌 insertAdjacentHTML/Text/Element 로 더 가편하게 노드를 삽입할 수 있는데 브라우저, 모바일 지원이 약함. 삭제 메서드 ✔️ node.remove(..

DOM 프로퍼티 ✔️ DOM 프로퍼티는 많지만 내장 프로퍼티만으로 충분하지 않은 경우 자신만의 프로퍼티를 만들어 사용할 수도 있다. document.body.myData = { name: 'Caesar', title: 'Imperator' } console.log(document.body.myData.title); //Imperator HTML 속성 ✔️ 표준이 아닌 속성을 HTML에 넣을 수 있다. ✔️ 속성은 대,소문자를 구분하지 않는다. ✔️ 속성 값은 모두 문자열로 취급된다. ✔️ attributes 로 속성들을 모두 반환하고, nanem, value 프로퍼티로 속성 전체에 접근할 수 있다. 비표준 속성, dataset ✔️ 사용자가 직접 지정한 데이터를 HTML 에 자바스크립트로 넘기고 싶은 경..

'nodeType' 프로퍼티 ✔️ nodeType 프로퍼티는 DOM 노드의 '타입’을 알아내고자 할 때 쓰이는 구식 프로퍼티. nodeName과 tagName으로 태그 이름 확인하기 ✔️ DOM 노드의 태그 이름 확인 가능. innerHTML로 내용 조작하기 ✔️ 요소 안의 HTML을 문자열 형태로 받아올 수 있다. ✔️ 수정도 가능. 안녕하세요 //추가된 html 안녕하세요 잘지내죠? 보고싶네요 outerHTML로 요소의 전체 HTML 보기 ✔️ 요소 전체 HTML이 담긴다. ✔️ 문서상에서는 수정되나 div 요소 자체가 수정되지 않는것을 조심해야 한다. Hello, world! textContent로 순수한 텍스트만 ✔️ 는 제외하고 오로지 텍스트만 추출! ✔️ 텍스트를 안전한 방법으로 쓸 수 있기 ..

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 선택자에 ..

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. 배열의 첫번째는 그대로 반환하고 두번째부터는 첫글자만 대문자가 되어야 한다..

트리 상단의 documentElement와 body ✔️ = document.documentElement ✔️ = document.body ✔️ = document.head childNodes, firstChild, lastChild로 자식 노드 탐색하기 ✔️ childNodes : 모든 자식 노드를 담고 있다. 요소의 자식 노드들을 탐색할 수 있다. for(let i=0; i

문서 객체 모델(DOM) ✔️ Document Object Model ✔️ 웹 페이지 내의 모든 콘텐츠를 객체로 나타내준다. ✔️ document 객체로 페이지 내의 요소들에 진입할 수 있으며 변경하고 원하는 것도 만들 수 있다. 브라우저 객체 모델(BOM) ✔️ Browser Object Model ✔️ 문서 이외의 모든 것을 제어하기 위해 브라우저가 제공하는 추가 객체 navigator 객체 - 브라우저와 운영체제에 대한 정보를 제공 - navigator.userAgent : 현재 사용 중인 브라우저 정보를 알려줌. - navigator.platform : 브라우저가 실행 중인 운영체제를 알려줌. location 객체 - 현재 URL 을 읽을 수 있게 해주고 새로운 URL로 변경할수 있게 해준다. /..