제로하우스

Create createElement를 사용하여 새로운 element를 만들 수 있다. // div element를 만든다 document.createElement('div') Append append를 사용해 부모 노드에 자식 노드를 추가할 수 있다. // 생성한 div를 트리 구조와 연결한다 const exampleDiv = document.createElement('div') document.body.append(exampleDiv) appendChild 메서드는 append 메서드와는 다르게 오직 Node 객체만 받을 수 있으며, 한 번에 오직 하나의 노드만 추가할 수 있다. Read querySelector의 첫 번째 엘리먼트만을 가져오며, selector로는 아래 3가지를 가장 많이 사용한다...

Overview Element vs. Node Desc. Element 텍스트 노드를제외하고, 흔히 생각하는 태그만 지칭 Node 태그 노드와 텍스트 노드 전체를 지칭 1. 부모/자식 찾기 부모 요소 찾기 console.log(.parentElement) 자식 요소 찾기 // 의 자식 요소 찾기 console.dir(document.body.children) // console.dir은 해당 요소의 객체 정보를 출력 2. Selection (선택) 유연성이 좋은 아래의 2개의 selector를 사용한다. querySelector() querySelectorAll() 유형 구문 단일 Node document.getElementById(id) document.querySelector(selector) HTM..

Window 객체 (출처: http://www.ktword.co.kr/) Property property 설명 closed 창이 종료되었는지 여부를 나타내는 bolean 값 반환 defaultStatus 창의 상태표시줄의 텍스트를 반환하거나 설정한다. `document 창의 document 객체를 반환한다. frameElement 현재 창의 삽입된 요소를 반환한다. frames 현재 창에서 모든 요소를 반환한다. history 창의 history 객체를 반환한다. innerHeight 창의 콘텐츠 영역(뷰포트)의 내부 높이를 반환한다. innerWidth 창의 콘텐츠 영역(뷰포트)의 내부 너비를 반환한다. length 현재 창의 요소의 객수를 반환한다. localStorage 데이터를 저장하는데 사용되는..

Overview HTML 문서의 구조와 관계를 객체(Object)로 표현한 모델 HTML, XML 등과 같은 문서를 다루기 위한 언어 독립적인 문서 모델 인터페이스 JavaScript를 이용해서 DOM 구조에 접근 잘 구조화된 문서는 DOM Tree 구조를 얻어낼 수 있음 document라는 전역변수로 접근이 가능 주요 객체 window : DOM을 표현하는 창. 가장 최상위 객체(모든 객체의 부모 객체) - :white_check_mark:생략 가능! document : 페이지 콘텐츠의 Entry Point 역할을 하며, 등과 같은 수많은 다른 요소들을 포함 navigator, location, history, screen JavaScript 적용 DOM으로 HTML을 조작할 수 있다. HTML에 Co..

innerHTML, innerText, textContent 모두 태그 내의 값을 가지고 온다. 테스트 글 숨겨진 글 // console 창 출력 let text = document.querySelector('#text') console.log("innerHTML: " + text.innerHTML) console.log("innterText: " + text.innerText) console.log("textContent: " + text.textContent) 1. Element.innerHTML innerHTML은 요소에 포함된 HTML, XML의 전체 내용을 불러온다. (HTML 태그, 공백 등) innerHTML: 테스트 글 숨겨진 글 2. Node.innerText innerText는 해당 요..