Javascript DOM 접근 및 조작 (CRUD, 이벤트 핸들러)

Javascript? DOM?

 

자바스크립트는 html 제어하기 위한 언어 (컨텐츠 변경, 추가 등)

제어 대상에 접근한다 => 조작한다

 

DOM 이란 스크립트로 웹 문서를 제어할 수 있도록 웹 문서를 객체화한 것으로 개발자에겐 굉장히 편리한 기능이다. 반면에, 이를 잘못 사용할 경우 XSS나 개발자가 의도한 동작과 다르게 동작시킬 수 있는 취약점이 발생할 수 있다. (나는 이걸 노리는 것)

 

 

 

- document 자체는 웹 페이지를 의미하며, 돔트리의 최상위 노드임

- 따라서 document는 진입점이 됨

 

---

 

 

먼저 알아야 할 것

Node는 모든 타입(텍스트, 주석 등)의 노드를, Element는 요소 타입의 노드만 의미함

참고)

https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType (1, 2, 3, 8, 9 정도가 자주 보이는 노드)

 

 

부모, 자식, 형제 노드 접근

https://www.youtube.com/watch?v=XGKdimCHzw8&list=PLZKTXPmaJk8JVQv3XSNF8yJMdsxbFrO3S&index=2

 

childNodes는 예외로 요소 변경이 실시간 반영됨

 

CRUD

Create

 

createElement

var element = document.createElement('div');

 

 

Read

1. getElementsByTagName
var lis = document.getElementsByTagName('li');
(HTMLCollection 리턴되며, 요소 변화가 즉각적으로 반영)

 

CSS 바꿀 때 이런 식으로 사용할수도 
<script>
for(var i=0; i< lis.length; i++) {
lis[i].style.color = 'red';
}
</script>

2. getElementsByClassName
<li class="active">hi</li>
var lis = document.getElementsByClassName('active');

3. getElementByID 
id 값 기준이라 복수가 아니며, 성능이 좋아서 많이 쓰임
var li = document.getElementById('active');

4. querySelector (제일 처음 것만)
태그 이름
var li = document.querySelector('li'); 
li.style.color = 'red';

클래스 이름
var li = document.querySelector('.active');

4.1. querySelectorAll 
var lis = document.querySelectorAll('li'); 
(NodeList에 반영되며, 요소 변화가 즉각적으로 반영되지 않음)

 

 

 

Update

 

nodeValue : 모든 노드가 가지고 있는 프로퍼티지만, 텍스트 노드(#Text)가 아니면 null을 반환 
노드 유형은 nodeName으로 확인

textContent  : 마크업이 모두 날아감, 마크업을 제대로 넣어도 넣은 문자열 그대로 나옴 (잘 사용x)

innerHTML : 마크업을 제대로 사용 가능하며,  요소를 추가 제거할때마다 모든 요소를 다시 작성해야한다는게 단점.

 

cf) .createTextNode('')로 text 노드를 생성해서 요소에 appendChild 해도 됨

 

 

 

Delete

removeChild(노드) 

ex) ul.removeChild(childNodes);

 

 

+

이벤트 핸들러

이벤트는 click, dblclick, focus, blur 등 여러 종류가 있음

 

추가

addEventListener('이벤트', 발생할 함수)

ex) .addEventListner('keyup', () => {

             console.log(event.key);

});

 

삭제

removeEventListener('이벤트', 발생할 함수)

인자가 addEventListener와 일치해야함

 

 

 

 

참고

https://www.youtube.com/watch?v=aTGhKjoZeao