본문 바로가기
환영합니다. 이 블로그 번째 방문자입니다.

Front-end/Javascript

  (5)
DOM에서 노드 추가, 삭제하기 노드리스트(node list): querySelectorAll()메서드를 사용해 가져온 여러개의 노드 정보를 저장한 것 1. 텍스트 노드를 사용하는 새로운 요소 추가하기 (1) 요소 노드 만들기 - createElement() 메서드 document.createElement(노드명); ex) var newP = document.createElement("p"); (2) 텍스트 노드 만들기 - createTextNode() 메서드 document.createTextNode(텍스트); ex) var txtNode = document.createTextNode("텍스트 노드를 만들었다!"); (3) 자식 노드 연결하기 - appendChild() → newP와 txtNode 연결하기 → 텍스트 노드나 속성 노..
DOM에서 이벤트 처리하기 1. DOM 요소에 함수 직접 연결 var btn = document.querySelector("#btn"); btn.onclick = function(){ alert('버튼을 클릭했습니다.'); } 2. 함수 이름을 사용해 연결 var btn = document.querySelector("#btn"); btn.onclick = btnHandler; function btnHandler(){ btn.style.color = "red"; } ✅ event 객체에는 이벤트 정보만 들어있음, 만약 이벤트가 발생한 대상에 접근하려면 이벤트 처리기에서 예약어 this를 사용해야 함 var card = document.querySelector("#card"); card.onclick = function(event){..
DOM 요소 접근 및 속성 가져오기 '접근한다' : 웹 문서에서 원하는 요소를 찾아가는 것 선택자(selector) : class, id, tag 등을 이르는 말 εїз DOM 요소 접근 1. id 선택자로 접근하는 getElementById() → id 속성 : HTML 요소가 문서 안에서 중복되지 않도록 사용하는 CSS 선택자 요소명.getElementById("id명"); 2. class 값으로 접근하는 getElementsByClassName() → class 선택자는 웹 문서 안에서 여러 요소들이 사용할 수 있으므로 반환하는 요소가 2개 이상일 수 있음 → 반환 요소가 2개 이상 있을 수 있으므로 HTMLCollection 형태로 저장 요소명.getElementsByClassName("class명"); 3. tag 이름으로 접근..
[Javascript] 객체와 프로퍼티 (1) 출처 : "Javascript: The Definitive Guide, by David Flanagan(O'Reilly). Copyright 2011 David Flanagan, 978-0-596-80552-4" ♦️ 객체란 객체 : 자바스크립트의 기본 데이터 타입으로 이름과 값으로 구성된 프로퍼티들의 정렬되지 않은 집합 자바스크립트에서는 문자열(string), 숫자(number), true/false, null/undefined를 제외한 나머지는 객체이다. 자바스크립트의 객체는 객체가 가진 고유 프로퍼티를 유지하는 것 외에 '프로토타입'이라고 하는 다른 객체의 프로퍼티를 상속받는다. 객체로 가장 많이 하는 작업은 객체 생성, 프로퍼티 추가, 질의, 삭제, 테스트, 열거이다. 자바스크립트에서 맨날 하는 ..
Javascript 공식문서 정리 [개요] 👇🏻 참조문서 https://developer.mozilla.org/ko/docs/web/javascript/a_re-introduction_to_javascript JavaScript 재입문하기 (JS ​튜토리얼) - JavaScript | MDN 어째서 재입문일까요? 왜냐하면, JavaScript는 세계에서 가장 오해받고 있는 프로그래밍 언어로 악명이 높기 때문입니다. 종종 장난감같다고 조롱당하기도했지만, 이 거짓말같은 단순함 아래에 developer.mozilla.org εїз 이 문서에 어떤 방식으로 도달했던 간에, 나는 자바스크립트를 1년 동안 필요에 의해 구글링하며 사용한 사람이다. 애초에 제대로 기초부터 공부하지 않는다면 이 꼴이 날테니 제대로 공부하는게 중요하다는 오지랖을 부리며 기본부터 ..

티스토리툴바