input태그에 사용자가 입력한 내용 받아오기
텍스트필드와 같이 사용자가 입력한 내용을 자바스크립트로 받아올때는
.value프로퍼티를 이용한다.
먼저 입력값을 받아올 input태그를 먼저 선택해서 변수에 담아둔 다음
변수명.value를 해주면 현재 입력되어있는 내용을 자바스크립트로 가져올 수 있다.
[기본형]
1. 요소선택.value
: 현재 요소에 입력된 값을 가져온다.
2. 요소선택.value ='값'
: 현재 요소에 입력된 값을 바꾼다.
노드 삭제하기
DOM트리에서 특정 노드를 삭제할때 특정 노드를 삭제할때 반드시 기억해야 하는 것은
부모노드에서 자식 노드를 삭제해야 한다는 것이다.
즉, 삭제해야 할 노드가 있다면 반드시 부모 노드를 먼저 찾아야한다.
그래서 노드를 삭제하는 메서드 외에도 부모노드를 찾는 프로퍼티가 필요하다.
parentNode 프로퍼티
부모노드를 찾고 난 후 부모노드 안에 있는 자식노드를 삭제하고 싶다면
removeChild()메서드를 이용한다.
이름에서도 알 수 있듯이 자식노드를 삭제하는 메서드이다.
예를 들어 li노드를 삭제하려면 li.parentNode.removeChild(li)이런식으로
작성한다.
[기본형]
부모노드.removeChild(자식노드)
html
<body>
<div id="container">
<h1>Web Programming</h1>
<p>공부할 주제를 기록해 보세요</p>
<form action="">
<input type="text" id="subject" autofocus />
<button onclick="newRegister(); return false;">추가</button>
</form>
<hr />
<ul id="itemList"></ul>
</div>자바스크립트
// 1. 새로운 요소를 만들고 연결하기
function newRegister() {
let newItem = document.createElement("li"); //<li></li>
let subject = document.querySelector("#subject"); //input 태그를 선택
// input태그에 사용자가 입력한 내용(value)를 텍스트 노드로 생성
let newText = document.createTextNode(subject.value);
// 필드에 입력된 값을 li에 추가함
newItem.appendChild(newText);
// 부모노드인 ul을 선택
let itemList = document.querySelector("#itemList");
// ul안에 동적으로 생성한 li를 추가하기
itemList.appendChild(newItem);
// 다음입력을 위해 텍스트 필드를 비우기
subject.value = "";
// 지우기 시작
// 지우려는 li의 부모노드 찾기
// document.querySelectorAll("li")[1].parentNode; 이 줄은 중요한 건 아니지만 한 번 찾아보기
// 추가된 li들을 모두 가져온 것임
let items = document.querySelectorAll("li");
for (let i = 0; i < items.length; i++) {
items[i].addEventListener("click", function () {
// 부모노드가 있다면 부모노드에서 삭제해라
if (this.parentNode) this.parentNode.removeChild(this);
});
}
}
.insertbefore()
appendChild()메서드를 이용하면 새로운 노드를 부모노드의 맨 끝에 추가한다.
추가되는 노드의 순서를 바꿔 표시하려면 부모노드와 자식 노드의 관계를 파악한 후에 마지막 자식 노드를 맨 앞에 추가하면 된다.
itemList의 자식 노드 중 맨 앞의 자식 노드는 itemList.childNodes[0]으로 접근할 수 있다.
이 노드 앞에 새로운 노드를 추가하려면 .insterBefore()메서드를 사용할 수 있다.
[기본형]
부모노드.insterBefore(추가할노드, 노드위치)
안녕하세요 ! 발전을 위해 매일 도전하는 퍼블리셔 류영경입니다.