Achievement Goals
- DOM이 무엇인지에 대해서 이해할 수 있다.
- HTML을 구조적으로 접근하여 단순한 문서 이상인 웹 앱으로 만들어 주는 역활을 한다.
- 자바스크립트를 조작한다.(브라우저 환경)
- 예로 기존 Element들을 접근하거나 새로운 Element을 생성 및 삭제한다.
- JavaScript로 엘리먼트 속성값을 얻어내거나, 변경하는 방법
- HTML과 DOM이 어떻게 닮아있는지 알 수 있다.
-둘다 트리구조다.
- 제공된 github 레포지토리에서 clone하여 DOM연습하기.
-완료!!!
Further Study
append와 prepend차이
prepend는 첫번째 자식으로 붙이는 기능이고, append는 마지막자식으로 붙이는 기능이다.
appendChild와 append 차이
1. append
-Node객체를 추가하는 경우, DomString(텍스트추가)추가하는 경우 둘다 가능.
//Node객체 추가하는경우
const parent = document.createElement('div');
const child = document.createElement('p');
parent.append(child);
//<div><p></p></div>
//DomString(텍스트추가)하는 경우
const parent = document.createElement('div');
parent.append('Appending Text');
// <div>Appending Text</div>2.appendChild
-Node객체를 추가하는경우는 가능하나, DomString(텍스트추가)하는 경우는 안된다.
//Node객체 추가하는 경우
const parent = document.createElement('div');
const child = document.createElement('p');
parent.appendChild(child);
//<p><div></div></p>
//DomString(텍스트추가)하는 경우
const parent = document.createElement('div');
parent.appendChild('Appending Text');
//Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
Document부모를 가진 각각의 Div 두개 사이에서 한 div자식 span이 다른 div 자식으로 이동할떄 appendChild를 사용하면 복사(clone)이 될까? 아니면 그냥 이동(move)될까?
출처 : appendChild가 부모간에 DOM 노드를 이동하는 이유는?
-복사가 아니라 이동이 된다. 블로그 내용을 정리하자면
이렇게 하면 div.a에 있던 span이 div.b의 자식으로 이동하는데 복사가 아니라 그대로 이동하게 된다!//HTML <div class="a"> <span></span> </div> <div class="b"></div> //자바스크립트 const span = document.querySelector(‘span’); const divB = document.querySelector(‘.b’); divB.appendChild(span);
Achievement Goals
DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.
CREATE
- createElement
document.createElement('div')
html최상위인 document에다가 새로운 div라는 태그를 생성한다.
READ
- querySelector
- querySelectorAll
1. querySelector
- 엘리먼트.querySelector('태그')
-> 첫번째 태그만 조회한다.- 엘리먼트.querySelector('#id이름')
- 엘리먼트.querySelector('.class이름')
-> 첫번째 class가 조회된다.
2. querySelectorAll
- 엘리먼트.querySelectorAll('태그')
-> 해당 태그 모두조회- 엘리먼트.querySelectorAll('#id이름')
-> id는 1개니까 모두가 아닌 한개만 되겠지?- 엘리먼트.querySelectorAll('.class이름')
-> 해당이름의 클래스 모두 조회
UPDATE
- setAtibute
- id
- textContent
- classList.add
**
1. setAttribute
엘리먼트.setAttibute('id','javascript')
엘리먼트에 id를 넣고, id이름은 javascript이다.
2. id
엘리먼트.id = 'javascript'
엘리먼트에 id이름을 javascript이다.
3. innerHTML과 textContent의 차이
- textContent
-엘리먼트.textContent = 'awesome'
-엘리먼트의 내용을 awesome으로 넣는다.- innerHTML
-엘리먼트.innerHTML = 'awesome'
-엘리먼트에 내용을 awesome으로 넣는다.- 차이점
-HTML tag를 직접 삽인하여? 실행하는 형태의 메소드 즉 위에 innerHTML을 사용하면 해커가<script> tag를 활용하여 XSS Attack을 강제로 실행시킬 수 있다. 공격의 여지를 주지 않도록innerHTML사용을 지양한다.
4. classList.add
엘리먼트.classList.add('클래스이름')
<엘리먼트 class="클래스이름"></엘리먼트>
-엘리먼트에 클래스 이름을 추가한다.
DELETE
1.remove
2.removeChild
3.innerHTML = ''
4.textContent = ''
1.remove
삭제할노드.remove()
삭제할노드가 삭제된다.
2.removeChild
삭제할노드의 부모노드.removeChild(삭제할노드)
3. innerHTML = '';
삭제할노드의 부모노드.innerHTML = '';
4.textContent = ''
삭제할노드의 부모노드.textContent = '';
APPEND
- appendChild
- append
실용문제 ) 버튼을 누르면 안내창에 '접속되었습니다'라는 메시지를 출력하고 싶을때 적절한 방법은?
------ HTML
<body>
<div>
<div>hello</div>
<div id="world">world</div>
<span id="code">code</span>
<span>states</span>
<button id="apply">apply</button>
</div>
</body>- 이벤트 발생시 작동하는 함수를 할당할 수 있다.
----- 정답
첫번째,
-DOM객체에 onclick을 직접 지정
-주의할부분은 함수할당시 함수실행값이 아닌 함수 자체를 할당해야한다.
displayAlert -> ok
displayAlert() -> no!!!
function displayAlert() {
alert('접속되었습니다)
}
document.querySelector('#apply').onclick = displayAlert
두번째,
-addEventListener라는 메소드 사용하여 할당.
document.querySelector('#apply').addEventListener('click', function(){
alert("코드스테이츠에 오신 것을 환영합니다")
})Further Study
- element와 node의 차이 (difference between element and node in javascript dom)
- children과 childNodes의 차이 (difference between children and childNodes in javascript dom)
- removeChild와 remove의 차이 (difference between removeChild and remove in javascript dom)
- tweets에 forEach는 되는데, reduce는 안되는 이유 (why array method is not working on nodelist)
- tweets를 유사 배열에서 배열로 바꾸는 방법 (how to convert nodelist into javascript array)
javascript 공부하는 sumiindaeyo