728x90 반응형 JavaScript 시리즈☕/중급자 시리즈_개념 정리4 JS 기초 개념 (window객체,dom,dom트리,요소노드...) 1. window 객체 window 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체입니다. 자바스크립트 코드 어느 곳에서나 항상 접근할 수 있는 객체이기 때문에 전역 객체, 영어로는 Global Object라고 부릅니다. 어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체 내부의 것이기 때문에 앞에 window.을 생략할 수도 있습니다. 2. DOM DOM이란 Document Object Model의 약자로, 한국어로는 문서 객체 모델입니다. 간단하게 표현하면 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것으로 생각하면 됩니다. 이때 각 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분됩니다. 3. DOM 트리 HTML의 계층 구.. 2021. 8. 30. 아주 간단한 to-do-list 만들기 문제 JS const toDoList = document.querySelector('#to-do-list'); //to-do-list 아이디를 가진 html 태그선택해서 toDoList 변수에 저장 function addNewTodo(text) { const li = document.createElement("li"); // 여기에 코드를 작성해 주세요. li.textContent= text; toDoList.append(li) } // 테스트 코드 addNewTodo('자바스크립트 공부하기'); addNewTodo('고양이 화장실 청소하기'); addNewTodo('고양이 장난감 쇼핑하기'); 1. to-do-list 아이디를 가진 html 태그선택해서 toDoList 변수에 저장 2. 함수 addNewTo.. 2021. 8. 25. 001 (태그 선택 , 이벤트 , 유사 배열) 자바스크립트로 프로젝트도 만들어 봤으니,, 이제 개념정리를 하면서 완벽하게 이해 못했던 부분 짚고 넘어가자! 0 . start 1 . id 는 고유한 값이기 때문에 여러 요소들을 선택하기에는 활용하기 어렵다. + css 에서도 스타일을 다룰때 여러 요소의 스타일을 다룰때에도 id 가 아닌 class속성으로 한다. 2. class 로 태그를 선택하는 메소드의 이름? => document.getElementsByClassName(' 클래스이름 적는란 '); * 위 소스에 Elements에 s 는 여러 요소를 선택하는 것이기 때문에 s 를 꼭 붙인다. 3. 존재하지 않는 클래스이름을 적으면, null 이 아닌 undefined 가 출력된다. 1. 자바스크립트로 태그 선택하기 document.getElement.. 2021. 8. 23. 002 ( window 객체 , window 객체 https://developer.mozilla.org/ko/docs/Web/API/Window Window - Web API | MDN Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다. developer.mozilla.org DOM Splice 메소드 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice Array.prototype.splice() - JavaScript | MDN splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. developer.mozilla.org 배열 https://developer.. 2021. 8. 23. 이전 1 다음 728x90 반응형
