newlecture: js es5 브라우저 플랫폼 2 : 노드 다루기

(87) VanillaJS를 위한 자바스크립트 DOM 프로그래밍 28강 - Node의 종류와 개체 형식 - YouTube

해당 내용들의 출처는 뉴렉쌤입니다.

 

 

 

주의 깊게 볼 것은 1번 ELEMENT와 3번 TEXT이다.

 

 

childNodes를 이용해서 자식노드를 선택해 보자.

 

위와 같이.. input 2개 이외에  text란게 생긴다..

0:text 노드를 보면 이유를 알 수 있다. 위와 같은 whiteSpace가 있기 때문이다.

 

childNodes가 아닌 children을 사용한다면 Tag만 뽑을 수 있다.

 

 

사진을 변경하는 예제이다.

 

 

 

 

아래와 같이 select를 이용해서도 가능하다.

 

한발 더 나아가 html5의 datalist 태그를 이용하면 아래와 같다.

 

input:text에 select박스의 기능을 추가햿다.

개인적으로 datalist가 제일 좋은 것 같다.. 

 

이미지의 속성을 바꿀 때 대시(-)로 된 것은 위처럼 map형식 혹은 낙타표기로 바꾸면 된다. (낙타표기를 지원해준다.)

 

html 문서 객체의 class을 가져올 땐 .className을 사용한다.

 

다음으로 노드를 추가해보자.

위에는 필자가 작성한 코드고.. 아래는 뉴렉쌤이다.

 

문제는 위와 같이 태그로 안 감싸진 순 text로 입력된다는 것이다.

 

appendChild => 맨 뒤에 막내로 꽂아 넣는 것.

insertBefore => 누군가의 막내로 넣겠다.

 

해당 tr을 위 아래로 바꿔보자.

 

firstElementChild 를 선택하면 Tag 노드만을 선택할 수있다.

반면 firstChild는 Text를 포함한 모든 노드를 선택한다. previous 등도 마찬가지다.

 

insertBefore(넣을노드, 기준점) 를 통해서 노드를 삽입할 수 있다. removeChild를 수행할때 노드는 삭제되지 않았다. DOM트리의 연결점만 지운것일 뿐, 초기 var선언으로 인해 참조되고 있다. 여기서 null 등으로 대체되 참조가 안되면 GC 대상이 되어 사라진다.

 

사실 removeChild가 없어도 위 문장은 돌아간다... insertBefore가 move의 뜻을 지니었다. 자동으로 해준다. 참고로 insertAfter가 없다. 때문에 위아래 이동시 대상노드를 잘 선택해야 한다.

 

위와 같은 API도 있다. 대상 노드에 어떤 위치로 노드를 삽입할 지를 알려주면 4가지 방식으로 삽입이 가능하다. 여기서 대상 노드는 <p>태그다. 

 

downButton

 

upButton

 

 

자.. 밑에 것이 가장 어려운 것 같다.

 

위와 같은 화면이 주어졌을때 총 세가지를 구현해야 한다.

1. 일괄 선택 / 해제

2. 선택된 것들 일괄 삭제

3. 선택된 것 2개 위치 바꾸기

 

3번이 어려웠다..

 

모두 선택부분이다. 첫번째 index는 제목행을 thead 부분이기 때문에 생략하였다. continue를 사용하려 했지만 foreach문에서는 동작하지 않는 것 같았다.

 

선택영역 일괄 삭제 부분이다. 처음에 tbody > tr로 접근하려했지만 foreach에서 돌리는 index와 첫 시작 index넘버가 맞지 않아서 그냥 tr로 하였다.

 

..대망의 위치 교환 이벤트이다. 동시에 위치를 바꾸지 못하니.. 하나하나 바꾼다고 생각하였다. 우선 그 이전에 check된 부분만 빼오는 것부터 생각해야 한다. 필자는 stack등의 자료에 push하는 것을 생각하였다. 그리고 거기서 하나씩 뽑아 위 아래 요소를 만든다.

 

여기서부터 어렵다. 아래 요소를 내리는 것은 쉬운데, 위 요소가 첫행이면 NPE가 발생한다. 이 경우에 대하여 tbody를 넣고 그 밑의 첫 자식노드를 들어가게끔 하면 예외 상황을 벗어날 수 있다.

 

 

 

.......지금 다시 강의를 정주행하고 있다..

역시.. API 사용법이나 좋은 선례를 모르면 코드가 산으로 간다는 것을 깨달았다 ㅠ

역시는 역쉬.. 역시군

선언부

allCheckbox 이벤트에서.. 값이 바뀔때마다 감지를 하는 이벤트를 건다. 그리고 tbody에서 checkbox인 애만 가져와서,

맨위 쳌박스가 눌린 값을 foreach로 대입한다.

 

delButton 이벤트에선 CSS셀렉 문법을 이용해서 checkec된 것만 가져온다.

그리고 할아버지 노드로 가서 지운다.       ... 크으.. 

 

replaceWith 속성을 이용해서 사용할 수도 있다. (비슷한 API로 [부모노드].replaceChild가 있다. )

[oldNode].replaceWith([newNode]) 로 교체한다.

우선 trs[0] 노드를 복제한다.

trs[1]을 clonNode로 교체한 다음, 아직 살아있는 trs[1]을 이용해서 trs[0] 자리에 교체한다.

 

 

** 동적으로 Element추가

위와같이 버튼을 이용해서 텍스트를 내포한 엘리먼트를 동적으로 추가하고 오래된 것부터 삭제할 수 있다.

 

 

테이블의 제목을 클릭하면 정렬이 되게끔 해야 한다.

위는 필자가 작성한.. 실패한 코드를 올린 것인데.. 알고보니 2번째 if 부등호 문제였다..

뉴렉쌤이 한 것은 훨씬 간결하다.. 부모노드에 .innerHTML = ""; 를 하는 방식으로 접근한다.. 우아..