반응형 JavaScript6 [JavaScript] DOM(문서 객체 모델) Reference- [TCP School] 문서 객체 모델- [MDN] 문서 객체 모델- [ModernJS] 브라우저: 문제, 이벤트, 인터페이스(브라우저 환경과 다양한 명세서) - DOM(Document Object Model): XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스. W3C의 표준 객체 모델로 계층 구조로 표현됨- DOM 종류: Core DOM / HTML DOM / XML DOM- Document 객체: 웹 페이지 자체를 의미- HTML DOM은 Node라고 불리는 계층적 단위에 정보 저장- HTML 문서의 모든 것은 Node (Document 메서드)더보기메서드설명document.getElementsByTagName(tag_name)해당 태그 이름의 요소를 모두 선택do.. 2025. 4. 6. [JavaScript] JavaScript 주요 메서드 1 변수 선언더보기더보기let name = "Alice"; // 변경 가능const age = 25; // 변경 불가능var city = "Seoul"; // (과거 방식, 사용 지양, 호이스팅 문제 발생 가능)자료형더보기더보기// 기본 자료형 (Primitive Types)let str = "Hello"; // 문자열let num = 42; // 숫자let bool = true; // 논리값let nothing = null; // 값 없음let unknown = undefined; // 정의되지 않음let symbol = Symbol(); // 유일한 값// 객체 자료형 (Object Types)let obj = { key: "value" }; // 객체.. 2025. 4. 4. [JavaScript] JavaScript 기본 문법 변수 선언더보기더보기let name = "Alice"; // 변경 가능const age = 25; // 변경 불가능var city = "Seoul"; // (과거 방식, 사용 지양, 호이스팅 문제 발생 가능)자료형더보기더보기// 기본 자료형 (Primitive Types)let str = "Hello"; // 문자열let num = 42; // 숫자let bool = true; // 논리값let nothing = null; // 값 없음let unknown = undefined; // 정의되지 않음let symbol = Symbol(); // 유일한 값// 객체 자료형 (Object Types)let obj = { key: "value" }; // 객체.. 2025. 4. 4. [JavaScript] BOM(브라우저 객체 모델) Window 객체 Navigator 객체더보기/* 사용자 정보 확인 */const user = navigator.userAgent;/* 정규표현식: /(슬러쉬)내 문자가 ver내에 있는지 판단. 대소문자 구분 */const isIE = /trident/i.test(ver);/* Explore 접속시 경고 표시 */if(isIE) { alert("익스플로러 브라우저로 접속하셨네요. 이 웹페이지는 익스플로러를 지원하지 않습니다. 다른 브라우저로 접속해 주세요.");} 2025. 3. 6. [JavaScript] 태그 속성값 제어 태그 속성값 제어더보기/* 속성값 확인하기 */const tag = document.querySelector("선택자");const tagAttr = tag.getAttribute("속성명");/* 속성값 변경하기 */const tag = document.querySelector("선택자");tag.setAttribute("속성명", "값"); 2025. 3. 6. [JavaScript] DOM script 연결- script 태그 이용. defer를 사용하여 HTML 페이지 로딩을 동시에 진행- script 위치 순서 중요더보기출력더보기// console 창에 출력console.log("Hello World!");// pop업 창으로 확인 메시지alert("Are You Ready?");HTML 요소 선택더보기// 선택자로 HTML 요소 1개 선택const tag = document.querySelector("선택자");// 선택자로 HTML 요소 모두 선택const tagList = document.querySelectorAll("선택자");// 자식들 모두 선택const div = document.querySelector("div");const child = div.children;// 직.. 2025. 3. 6. 이전 1 다음 반응형
