분류 전체보기 (399) 썸네일형 리스트형 [DOM] createDocumentFragment "빈 노드 객체를 생성한다." createDocumentFragment DeocumentFragment 노드는 , , text 등과 같이 DOM 노드에 속한다. 하지만 기존 DOM 노드와는 다르게 분류되어 정의되어 있으며 부모노드가 존재하지 않고, 브라우저 렌더링 시에도 DOM 트리에 포함되지 않는다. 즉, 다음과 같이 생성해서 부모 노드의 자식 노드로 추가한다고 해도 막상 브라우저에 렌더링된 요소들을 살펴보면 존재하지 않는다. createDocumentFragment 의 필요성? 보통 우리가 crateElement 로 만든 새로운 요소들을 부모 노드에 추가하려고 하면, 리플로우와 리페인트 라는 과정을 거친다. 이 과정을 단순하게 말하면, 브라우저를 다시 렌더링 하는 것인데, 추가되는 요소가 많을 수록 다시 렌더링 되는 횟수 또한 n.. [DOM] createElement, createTextNode, appendChild createElement "요소 노드를 생성한다. " 새로운 요소노드를 생성한다. 여기서 요소노드는 흔히 말하는 HTML 태그를 의미한다. 이 때 생성된 요소 노드는 DOM의 어떠한 노드에도 속하지 않는다(즉, 연결점이 없다). //document 에 li 라는 이름의 태그(요소노드)를 생성 const $li = document.createElement('li'); createTextNode " 텍스트 노드를 생성한다. " 텍스트 노드는 DOM 트리에서 자식 노드가 존재하지 않는 리프 노드(잎파리) 이다. 단, 텍스트노드로 생성할 시에는 DOM의 어떠한 노드에도 속하지 않는 상태로 생성된다. // document 에 '안녕하세요' 라는 텍스트 노드를 생성 const $text = document.crea.. [DOM] insertAdjacentHTML 메서드 innerHTML 과 insertAdjacentHTML 우리가 흔히 문자열을 태그 내에 넣을 때 사용하는 innerHTML 프로퍼티와 마찬가지로 HTML 태그에 문자열을 삽입할 수 있는 메서드이다. 다만 차이점과 강점이있다면 insertAdjacentHTML 은 태그 내 요소를 삭제하지 않는다는 것이며, 문자열을 삽입할 위치를 지정할 수 있고, 기존 태그 내의 모든 요소를 삭제하고 다시 재렌더링하는 innerHTML 보다 성능상 이점이 높다는 점이 강점이다. 따라서 단순한 문자열을 삽입하고 끝내는 용도가 아니고, 반복적으로 문자열을 삽입하는 경우에는 insertAdjacentHTML 을 활용하는 것이 좋다. insertAdjacentHTML 형식 insertAdjacentHTML 메서드는 인자를 두 개 .. [javascript] this(2) - this 바인딩의 강제 설정 보호되어 있는 글입니다. [javascript] 배열과 객체의 구조분해할당 구조분해할당 구조분해 할당은 배열이나 객체의 각 구성 요소 및 프로퍼티를 주어진 변수에 나눠서 할당하는 방법이다. 즉, 주어진 자료구조를 분해해서 새로운 변수에 할당하는 방식이다. 여기서 오해하면 안 되는 것은 구조분해할당은 기존의 변수나 객체의 값을 복사하여 새로운 변수에 할당하는 것이지 기존 변수나 객체를 삭제하는 것이 아니다. 그래서 구조분해할당을 한 이후에도 기존 데이터는 그대로 사용이 가능하다. 구조분해할당은 배열과 객체 모두에서 가능하지만, 조금 차이가 있다. 우선 배열의 경우에는 요소가 새로운 변수에 할당되는 순서가 정해져 있는 반면에, 새롭게 할당하려고 하는 변수의 이름은 마음대로 지어도 되지만, 객체의 경우에는 할당하고자 하는 변수의 이름이 객체 내의 프로퍼티 키의 이름과 동일해야 한다... [javascript] getAttribute 와 setAttribute 그리고 classList.add... element . getAttribute (요소가 가진 속성명) 이 메서드는 접근한 요소가 가진 속성이 저장하고 있는 값을 가져온다. 글로 쓰면 이해가 어렵기 때문에 코드로 정리해보면 다음과 같다. //js const ball = document.querySelector('.ball') ball.getAttribute('class') //-> div 태그가 가진 속성인 class가 가진 값인 'ball'을 가져온다. ㄴ요소(element) //출력결과) ball 다시 정리해서 말하면, getAttribute는 지정한 요소가 가진 속성이 가진 값을 가져오는 메서드 이다. element . setAttribute (요소가 가진 속성명, 그 속성에 추가할 값) 이 메서드는 요소가 가진 속성에 기존 값을 버리고.. [react]리액트 페이지네이션 만들 때 참고용 보호되어 있는 글입니다. [javascript] this 는 호출하는 방식에 따라 가리키는 대상이 달라진다. this... this.. this.. 자바스크립트에서 this는 함수를 호출하는 방식에 따라서 가리키는 대상 혹은 값이 달라진다. 대표적으로 일반함수(function), 생성자 함수, 메서드 3 가지 방식에 따라 나뉜다. 오늘은 이 3가지 방식을 구분해서 정리해보고, 다음 시간에는 this 가 가리키는 대상을 강제적으로 어떻게 바꿀 수 있는가에 대해서도 정리할 것이다. 일반 함수에서의 this 여기서 말하는 일반함수는 흔히 자주 쓰이는 function(){ } 을 말한다. 일반함수에서 this 는 언제나 전역 객체를 가리키는데, 전역 객체는 자바스크립트에서 최상위 객체를 의미한다. (참고) 전역 객체 자바스크립트의 대부분은 객체로 구성되어 있다. 그 객체를 모두 포괄하는 최상위 객체를 전역 객체라고 한.. 이전 1 ··· 40 41 42 43 44 45 46 ··· 50 다음
