집 > 기사 > 웹 프론트엔드 > DOM 작업을 사용하여 간단한 게시판을 구현하는 Node.js 메서드

DOM 작업을 사용하여 간단한 게시판을 구현하는 Node.js 메서드

高洛峰원래의: 2017-02-06 09:41:071708검색

이 기사의 예에서는 j가 DOM 작업을 사용하여 간단한 게시판을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

사진에 보이는 간단한 게시판은 솔직하게 말하면 DOM 연산 연습을 위한 것입니다.

포인트 1: document.createElement("레이블 이름") 새 요소

포인트 2: 상위 요소.appendChild("Element") 요소는 다음과 같습니다. 페이지의 태그(마지막 태그에 표시됨)에 삽입되어 브라우저에 표시됩니다.

포인트 3: 상위 element.insertBefore("Element","삽입할 요소 앞에 ") 새로 생성된 요소를 페이지의 지정된 태그 앞에 삽입하여 나중에 입력한 내용이 앞에 표시되도록

포인트 4: 상위 요소.removeChild("Element") 지정된 요소 삭제

아래 코드는

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
 var oMsg = document.getElementById("msg");
 var oBtn = document.getElementById("btn");
 var oMsg_c = document.getElementById("msg_c");
 var oUl = document.createElement("ul");
 oMsg_c.appendChild(oUl);
 oBtn.onclick = function(){
  var sVal = oMsg.value;
  var oli = document.createElement("li");
  oli.innerHTML = sVal + " <span>删除</span>";
  var oli1 = oUl.getElementsByTagName("li");
  if(oli1.length>0){
   oUl.insertBefore(oli,oli1[0]);
  }else{
   oUl.appendChild(oli);
  }
  oMsg.value=&#39;&#39;;
   var oSpan = document.getElementsByTagName("span");
   for(var i=0; i<oSpan.length; i++){
    oSpan[i].onclick = function(){
     oUl.removeChild(this.parentNode);
    }
   }
 }
} 
</script>
</head>
<body>
<h1>简易留言板</h1>
<input id="msg" type="text" size="40" value="">
<input id="btn" type="button" value="留言">
<div id="msg_c"></div>
</body>
</html>

이 글이 모든 분들의 자바스크립트 프로그래밍 설계에 도움이 되기를 바랍니다.

DOM 연산을 사용하여 간단한 게시판을 구현하는 더 많은 js 메소드를 보려면 PHP 중국어 웹사이트에 주목하세요!

성명：

이전 기사：javascript에서 html 문자열을 jquery dom 객체로 변환하는 방법다음 기사：javascript에서 html 문자열을 jquery dom 객체로 변환하는 방법

DOM 작업을 사용하여 간단한 게시판을 구현하는 Node.js 메서드

관련 기사