728x90
반응형
1. 노드 리스트란?
▷ querySelectorAll() 메서드를 사용해 가져온 여러 개의 노드를 저장한 것입니다.
▷ 배열과 유사합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Programming</title>
<link rel="stylesheet" href="css/nodelist.css">
</head>
<body>
<h1>Web Programming</h1>
<ul id="itemList">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</body>
</html>
li를 배열과 유사한 형식으로 찾아줍니다!
2. 노드 추가하기
◎ 텍스트 노드를 사용하는 새로운 요소 추가하기
▷ 요소 노드 만들기 - createElement() 메서드
ex) var newP = document.createElement("p") → p, div, a, h1 등의 노드를 만들어줍니다.
▷ 텍스트 노드 만들기 - createTextNode() 메서드
ex) var textNode = document.createTextNode("DOM은 document object model") → 노드 내부에 텍스트를 만들어줍니다.
▷ 자식 노드 연결하기 - appendChild() 메서드
ex) 부모노드.appendChild(자식노드)"
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style>
#container{
width:500px;
margin:10px auto;
padding:20px;
}
#info {
margin-top:20px;
}
</style>
</head>
<body>
<div id="container">
<h1>DOM을 공부합시다</h1>
<a href="#" onclick="addP(); this.onclick='';">더 보기</a>
<!-- 링크를 클릭하면 addP()함수가 한 번만 실행되도록 합니다. -->
<a href="#" onclick="addNum()">수 추가</a>
<div id="info"></div>
<div id="no"></div>
</div>
<script>
function addP(){
var newP = document.createElement("p");
var txtNode = document.createTextNode("DOM은 document object model의 줄임말입니다.");
newP.appendChild(txtNode);
document.getElementById("info").appendChild(newP);
}
//수 추가를 눌렀을 때 숫자가 1부터 계속 1씩 증가 되어 출력 되로록 만드시오.
var i = 1;
function addNum(){
var newNum = document.createElement("p");
var addNum = document.createTextNode(i++);
newNum.appendChild(addNum);
document.getElementById("no").appendChild(newNum);
}
</script>
</body>
</html>1. '더 보기' 버튼을 누르면 텍스트 노드가 추가됩니다.
2. '수 추가' 버튼을 누르면 숫자 text가 1씩 증가하면서 추가됩니다.
→ 이때 배열로 받게 되며, 클릭한 수만큼 배열이 생성됩니다.
◎ 속성 값이 있는 새로운 요소 추가하기
▷ 요소 노드 만들기 - creatElement() 메서드
ex) document.creatAttribute("img")
▷ 속성 노드 만들기 - createAttribute() 메서드
ex) document.creatAttribute(속성명)
▷ 속성 노드 연결하기 - setAttributeNode() 메서드
ex) 요소명.setAttributeNode(속성노드)
▷ 자식 노드 연결하기 - appendChild() 메서드
ex) 부모노드.appendChild(자식노드)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style>
#container{
width:500px;
margin:10px auto;
padding:20px;
}
#info {
margin-top:20px;
}
</style>
</head>
<body>
<div id="container">
<h1>DOM을 공부합시다</h1>
<a href="#" onclick="addContents(); this.onclick='';">더 보기</a>
<div id="info"></div>
</div>
<script>
function addContents(){
var newP = document.createElement("p");
var txtNode = document.createTextNode("DOM은 document object model의 줄임말입니다.");
newP.appendChild(txtNode);
var newImg = document.createElement("img");
var srcNode = document.createAttribute("src");
var altNode = document.createAttribute("alt");
srcNode.value = "images/dom.jpg";
altNode.value = "돔 트리 예제 이미지";
newImg.setAttributeNode(srcNode);
newImg.setAttributeNode(altNode);
document.getElementById("info").appendChild(newP);
document.getElementById("info").appendChild(newImg);
}
</script>
</body>
</html>img 속성 노드를 추가해줍니다.
◎ 버튼 클릭시 텍스트 추가 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Programming</title>
<link rel="stylesheet" href="css/nodelist.css">
</head>
<body>
<div id="container">
<h1>Web Programming</h1>
<p>공부할 주제를 기록해 보세요</p>
<form action="">
<input type="text" id="subject" autofocus>
<button onclick="newRegister(); return false;">추가</button>
<!-- button에 return false; -> 폼 안에서 내용 전송 기능을 끄기 : 이벤트 기능만 처리 -->
<!-- 폼은 text와 button을 연결시켜 주기 위해서 사용 -->
</form>
<hr>
<ul id="itemList"></ul>
</div>
<script>
function newRegister(){
var newItem = document.createElement("li"); // UL 아래에 들어갈 li 태그 생성
var subject = document.querySelector("#subject"); // text 상자를 지정
var newText = document.createTextNode(subject.value); // 텍스트 입력 : text 상자 안에 내용 입력
newItem.appendChild(newText); // li와 텍스트 내용을 연결
document.querySelector("#itemList").appendChild(newItem); //ul 아래에 li 요소를 연결
// var itemList = document.querySelector("#itemList"); // 웹 문서에서 부모 노드 가져오기
// itemList.insertBefore(newItem, itemList.childNodes[0]); // 자식 노드중 첫번째 노드 앞에 추가
subject.value = ""; //text 상자 내용을 초기화
}
</script>
</body>
</html>form 내부 ul 아래에 li 태그를 생성합니다.
위의 코드를 실행하면 텍스트 상자 아래에 입력한 값이 누적해서 출력됩니다.
script에 주석처리 되어 있는 부분을 실행하면 입력한 값이 맨 위로 누적해서 출력됩니다.
3. 노드 삭제하기
▷ 노드를 삭제할 때는 부모 노드에서 자식 노드를 삭제해야 합니다.(부모 노드부터 찾아야 합니다.)
◎ parentNode 프로퍼티 : 현재 노드의 부모 노드에 접근해서 부모 노드의 요소 노드를 반환
ex) 노드.parentNode
◎ remove 메서드 : 자식 노드 삭제
ex) 부모노드.removeChlid(자식노드)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Programming</title>
<link rel="stylesheet" href="css/nodelist.css">
</head>
<body>
<div id="container">
<h1>Web Programming</h1>
<p>공부할 주제를 기록해 보세요. </p>
<p>공부가 끝난 것은 클릭해서 삭제할 수 있습니다.</p>
<form action="">
<input type="text" id="subject" autofocus>
<button onclick="newRegister(); return false;">추가</button>
</form>
<hr>
<ul id="itemList"> </ul>
</div>
<script>
function newRegister() {
var newItem = document.createElement("li"); // 요소 노드 추가
var subject = document.querySelector("#subject"); // 폼의 텍스트 필드
var newText = document.createTextNode(subject.value); // 텍스트 필드의 값을 텍스트 노드로 만들기
newItem.appendChild(newText); // 텍스트 노드를 요소 노드의 자식 노드로 추가
var itemList = document.querySelector("#itemList"); // 웹 문서에서 부모 노드 가져오기
itemList.insertBefore(newItem, itemList.childNodes[0]); // 자식 노드중 첫번째 노드 앞에 추가
subject.value="";
var items = document.querySelectorAll("li");
for(i = 0; i < items.length; i++){
items[i].addEventListener("click", function(){
if(this.parentNode){ // 부모 노드가 있다면
this.parentNode.removeChild(this); // 부모 노드에서 삭제
}
})
}
}
</script>
</body>
</html>위의 코드는 제가 입력한 값들을 click하면 해당 값이 사라지게 됩니다.
노드를 추가하거나 삭제하는 것을 알아보았는데요 이 부분에서는 입력하는 것이 text인지 html인지 잘 구분해야합니다.
그래서 출력을 했을때 <br> 같은 한 줄 내리기가 적용이 안된다면 아마 text로 입력 받을 거에요!
역시나 응용은 쉽지않네요ㅎㅎ
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
728x90
반응형
'FrontEnd > java script' 카테고리의 다른 글
| [java script] Vue.js 입문 start (0) | 2022.12.21 |
|---|---|
| [java script] DOM 노드 추가, 삭제 연습 문제 (0) | 2022.12.20 |
| [java script] 구구단 출력하기 예시 (0) | 2022.12.19 |
| [java script] addEventListener의 이벤트 사용 예시 (2) | 2022.12.19 |
| [java script] addEventListener의 이벤트 종류 (0) | 2022.12.19 |
