밀 종합 ٩(`╹ω╹´)و

node.contains( otherNode ) - 주어진 인자가 node의 자손인지, 아닌지에 대한 Boolean 값을 리턴한다. - 자신의 node를 선택해도 true를 반환한다. *node와 문자열은 다르다! See the Pen [JS] Node.contains() by mill (@millfeel) on CodePen. // 자신을 선택하는 것을 방지하는 방법 function isInPage(node) { return (node === document.body) ? false : document.body.contains(node); } [공부 좌표] Node.contains() [이름이 비슷한 매서드] DOMTokenList.contains()

tokenList.contains(token); [tokenList] DOMTokenList 인터페이스는 공백으로 구분 된 토큰 세트를 나타낸다. 이러한 집합은 아래의 List를 반환하고, 선택해서 사용하면 된다. (ex. classList.contains) Element.classList HTMLLinkElement.relList HTMLAnchorElement.relList HTMLAreaElement.relList [token] 목록에 있는지 확인할 DOMString [반환] 호출 목록에 토큰이 포함되어 있으면 true, 그렇지 않으면 false [공부 좌표] DOMTokenList.contains() DOMTokenList [이름이 비슷한 메서드] Node.contains()

clip-path 요소의 클리핑 범위를 지정한다. 클리핑 범위 안의 부분은 보여지고, 바깥은 숨겨진다. clip-path 문법 자료형에 따라 문법이 달라지기 때문에 자세한 것은 MDN을 참고하세요. inset() 함수 clip-path: inset(top right bottom left); - 사각형 - 값은 띄어쓰기로 구분한다. - 값(매개변수)의 갯수 1개인 경우: 상, 하, 좌, 우를 한꺼번에 컨트롤 한다. 2개인 경우: 상,하 / 좌,우로 나눠서 컨트롤 한다. 4개인 경우: 상/하/좌/우를 각각 컨트롤 한다. polygon() 함수 clip-path: polygon(x좌표 y좌표, x좌표 y좌표, x좌표 y좌표); - 다각형 - 띄어쓰기로 구분하고, 꼭지점은 ,(쉼표)로 구분한다. [inset()..

let newClone = node.cloneNode([deep]) [node] 복제할 노드 [newClone] 노드에서 복제 된 새 노드. 문서의 일부인 다른 노드에 추가 될 때까지 문서의 일부가 아니다. [deep - 옵션] false인 경우: ‘얕은’ 복제본이 만들어진다. (후손 노드 복사 없이 elem만 복제) - 기본값 true인 경우: ‘깊은’ 복제본이 만들어진다. (속성 전부와 자손 요소 전부가 복제) See the Pen [JS] cloneNode by mill (@millfeel) on CodePen. [공부 좌표] cloneNode로 노드 복제하기 Node.cloneNode()

비표준 속성의 충돌을 방지하기 위한 data-* 속성 ’data-'로 시작하는 속성 전체는 개발자가 용도에 맞게 사용하도록 별도로 예약이 되고, dataset 프로퍼티를 사용하면 data 속성에 접근할 수 있다. [예제] 요소에 이름이 "data-about"인 속성이 있다면 elem.dataset.about을 사용해 값을 얻을 수 있다. data-order-state 같이 여러 단어로 구성된 속성은 카멜 표기법(dataset.orderState)으로 변환해서 사용할 수 있다. Q. 속성과 프로퍼티의 차이는? 속성 – HTML 안에 쓰임 프로퍼티 – DOM 객체 안에 쓰임 Q. 비표준 속성이란 무엇인가요? 비표준 속성은 사용자가 직접 지정한 데이터를 HTML에서 자바스크립트로 넘기고 싶은 경우나 자바스크립..

문법 Object.create(proto[, propertiesObject]) [proto] 새로 만든 객체의 prototype이어야 할 객체. [propertiesObject - 옵션] 값을 생략했을 경우 => 빈 객체를 생성한다. 값을 설정하되, 플래그 값을 생략했을 경우 => 생략한 플래그의 값은 false가 된다. 이러한 속성은 Object.defineProperties()의 두 번째 인수에 해당한다. (Object.defineProperties(): 한번에 여러 개의 프로퍼티를 정의/수정하는 기능) [예제] let user = { name : 'mill' } // 2번째 인수 값을 주지 않을 경우, 빈 객체가 생성된다. let empty = Object.create(user); empty; //..

# 02:40 super() => 부모 constructor를 호출하는데, 자식 constructor 내부에서만 사용 할 수 있다. # 03:56 super.method() => 부모 클래스에 정의된 method를 호출한다. 화살표 함수에는 super가 없다. class Rabbit extends Animal { stop() { setTimeout(() => super.stop(), 1000); // 1초 후에 부모 stop을 호출합니다. } } 화살표 함수의 super는 stop()의 super와 같아서 위 예시는 의도한 대로 동작한다. [의도한 대로 동작하는 이유] setTimeout메서드는 브라우저 환경에서 인수로 전달받은 함수를 호출할 때, this에 window를 할당한다. 이 문제를 해결하기 ..

var closestElement = targetElement.closest(selectors); 선택자와 일치하는 노드를 찾을 때까지 요소와 해당 부모 (문서 루트를 향하는 방향)를 탐색한다. 이 중 가장 가까운 조건에 만족한 부모 요소가 반환되며, 조건에 만족한 요소가 없으면 null 값을 반환한다. [예제] const child = document.querySelector('.child'); let parentSave = child.closest('.container'); let none = child.closest('.none'); 부모 요소가 있으면 요소를 반환하고, 없으면 null을 반환한다. [공부 좌표] Element.closest() 이벤트 위임

함수 표현식보다 단순하고, 간결한 문법으로 함수를 만들 수 있는 화살표 함수 본문이 한 줄인 함수를 작성할 때 유용하다. 문법 let func = (param1, param2, ...paramN) => expression 왼쪽에 있는 매개변수를 이용해 => 오른쪽에 있는 표현식을 평가하고 반환한다. 아래 함수의 축약버전이라고 할 수 있다. let func = function(param1, param2, ...paramN) { return expresstion; } 예 01) let sum = (a, b) => a + b; sum(3, 7) //10 예 02) 매개변수가 하나만 있을 경우 let double = n => n * 2; alert(double(3)); 예 03) 매개변수가 하나도 없을 경우: ..