JS 간이 게시판 실현(노드 조작)
오늘 의 사례 는 주로 노드 를 조작 하 는 것 이다.
노드 를 만 들 고 노드 를 추가 하 며 노드 를 삭제 하고 노드 에 내용 을 추가 하 는 작업 입 니 다.
댓 글 을 올 리 고 댓 글 을 삭제 할 수 있 는 간단 한 게시판 기능 이다.
주요 사고방식:두 개의 마우스 클릭 이벤트-게시 버튼 을 클릭 한 이벤트 와 삭제 버튼 을 클릭 한 이벤트
게시 단추 이벤트:우선 문서 에 li 노드 를 만 듭 니 다.그 다음 에 두 번 째 단 계 는 먼저 텍스트 필드 의 내용 을 가 져 와 li 에 게 부여 합 니 다.여기 서 텍스트 필드 는 폼 요소 이 고 폼 요 소 를 가 져 오 는 내용 은 폼 의 특유 한 속성 value 를 사용 하여 일반 요소 가 내용 을 가 져 오 는 innerHTML 과 구분 해 야 합 니 다.삭제 링크 를 li 에 추가 하고 문자열 로 연결 하 는 방식 입 니 다.마지막 으로 li 노드 를 ul 에 추가 합 니 다.추가 하 는 방식 은 두 가지 가 있 습 니 다.ul 목록 항목 의 끝 에 직접 추가 하고 지정 한 위치 에 추가 할 수 있 습 니 다.여기 서 나 는 얼 목록 의 맨 앞 에 삽입 할 것 을 선택 했다.
삭제 단추 이벤트:삭제 단 추 를 누 른 이 벤트 는 만 든 li 를 ul 에 추가 한 후에 정 의 됩 니 다.삭 제 된 작업 은 주로 부모 노드 요 소 를 삭제 하고 하위 노드 요 소 를 삭제 하 는 것 입 니 다.여기 서 링크 삭 제 를 누 르 면 현재 클릭 한 단추 가 있 는 li 를 삭제 합 니 다.li 는 연 결 된 부모 노드 요 소 를 삭제 합 니 다.
분석 은 코드 를 두 드 리 는 것 보다 영원히 중요 하 다.먼저 분석 한 다음 에 코드 를 두 드 려 서 수 요 를 실현 해 야 한다.
일단 효과 도 를 볼 게 요.
기본적으로 내용 이 없습니다.
텍스트 필드 에 입력 하고 게시 버튼 을 누 르 면 댓 글 을 게시 할 수 있 습 니 다.보 내 고 삭제 하려 면 안의 삭제 버튼 을 누 르 면 댓 글 을 삭제 할 수 있 습 니 다.
작업 삭제 후:
JS 코드:
<script>
// ， ul
// ，
// 1.
var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
// 2.
btn.onclick = function () {
// li li li ul
var li = document.createElement('li');
if (text.value == '') {
alert(' ')
} else {
// value
//
li.innerHTML = text.value + '<a href="javascript:;" rel="external nofollow" rel="external nofollow" > </a>';
ul.insertBefore(li, ul.children[0]); //
// ul.appendChild(li);
// 3.
var removeBtn = document.querySelectorAll('a');
for (var i = 0; i < removeBtn.length; i++) {
removeBtn[i].onclick = function () {
ul.removeChild(this.parentNode);
}
}
}
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> </title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
li a {
float: right;
}
</style>
</head>
<body>
<textarea name="" id=""></textarea>
<button> </button>
<ul>
</ul>
<script>
// ， ul
// ，
// 1.
var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
// 2.
btn.onclick = function () {
// li li li ul
var li = document.createElement('li');
if (text.value == '') {
alert(' ')
} else {
// value
//
li.innerHTML = text.value + '<a href="javascript:;" rel="external nofollow" rel="external nofollow" > </a>';
ul.insertBefore(li, ul.children[0]); //
// ul.appendChild(li);
// 3.
var removeBtn = document.querySelectorAll('a');
for (var i = 0; i < removeBtn.length; i++) {
removeBtn[i].onclick = function () {
ul.removeChild(this.parentNode);
}
}
}
}
</script>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
