6. DOM 응용

트위터 댓글창 만들기 

---

1. 신규 댓글 추가 소스 

document.querySelector('#type3').onclick = addNewComment; //버튼클릭시 addNewComment함수실행

//새로운 댓글 추가 함수 
function addNewComment() {
  
  getTimeStamp(){
  	//날짜 정렬하는 함수 생략
  }
  
  let name = document.getElementById('type1').value; //신규유저이름
  let comment = document.getElementById('type2').value; //신규댓글내용
  
  //1. 새 엘리먼트 li 만든다
  let li = document.createElement('LI');
  //2.li에 내용을 추가한다. 
  li.innerHTML = '<div class="reple"><div class="name">' + name + '</div><div class="date">' + getTimeStamp() + '</div><br><div class="comment">' + comment + '</div></div><hr>';
  //3.삽입할려는 부모엘리먼트 선택해서 가져오기
  let parent = document.querySelector('#ulp');
  //4.부모엘리먼트에 li추가하기
  parent.prepend(li);
  
  }
}

-> 여기서는 innerHTML을 사용해서 직접적으로 태그를 넣었다. 보안상 문제가 있지만 여러가지 활용을 위해 연습삼아 넣었다. 

---

2. 댓글 정렬하기 + 기본 객체에 저장된 댓글 보여주기

//댓글여러개보여주기
function renderTwits() {
  DATA.forEach(renderTwit); //DATA.forEach()내용을순회함 
}

//li HTMl을 ul에 담아주기 
function renderTwit(comment) {
  let commentElement = makeCommentElement(comment);
  let ul = document.querySelector("#ulp");
  ul.appendChild(commentElement);
}

//HTML 만들어주기
function makeCommentElement(comment) {
  let liElement = document.createElement('li');

  let div_reple = document.createElement('div');
  div_reple.classList.add('reple');

  let div_name = document.createElement('div');
  div_name.classList.add('name');
  div_name.textContent = comment.user;
  div_name.onclick = addSameList; //이름을 클릭하면 같은 이름찾기 함수 실행

  let div_date = document.createElement('div');
  div_date.classList.add('date');
  div_date.textContent = comment.created_at;

  let br = document.createElement('br');

  let div_comment = document.createElement('div');
  div_comment.classList.add('comment');
  div_comment.textContent = comment.message;

  let line = document.createElement('hr');

  div_reple.appendChild(div_name);
  div_reple.appendChild(div_date);
  div_reple.appendChild(br);
  div_reple.appendChild(div_comment);

  liElement.appendChild(div_reple)
  liElement.appendChild(line);

  return liElement;
}

-> 함수3개를 작성 하였다.

1번째 - renderTwits()

DATA라는 객체에서 내용을 가져오기 위한 함수 이다.  여기서는 .forEach를 사용하여 DATA라는 객체를 순회하며 내용을 가져왔다.  DATA의 내용이 rederTwit함수를 통해 틀안에 정리가 되서 나온다. 

2번째 - renderTwit

li를 ul안에 담아주기 위한 함수이다. 

3번째 - makeCommentElement

댓글을 정리해서 보여주기 위해 li안에 html을 dom코드를 이용하여 만든 함수이다.

<li>
    <div class="reple">
      <div class="name">이름</div>
      <div class="date">날짜</div><br>
      <div class="comment">댓글내용</div>
    </div>
    <hr>
</li>

위에 html을 만든것이다.

div_name.onclick = addSameList; 이것은 이름을 클릭하면 addSameList함수가 실행되기 위함이다.

---

3. 이름 클릭시 그 사람이 쓴 댓글만 보여주기 

//!!!!작성자 클릭시 쓴댓글 다 보여주기 
function addSameList() {
  let filteredData = []; //빈배열을 만들어줌 
  let ul = document.querySelector("#ulp");
  //기존 내용 다 지움 
  while (ul.firstChild) {
    ul.removeChild(ul.firstChild);
  }
  //같은 이름 인거 찾기
  for (let i = 0; i < DATA.length; i++) {
    if (event.target.textContent === DATA[i].user) {
      filteredData.push(DATA[i]);//이름이 같으면 빈 배열에 넣어주기
    }
  }
  //ul에 새로 만든 배열 넣어주기
  for (let j = 0; j < filteredData.length; j++) {
    ul.appendChild(makeCommentElement(filteredData[j]));
  }
}

 

-> 먼저 기존에 ul안에 내용을 다 지워준다. 

while (ul.firstChild) {
    ul.removeChild(ul.firstChild);
  }

ul의 첫번째 자식 까지 다 지울때 까지 while문을 돌려 전체 삭제를 하는것이다. 

삭제후 DATA의 객체 길이 만큼 순회하면서 클릭했던 이름(event.target.textContent)과 DATA[I].user를 비교한다. 

비교하여 같으면 빈배열에 객체를 넣어준다. 

---

4. 랜덤버튼 클릭시 랜덤으로 댓글 보여주기

//랜덤으로 댓글 새로 등록하기
function renderRandomTwit() {

  let refreshComment = makeCommentElement(generateNewTweet());
  let ul = document.querySelector("#ulp");
  ul.prepend(refreshComment);

  DATA.push(generateNewTweet()); //DATA 객체에 랜덤값 넣기
}
document.querySelector('#newbutton').onclick = renderRandomTwit; //랜덤버튼 클릭시

-> ul에 랜덤값 담아서 정력하고 DATA안에도 담는다.(같은이름클릭시 보여줘야하기에)