공부 기록일지📚

이전까지 노드 변경 API 에서는 여러 메소드를 이용해서 노드를 제어하는 방법에 대해서 알아봤다. 그 전의 방식들이 조금 장황한 편이라서 비교적 편리하게 노드를 조작하는 방법을 알아보자. 예시로 엘리먼트에 content를 추가할 때 createTextNode() 메소드를 이용하여 텍스트 노드를 생성한 뒤 추가하는 등 번잡함이 있다. appendChild()도 마찬가지 문자열로 노드 제어 ▶innerHTML innerHTML은 문자열로 자식 노드를 만들 수 있는 기능(set)을 제공하며 자식 노드의 값을 읽어올 수도 있다(get). HTML CSS ▶outerHTML innerHTML과 차이점: outerHTML은 자기 자신도 포함한다. innerHTML의 경우 하위 엘리먼트만 해당 위의 예시에서 targ..

Node객체? Node 객체는 DOM에서 시조(최상위 객체)와 같은 역할을 한다. 다른 말로 모든 DOM객체는 Node객체를 상속 받는다. Node객체의 주요기능 ▶관계 (관계 API) 엘리먼트는 서로 부모, 자식, 혹은 형제 자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다. Node.childNodes // 자식 노드들을 유사배열에 담아서 리턴 Node.firstChild //첫 번째 자식 노드 Node.lastChild //마지막 자식 노드 Node.nextSibling // 다음 형제 노드 Node.previousSibling // 이전 형제 노드 Node.contains() //해당 엘리먼트가 하위에 특정..

Element 객체란? Element 객체는 엘리먼트를 추상화한 객체이다. html css JavaScript Element HTMLElement HTMLLIElement 표의 상단이 상위개념 아래로 갈수록 하위개념 "부모 - 자식" 관계입니다. 위의 프로퍼티를 아래로 상속하는 상속 관계이기도 합니다. HTMLElement(모든 엘리먼트들의 기본적인 특징을 정의하고 있음)의 대표 특징으론 .style을 통해서 css를 제어할 수 있다는 것 Element - HTMLElement와 비슷한 개념이다. 구분을 하는 이유는 DOM이 HTML만을 제어하기 위한 모델이 아니기 때문이다. DOM은 HTML이나 XML, SVG, XUL과 같이 마크업 형태의 언어를 제어하기 위한 규격이기 때문에 Element는 마크업 ..

global execute context 에서 실행될 때 a=1 Global var a = 1 Global let a =1 Script const a =1 Script function execute context 에서 실행될 때 a=1 Global var a = 1 Local let a =1 Local const a =1 Local *let 과 const 는 함수 안에서가 아니라 block 안에서 local로 들어간다. Closure(클로져) self-invocation을 한 함수의 리턴값을 변수에 할당한다. 리턴을 익명함수로 선언하면 변수는 그 익명함수를 리턴받게 된다. 변수명에 함수를 실행하는 ()연산을 하면 리턴으로 받은 함수만 실행되고, self-invocation이 되었던 함수는 메모리에 상주한..

getElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으로 구체적인 작업을 처리해야 한다. 이를 위해서는 획득한 객체가 무엇인지 알아야 한다. 그래야 적절한 메소드나 프로퍼티를 사용할 수 있다. getElement* 의 리턴 값을 보여주는 코드 HTMLLIELement 라는 카테고리에 속한 객체라는 것을 의미하며 중간에 LI는 li태그를 나타낸다. 하나의 엘리먼트를 담은 객체이다. HTMLCollection 카테고리에 속한 복수의 엘리먼트를 담은 객체를 의미하며 말 그대로 단일 엘리먼트가 아닌 여러개의 엘리먼트를 담고있는 객체이다. document.getElementById : 리턴 데이터 타입은 HTMLLIELement document.getElementsByTagName : ..

window객체는 전역객체이면서 윈도우의 창을 제어하는 객체입니다. 전역객체로써의 window말고 윈도우의 창을 제어하는 객체로써 알아봅시다. window.open 이 메소드는 새 창을 생성한다. 현대의 브라우저는 대부분 탭을 지원하기 때문에 window.open은 새 창을 만든다. 과 같은 기능을 합니다. -> 첫번째 인자: 새 창에 로드할 문서의 URL. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어짐 window.open('demo2.html'); -> 두번째 인자: 새 창의 이름(지정되어 있는 이름을 사용 or 직접 지정) window.open('demo2.html', '_self'); window.open('demo2.html', '_blank'); window.open('demo2.html..

Cross Browsing(크로스 브라우징)이슈 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업을 말한다. [HTML, CSS, Javascript 작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 의도된 대로 보여지고 작동되는 기법.] 출처: https://okayoon.tistory.com/entry/크로스-브라우징cross-browsing [Zzolab Blog :)] Navigator 객체 브라우저의 정보를 제공하는 객체이다. 주로 호환성 문제등을 위해서 사용한다. Navigator 의 여러 프로퍼티를 확인하고 싶다면 console.dir(navigator);을 통해 열람하면 된다. 주요한 프로퍼티를 공부하고 나..

Location 객체 Location 객체는 문서의 주소와 관련된 객체로 Window 객체의 프로퍼티이다. 이 객체를 이용해서 윈도우의 문서 URL을 변경할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있다. 현재 윈도우의 URL알아내기 ▶2가지 방법 location.toString() alert(location) 을 해도 해당 페이지의 URL이 뜹니다. console.log(location)을 하면 로케이션 객체에 대한 정보를 보여주지만 alert의 경우 인자값으로 String을 받기 때문에 1번의 방법과 같은 의미라고 생각하시면 됩니다. location.href // href 가 좀 더 선호되어 사용됩니다. URL Parsing location 객체는 URL을 의미에 따라서 별도의 프로퍼..