⚡ Node로 생성
Dom객체와 Node객체 차이
angular,react,vue 등에서 node가 쓰여서 node를 많이쓰는 추세!
createElement : html태그를 생성하는 함수
<body>
<div id="box"></div>
</body>
<script>
//--DOM or Node 건들시 스크립트는 html 이후에 작성
var a = document.getElementById("box");
//DOM형태
var html = "<ol><li>공지사항</li></ol>" //dom객체
html += "<ol><li>공지사항2</li></ol>"
//a.innerHTML = html;
//Node형태
var ol = document.createElement("ol"); //ol태그생성
var li = document.createElement("li"); //li태그생성
var text = "공지사항";
li.append(text); //append : 해당 태그안에 값을 입력
ol.append(li);
a.append(ol);
</script>
- 반복문 - node로 생성
<body>
<div id="box"></div>
</body>
<script>
var menu = ["신규상품","이벤트상품","MD추천상품","고객센터"];
var box = document.getElementById("box")
var i;
for(i=0; i<menu.length; i++){
var sp = document.createElement("span");
sp.append(menu[i]);
box.append(sp);
}
</script>
⚡ Node 추가,삭제,중간삽입
append, prepend, before, after, insertBefore, remove, removeChild
<body>
<div id="box">
<label>강감찬</label>
<label>이순신</label>
</div><br><br>
<input type="button" value="노드추가1" onclick="aaa()">
<input type="button" value="노드추가2" onclick="bbb()">
<input type="button" value="노드추가3" onclick="ccc()">
<input type="button" value="노드중간삽입" onclick="ddd()">
<input type="button" value="노드삭제" onclick="eee()"> <br><br>
</body>
<script>
//HTML 해당 id 안에 객체를 생성
var html = document.getElementById("box");
var no=0;
//append,prepend : 해당 id기준 안쪽 위,아래
function aaa(){
var lb = document.createElement("label");
lb.append(no);
html.append(lb);
no++;
}
function ccc(){
var lb = document.createElement("label");
lb.append(no);
html.prepend(lb);
no++;
}
//before,after : 해당 id기준 바깥쪽 위,아래
function bbb(){
var lb = document.createElement("label");
lb.append(no);
html.after(lb);
no++;
}
//노드 중간삽입
//insertBefore : 노드가 있는 상황에서 해당 위치에 값을 추가할 때 사용
//id태그 기준 앞에 추가
function ddd(){
var lb = document.createElement("label");
lb.append(no);
html.insertBefore(lb,html.children[1]);
no++;
}
//노드삭제
//remove : 통째로 제거
//removeChild : 원하는 노드번호를 입력하여 삭제하는 방식
function eee(){
//html.remove();
//html.firstChild.remove();
html.removeChild(html.children[0]); //box안 첫번째 요소 삭제
}
</script>
⚡ split을 이용하여 node로 상품 출력하기
<body>
<!---
<li><input type="radio" name="product" value="모니터">모니터</li>
-->
<ul id="product"></ul>
</body>
<script>
var html = document.getElementById("product");
var prd = "키보드,마우스,스피커,모니터,CPU,메모리";
var arr_prd = prd.split(",");
var ea = arr_prd.length;
var w=0;
while(w<ea){
var li = document.createElement("li");
var la = document.createElement("label");
var inputs = document.createElement("input"); //input tag 생성
inputs.type="radio"; //input 속성
inputs.name="product"; //input name
inputs.value=arr_prd[w]; //input value
li.append(la);
la.append(inputs);
la.append(arr_prd[w]);
html.append(li);
w++;
}
</script>
⚡ 응용문제
<body>
<!--
게시물이 출력되도록 node로 코드를 작성하시오.
체크박스를 이용, 다음과같은 배열값을 출력하시오
<label><input type="checkbox">공지사항 게시물1</label>
-->
<div id="notice"></div>
</body>
<script>
var list = ["자바 앱을 빠르게 성능 튜닝",
"자바 18 릴리스의 꽃 심플 웹서버",
"REST의 현실적인 대안 방법",
"자바 17 1년만에 430% 성장"];
var noti = document.getElementById("notice");
var d=0;
do{
var label= document.createElement("label");
label.style.display="block";
var input = document.createElement("input");
input.type = "checkbox";
label.append(input);
label.append(list[d]);
noti.append(label);
d++;
}while(d<list.length);
</script>
⚡ forEach
<script>
var data = ["홍길동","강감찬","유관순","장보고"];
//배열 전용
data.forEach(function(a,b,c){
console.log(a,b,c);
//a: 데이터값(자기자신) , b:노드번호, c:배열전체 (인자값 암거나 써도 됨)
});
</script>