효니 TIL

parentNode와 parentElement 차이점 parentNode정의 모든 노드 타입의 부모를 반환합니다.반환 값부모 노드가 Document, DocumentFragment, Element 등의 타입일 수 있습니다.만약 부모가 없으면 null을 반환합니다.적용 대상모든 노드 (예: 요소 노드, 텍스트 노드, 주석 노드 등).parentElement정의부모가 Element일 경우에만 부모 요소를 반환합니다.반환 값부모 노드가 Element 타입일 때만 반환하고, 그렇지 않으면 null을 반환합니다.적용 대상주로 요소 노드에 사용됩니다. Click me button.parentNode와 button.parentElement 모두 요..

특정 요소 찾기 getElementById(): 주어진 ID를 가진 요소를 반환합니다.let element = document.getElementById('elementId');   getElementsByClassName(): 주어진 클래스 이름을 가진 모든 요소를 HTMLCollection으로 반환합니다.let elements = document.getElementsByClassName('className');   getElementsByTagName(): 주어진 태그 이름을 가진 모든 요소를 HTMLCollection으로 반환합니다.let elements = document.getElementsByTagName('tagName');   querySelector(): 주어진 CSS 셀렉터와 일치하는 ..

DOM(Document Object Model)은 웹 페이지의 구조를 프로그래밍적으로 접근하고조작할 수 있게 해주는 인터페이스입니다.  부모 노드 찾기 parentNode: 해당 요소의 부모 노드를 반환합니다.let parent = element.parentNode;   closest(): 지정한 셀렉터와 일치하는 가장 가까운 조상 요소를 반환합니다.let closestParent = element.closest('selector');  자식 노드 찾기 childNodes: 해당 요소의 모든 자식 노드를 NodeList로 반환합니다.let children = element.childNodes;   children: 해당 요소의 자식 요소만을 HTMLCollection으로 반환합니다.let childEle..

객체 프로퍼티(속성)에 접근하기 1. 점 표기법 (Dot notation) 객체 내에 캡슐화되어 있는 것에 접근하려면 먼저 점을 입력해야 합니다. 그다음 접근하고자 하는 항목을 적습니다.person.name; // "John"person.age; // 30person.sayHello(); // Hi! I'm John  2. 대괄호 표기법 (Bracket notation)대괄호 표기법은 프로퍼티 이름을 문자열로 사용하여 접근하는 방법입니다.점 표기법으로는 사용할 수 없는 프로퍼티 이름이거나 동적으로 프로퍼티를 선택해야 할 때 유용합니다.console.log(person["name"]); // "John"console.log(person["age"]); // 30  점 표기법과 대괄호 표기법의 차이점점 표기..

객체(Object)자바스크립트에서 객체는 데이터를 구조화하고 저장하는 데 사용되는 중요한 요소입니다. 객체는 키(key)와 값(value)으로 이루어진 속성들의 모음입니다.쉽게 말해 사람 객체를 만든다면 이름, 나이, 직업 등의 속성을 가질 수 있습니다. 키는 문자열이고, 값은 다양한 데이터 타입을 가질 수 있습니다.객체는 다른 객체를 포함할 수도 있고, 함수를 값으로 가질 수도 있습니다.객체의 키는 유일해야 하지만, 값은 중복될 수 있습니다.let objectName = { key: value, key: value,};  객체 생성하기1. 객체 리터럴 사용하기가장 간단한 객체 생성 방법은 객체 리터럴을 사용하는 것입니다.중괄호 {} 안에 키와 값을 넣어서 객체를 생성합니다.let person = {..

filter()자바스크립트의 filter 메서드는 주어진 함수의 조건을 만족하는 요소들만을 모아 새로운 배열로 반환합니다.원래 배열을 변경하지 않으며, 특정 조건에 맞는 요소들만 걸러내 새로운 배열을 반환합니다. filter 메서드는 콜백 함수를 인자로 받습니다.이 콜백 함수는 배열의 각 요소에 대해 호출되며,요소가 조건을 만족하면 true를,만족하지 않으면 false를 반환합니다.const newArray = oldArray.filter((element, index, array) => { // 조건을 만족하면 true 반환}); element: 현재 처리 중인 배열의 요소index(선택): 현재 처리 중인 배열 요소의 인덱스array(선택): filter 메서드를 호출한 배열 자체 예제 1: 짝수만 ..

map() map 메서드는 자바스크립트에서 배열의 각 요소를 주어진 함수로 처리한 결과를 모아 새로운 배열을 반환하는 데 사용됩니다.이 메서드는 원래 배열을 변경하지 않고, 항상 새로운 배열을 반환합니다. map 메서드는 콜백 함수를 인자로 받습니다.이 콜백 함수는 배열의 각 요소와 그 인덱스, 그리고 배열 자체를 매개변수로 받습니다.const newArray = oldArray.map((element, index, array) => { // 새로운 요소를 반환});element: 현재 처리 중인 배열의 요소index(선택): 현재 처리 중인 배열 요소의 인덱스array(선택): map 메서드를 호출한 배열 예제 1: 배열의 각 요소에 2를 곱한 새로운 배열 생성const numbers = [1, 2,..

배열에 특정 요소가 존재하는지 확인하는 방법을 알아보겠습니다. const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];  indexOf 메서드 사용하기indexOf 메서드는 배열에서 특정 요소를 찾아 그 인덱스를 반환합니다.요소가 존재하지 않으면 -1을 반환합니다.const index = fruits.indexOf('Apple');console.log(index); // 2   includes 메서드 사용하기includes 메서드는 배열에 특정 요소가 존재하는지 여부를 불리언 값으로 반환합니다.const isExist = fruits.includes('Apple');console.log(isExist); // true   findIndex 메서드 사용하기findI..

배열에 원소 추가하기push() 메서드는 배열의 끝에 하나 이상의 원소를 추가합니다.배열의 끝에 추가할 원소를 반드시 하나 이상 포함해야 합니다.const fruits = ["apple", "banana"];fruits.push("orange");console.log(fruits); // ["apple", "banana", "orange"]메서드 호출이 완료되면 배열의 새 길이가 리턴됩니다. 만약 새 배열의 길이를 변수에 저장하고 싶은 경우 다음과 같이 할 수 있습니다.const fruits = ["apple", "banana"];const myArray = fruits.push("cherry");console.log(myArray); // 3  unshift() 메서드는 배열의 시작에 하나 이상의 원소..

배열을 문자열로 변환하기 1.  join() 메서드를 사용하면 배열을 다시 문자열로 만들 수 있습니다.자바스크립트의 join() 메서드는 배열의 모든 요소를 문자열로 결합하여 하나의 문자열로 반환합니다.각 요소는 지정된 구분자로 연결됩니다.join() 메서드는 원래 배열은 변경되지 않고 새 문자열을 반환합니다.array.join(separator);separator(선택): 배열 요소를 결합할 때 사용할 구분자입니다.이 값을 지정하지 않으면 기본 구분자인 쉼표(", ")가 사용됩니다.(기본 구분자는 쉼표(", ")이지만, 원하는 구분자를 지정할 수 있습니다.구분자를 지정하지 않은 경우const arr = ["apple", "banana", "orange"];const str = arr.join();con..