taenyLog

html파일의 A B C 으로 짜여진 코드에 각 A B C에 다른 색깔을 부여하고싶다. const colors = ['red', 'orange', 'blue'] colors 배열에 있는 색깔을 순서대로 부여하고싶다. const spans = document.querySelectorAll('h1 span'); let i = 0; for(const span of spans){ span.style.color=colors[i] i++ } 모든 span에 접근하는 spans 변수를 만들고 colors 배열에 접근하여 각 요소를 하나씩 span에 부여

document.querySelector(' ') document.querySelector(' # ') --> id검색으로 더 세세한 작업 가능 const firstLink = document.querySelector('a') firstLink.href ---> 직접 엑세스하는 경우에는 자바스크립트를 거친다. 따라서 아래의 결과값과 달리 앞에 file이 불는다. > "file:///wiki/List_of_chicken_breeds" firstLink.getAttribute('href' ) ---> getAttribute를 사용하면 HTML에서 직접 가져오게된다. > "/wiki/List_of_chicken_breeds" setAttribute( name, value) const button = docum..

Properties & Methods textContent 모든 요소 반환한다. 마크업에서 온 것. 현재 나타난 내용이나 사용자에게 보이는 내용은 신경쓰지 않는다. innerText는 사용자가 보이는 내용이 나온다. 객체의 모든 특성과 같은 값도 검색할 수 있다. 현재 보이는 내용에 따라 달라진다. 내부 텍스트 반환하므로 태그는 모두 무시되고 현재 표시된 내용에 따라 달라지고 숨겨진 항목은 무시. innerHTML 특정 요소에 포함된 마크업의 전체 내용을 출력. 여는태그, 닫는태그 등 셋다 콘텐츠를 설정하거나 업데이트 하는데 쓸 수 있다. innerHTML만 다른 요소안에 추가할 때 쓸 수 있다.

querySelector() : all-in-one method to select a single element id, 클래스이름, 요소타입,속성 CSS 모두 사용 가능 일치하는 첫번째 요소만 반환한다. # : 아이디 ex) #banner . : 클래스 ex) .square 타입과 속성으로 선택한 예 > document.querySelector('a[title='Java']') document.querySelectorAll('p a') 안에있는 모든 요소 반환한다.

요소 선택을 도와주는 메서드 getElementById() : id로 요소를 선택하는 방법 이 메서드에 문자열을 전달하면 일치하는 id를 페이지에서 찾아서 객체로 가져옴! HTML이 아닌 문서 객체 모델의 객체를 찾는다. 한번에 한개 이상을 선택하는 메서드 getElementsByTagName() : id로 선택한 모든 요소 선택 getElementsByClassName() : class로 요소 선택

웹페이지나 XML 문서의 구조를 표현하고 이를 프로그래밍적으로 조작할 수 있는 인터페이스를 제공하는 표준화된 방법. DOM은 웹 개발에서 매우 중요한 개념 웹페이지의 내용, 구조, 스타일 등을 동적으로 조작하고 변경하는데 사용된다. 특징 1. 계층구조 : 요소들을 계층구조로 표현 2. 웹 페이지의 요소와 그 요소의 속성을 표현 3.객체 지향적 접근 : DOM은 객체 지향적으로 설계되어 있다.각 요소와 속성은 JavaScript 객체로 표현된다. 이를 통해 JavaScript를 사용해 문서의 내용을 동적으로 조작할 수 있다. 4. DOM을 사용하면 웹 페이지에서 발생하는 이벤트를 감지하고 처리할 수 있다. 예) 웹페이지에서 특정 요소의 내용을 변경하거나 사용자의 입력을 처리 문서 객체 모델을 이용해 HTM..

매개변수를 많이 사야하는 경우라면 객체분해를 이용하는 것이 낫다. 함수 정의시 괄호 안에 매개변수를 작성하면 전달되는 값의 구조를 분해할 수 있다. 객체에 주로 사용되는 방법이다.

순서를 따르지 않는다. 배열 구조 분해보다 실용적임. 사용자 정보 중 몇가지 특성에 접근하거나 선정해야 하는 경우 유용 // 예제 객체 const person = { firstName: 'John', lastName: 'Doe', age: 30, city: 'New York' }; // 객체 분해 const { firstName, lastName, age, city } = person; // 분해한 값 출력 console.log('나이:', age); console.log('도시:', city); console.log('이름:', firstName); console.log('성:', lastName); // 변수 이름 변경 const {city : country} = person; > country < ..