DoM -> HTML과 JS를 이어주는 중간다리 역할
DoM을 활용하면 HTML을 JS로 조작할수 있다.
https://velog.io/@risha939/DOM-%EB%BF%8C%EC%8B%9C%EA%B8%B0
.innerText //
->실제로 화면에 렌더링되는 text를 추출해서 보여줌
.innerHTML // 실제로 내용 바꾸는게 가능 HTML Tag에 영향을 줌.
-> 태그가 전체적으로 보여짐 (내용도 포함)
.textContent // 실제로 내용 바꾸는게 가능
->렌더링된 내용이 아닌 공백을 포함한 한 모든것이 다 보임.(태그는 안보임)
엘리먼트 선택
getElementsByTagName
getElementById
getElementsByClassName
querySelector / querySelectorAll
1.먼저 새 엘리먼트 li를 만듬
2.li에다가 내용을 추가한다.
3.삽입하려는 부모 엘리먼트를 선해서 가져온다
4. 부모 엘리먼트에 새 엘리먼트 li를 추가한다.
function appendNewComent() {
let li = document.createElement('LI');
li.className = 'comment'
li.textContent = ~~~ 혹은 li.innerHTML = '<div class="username">호용</div>'
let parent = document.querySelector('#view-comments')
parent.appendChild(li)
}a태그 생성하는법
<a id = " javascript">awesome</a>awesome 같은경우는 textContent, innerHTML로 만들수 있음.
remove() , removeChild()
remove()는 그냥 지워버림.
removeChild()는 트리구조에서 제외시키는 것임
append를 하지 않은 상태로 되돌리는것이라고 보면됨.
innerHTML / textContent의 차이
거의 비슷하지만, textContent는 작성한 모든것이 다 String타입으로 들어가지만
innerHTMl의 경우 해당 값을 적용해서 버튼을 만들어버림
아래 내용을 수행해보면 알 수 있음.
a.textContent = '<div> 12312313 </div>
a.innerHTMl = '<div> 12312313 </div>Console.log / console.dir의 차이
console.log(인자)
- 인자로 전달된 값을 출력
- 요소를 HTML과 같은 트리 구조로 출력
console.dir(인자)
- 인자로 전달된 객체의 속성을 출력
- 요소를 JSON과 같은 트리 구조로 출력
이벤트 종류
onclick
onkeyup
onkeydown
onload
onmousedown
nomouseup
.onclick // addEventListner(click,0) 의 차이
envet overwrite의 유무의 차이
on이 붙은 이벤트는 overwrite가 안됨.(여러개 붙여도 마지막에 붙인 것만됨)
addEventlistner 같은경우는 overwrite가 됨. (여러개 붙여도됨)
