JavaScript (60) 썸네일형 리스트형 splice() splice() 메서드는 배열로 많은 것이 가능하도록 하는 메서드입니다. splice()는 실제 배열에서만 사용할 수 있고 이터러블이나 배열과 유사한 객체에서는 사용이 불가능합니다. 때문에 유사 배열 객체에 사용하기 위해서는 Array.from()으로 배열로 변환 후 사용 가능합니다. splice()는 최소 2개의 인수를 취하지만 더 많은 인수를 취할 수 도 있습니다. splice()에서는 시작 인덱스를 지정하고 해당 인덱스는 0부터 시작하며 인덱스에서 삭제하려는 항목의 수만큼 삭제를 합니다. 이를 위해 splice()는 시작 인덱스와 삭제하려는 항목의 수를 인자로 받습니다. 자세한 사용 예시와 기능은 아래 예시 코드와 함께 하나씩 정리해보도록 하겠습니다. Array.prototype.splice() -.. 배열에 요소 추가 & 제거하기 배열에 요소를 추가하거나 제거하는 방법에는 여러 가지 방법이 있습니다. 하나씩 정리하도록 하겠습니다. push() const hobbies = ["Sports", "Cooking"]; hobbies.push("Reading"); console.log(hobbies); // ['Sports', 'Cooking', 'Reading'] 출력 push()를 사용하면 배열의 마지막에 새 요소를 추가합니다. unshift() const hobbies = ["Sports", "Cooking"]; hobbies.unshift("Reading"); console.log(hobbies); // ['Reading', 'Sports', 'Cooking'] 출력 새 요소를 배열의 마지막이 아니라 배열의 맨 앞쪽에 추가하고 싶다.. 배열(Array) 생성 배열을 생성하는 방법에는 여러 가지 방법이 있습니다. const arr1 = [1]; const arr2 = Array(1); const arr3 = new Array(1); const arr4 = ["Hi"]; const arr5 = Array("Hi"); const arr6 = new Array("Hi"); const arr7 = Array.of(1); const arr8 = Array.of("Hi"); const arr9 = Array.from("Hi"); 완전히 다른 메서드는 아니지만 각각의 메서드들이 배열을 생성하는 방법은 메서드에게 넘겨주는 데이터에 따라 다릅니다. 각각의 메서드가 어떻게 동작하고 상황 별로 어떤 메서드를 사용해야 되는지 정리해보겠습니다. 배열 생성 메서드 정리 const ar.. 요소 제거하기 요소를 제거하는 방법으로 innerHTML, remove()와 removeChild()가 있습니다. 아래 예시 코드로 정리해보겠습니다. Dive into the DOM! Item1 Item2 Item3 Toggle Visibility 요소 노드를 제거해야 하는 상황입니다. innerHTML const list = document.querySelector("ul"); list.innerHTML = ""; 제거하고 싶은 요소 노드의 부모 노드에 접근하여 innerHTML를 사용하여 요소 노드 안의 노드를 빈 문자열인 텍스트 노드로 변경합니다. remove() const list = document.querySelector("ul"); list.remove(); // DOM에서 요소 노드를 제거합니다. 제거하.. 요소 생성과 요소 삽입 요소 생성과 요소 삽입을 하는 방법에는 두 가지 방법이 있습니다. JavaScript에서 HTML 코드를 작성해 브라우저가 HTML 코드를 분석하고 문서의 특정 위치에 렌더링 하도록 하거나 문서 객체의 createElement() 메서드로 새로운 노드를 생성해 문서 어딘가에 수동으로 삽입하는 방법이 있습니다. JavaScript에서 HTML 코드를 작성해 브라우저가 HTML 코드를 분석하고 문서의 특정 위치에 렌더링 하는 방법에는 요소 노드의 innerHTML 프로퍼티로 HTML 문자열을 추가할 수 있는데 HTML 문자열을 추가하고 렌더링 하면 추가한 위치에 HTML 코드가 있게 됩니다. 대안으로는 insertAdjacentHTML()이 있으며 콘텐츠를 대체하는 대신 렌더링 된 HTML 콘텐츠를 기존의 .. classList classList를 사용하면 HTML의 클래스를 보다 쉽게 관리할 수 있습니다. Element.classList - Web API | MDN **Element.classList**는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다. developer.mozilla.org 아래의 예시 코드와 함께 사용법을 정리해보겠습니다. Dive into the DOM! Item1 Item2 Item3 Toggle Visibility const button = document.querySelector("button"); button.addEventListener("click", () => { // 버튼 클릭 이벤트 발생 시 if (section.className === ".. DOM 트래버싱(Traversing the DOM) DOM 트래버싱 하나의 요소, 즉 노드를 선택하면 해당되는 모든 자식 노드를 탐색하고 싶은 경우가 있을 것입니다. 예를 들어 목록 안에 있는 전체 목록 항목을 수정하는 등의 작업을 하고 싶은 경우가 있을 수 있습니다. 따라서 qurerySelector 등을 사용하여 선택하고 싶은 모든 요소를 수동으로 선택하는 것이 아니라 이미 선택한 요소를 이용해서 선택한 요소를 기반으로 자식 혹은 형제 요소 등으로 옮겨 갈 수 있는데 이것을 DOM 트래버싱이라고 합니다. 우선 자식, 후손, 부모, 조상 용어에 대해 정리하고 넘어가겠습니다. A Example! 자식(Child) 자식 요소는 다른 요소의 직접적인 자식 관계입니다. 자식 요소를 위의 코드로 설명하자면 태그는 의 자식이며 직접적인 자식 요소이고 의 바로 한 .. 속성(Attribute)과 프로퍼티(Propertie) 속성과 프로퍼티는 혼동하기 쉽고 전혀 다른 것이라고 인식하지 못하기도 합니다. 이는 속성은 프로퍼티에 매핑되어 있고 실시간 동기화가 설정되어 있기 때문입니다. (항상 그런 것은 아닙니다.) 예를 들어 id, CSS class, value가 있는 input 요소가 있습니다. 참고하실 점은 이 세 가지는 DOM 객체가 생성될 때 다르게 반응하며 해당 객체의 프로퍼티가 초기화하는 방법도 다릅니다. 이 세 가지는 HTML 코드에서 작성하기 때문에 속성이라고 부르며 HTML 코드에 배치된 속성이 됩니다. 즉, HTML 태그에 추가하는 것은 해당 태그의 속성이 되는 것입니다. 브라우저가 이 속성으로 수행하는 작업은 태그 이름을 기반으로 DOM 객체를 생성하는데 위의 경우 태그 이름은 input이고, 이것을 미리 구.. 이전 1 ··· 3 4 5 6 7 8 다음
