[JavaScript] insertBefore, removeChild, setAttribute에 대해서

이번에는 사실 혼자 힘으로 todolist를 짜보려고 했는데 뭔가 영 안풀리는 거다. 참고용을 찾아본 코드에서 생각보다 배울 것들이 많아서 거기서 내가 궁금한 것들, 알고 싶은 것들을 모아서 이렇게 가져와보았다!

이렇게도 todolist를 만들 수 있구나 싶어서 새로웠던 코드.
https://hackr.io/blog/how-to-create-a-javascript-to-do-list

insertBefore

만약 a라는 노드의 위치를 바꾸어준다고 가정해보자.

insertBefore를 쓰면 기존에 a 노드가 위치하던 자리에서는 노드가 삭제되고, 정해준 자리에 a 노드가 새롭게 삽입된다.

insertBefore(newNode, referenceNode)

newNode: 새롭게 삽입될 노드를 의미함.

referenceNode: referenceNode를 일종의 기준점으로 삼고 그 이전에 newNode가 삽입된다. 만약 referenceNode가 null값이면, newNode는 삽입될 위치에서 가장 말단에 삽입된다.

removeChild

돔으로부터 자식 노드를 제거하고, 제거된 상태의 노드를 반환하는 메서드!

removeChild(child)

child: DOM으로부터 제거할 child node를 적어주자.

setAttribute

지정된 요소의 속성 값을 설정해주는 메서드.

속성이 이미 존재한다면 속성을 다시 입력했을 때 업데이트가 된다.
속성이 없다면 새로운 속성을 추가한다.

setAttribute(name, value)

name: 값을 설정해주어야 하는 먼저 속성을 적어준다.

value: 앞서 적은 속성에 어떠한 값을 줄 것인지 이 위치에 적어서 할당해준다. 기본적으로 문자열이고, 문자열이 아닌 것을 적으면 자동으로 문자열로 변환한다.

속성의 현재 값을 얻기 ➡️ getAttribute()
속성 제거 ➡️ removeAttribute()