DOM
1.DOM의 구조
Achievement GoalsDOM의 개념을 이해할 수 있다.DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다.HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다. script 태그가 적용되는 위치에 따라서 실
2.DOM 구조를 조회하는 방법(DOM2)
console.dir을 통하여 DOM 구조를 조회합니다.console.dir은 DOM을 객체의 모습으로 출력한다.->console.dir(document.body)document.body에서 객체의 key중에서 children을 찾아본다. console.dir(doc
3.DOM method
Achievement GoalsDOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.createElement - CREATEquerySelector, querySelectorAll - READvtextConten
4.DOM method (2)
textContent 를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력합니다.CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가합니다.이번에는 append를 이용해 container의 자식 요소로 추가합니다.class와 id 말고는 다른 at
5.element vs node / childNode vs childrend
node란 무엇인가 ? 노드(node)는 컴퓨터 과학에 쓰이는 기초적인 단위이다. 노드는 대형 네트워크에서는 장치나 데이터 지점(data point)을 의미한다. 개인용 컴퓨터, 휴대전화, 프린터와 같은 정보처리 장치들이 노드이다. 인터넷에서 노드를 정의할 때 노드는
6.remove() 와 removeChild() 의 차이
remove() 는 노드를 메모리에서 삭제하고 종료합니다.removeChild()는 노드를 삭제하는 것이 아닙니다. 메모리에 해당 노드는 그대로 존재하며, 부모 노드와의 부모-자식관계를 끊어 DOM 트리에서 해제하는 것입니다. 최종적으로는 관계를 끊은 해당 노드의 참조
7.tweets에 forEach는 되는데, reduce는 안되는 이유
Array.prototype.forEach()forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.querySelectorAll() NodeList 형식의 개체를 반환합니다. NodeList는 길이 속성을 노출하며 열거할 수 있습니다. ( op
8.tweets를 유사 배열에서 배열로 바꾸는 방법
NodeList는 DOM 요소의 컬렌션이나 또는 특별한 노드를 나타내는 유사배열 객체입니다. 배열과 동일하지만, NodeList 개체에서 map(), slice() 및 filter()와 같은 일반적인 배열 메서드는 사용할 수 없습니다.다음은 NodeList 개체를 Ja
9.DOM QUIZ
(1) div를 전부 조회하는 적당한 방법?( 두 가지 메소드는 부모, 자식 관계와 관계 없이 모든 div를 집습니다.)document.getElementsByTagName('div')document.querySelectorAll('div')(2) 최상단 div 하나만
10.유효성 검사 Quiz
display: nonedisplay 속성은 해당 엘리먼트의 표현 방식을 결정합니다. 따라서 해당 엘리먼트를 flexbox로 설정할 수도 있으며, block 또는 inline과 같이 줄바꿈/인라인 속성을 결정짓기도 합니다.그 중에서도 none 속성은 화면상에서 표시되지
11.유효성 검사 (실습)
input tag의 값 바꾸기 (value)시각적 피드백 HTML 작성메세지가 보이게는 html에 다 넣어야 합니다. CSS display 속성을 자바스크립트로 조작하는 방법(1) CSS파일에 원하는 클래스(hide)에 display 속성을 추가합니다.(2) css 정
12.이벤트 객체
Achievement Goals [ ] 기초적인 event를 알고, event handler를 element에 적용할 수 있다 [ ] onclick event [ ] onclick 에 직접 할당하는 것과 addEventListener의 차이 [ ] eventHandle
13.Dom (Document Object Model) 정리 요약(1)
javascript를 이용해서 엘리먼트의 속성값을 얻어내거나, 변경하는 방법HTML은 트리 구조를 가지고 있습니다. 객체도 자세히 보면 트리 구조를 가지고 있습니다.그래서 정리하자면 DOM이란, HTML 엘리먼트를 javascript 이용해서 객체의 형태로 가져올수 있
14.Dom 조작 정리 요약(2)
Dom 조작 (innerHTML)innerHTML로 태그를 입력할수 있다고 배웠습니다.쓰기 쉽지만, 느리고 보안위협이 있습니다. (textContent 추천)Dom 조작(메소드) 추천생성과 동시에 이벤트핸들러 등록이 가능합니다.출처: 코드스테이츠