프로그래밍/JavaScript 자바스크립트
자바스크립트 - DOM
Heidong
2021. 10. 6. 21:36
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function getElements(attrName, attrValue) {
// 모든 요소
var elements = document.getElementsByTagName("*");
var founds = [];
for(var i=0; i<elements.length; i++) {
if(elements[i].hasAttribute(attrName) && elements[i].getAttribute(attrName).toLowerCase() === attrValue.toLowerCase()) {
founds.push(elements[i]);
}
}
return founds;
}
function result() {
var s;
// id로 접근
var name = document.getElementById("name").value;
// name으로 접근
var age = document.getElementsByName('age')[0].value;
// tag로 접근
var birth = document.getElementsByTagName("input")[2].value;
// 선택자로 접근
// var chk = document.querySelector("input[type=checkbox]").checked;
// 속성으로 접근
var chk = getElements("type", "checkbox")[0].checked;
// class 속성으로 접근
var tel = document.getElementsByClassName("telClass")[0].value;
s = "<p>이름 : " + name +"</p>";
s += "<p>나이 : " + age +"</p>";
s += "<p>생년월일 : " + birth +", 양력:"+chk+"</p>";
s += "<p>전화번호 : " + tel +"</p>";
// document.getElementById("layout").innerText = s;
// document.getElementById("layout").innerHTML = s;
// 선택자로 접근(클래스등 동일한 이름의 선택자가 두개이상이면 처음 객체만 찾음)
document.querySelector("#layout").innerHTML = s;
// 스타일 변경
var inputs = document.getElementsByTagName("input");
for(var i = 0; i<inputs.length; i++) {
if(inputs[i].type === "text") {
inputs[i].style.border = "1px solid red";
}
}
// document.getElementById("layout").style.background = '#ff0';
// background-color
document.getElementById("layout").style.backgroundColor = '#ff0';
}
</script>
</head>
<body>
<h3>DOM</h3>
<div>
<p>이름 : <input type="text" id="name"> </p>
<p>나이 : <input type="text" name="age"> </p>
<p>생년월일 : <input type="text"> <input type="checkbox"> 양력 </p>
<p>전화번호 : <input type="text" class="telClass"> </p>
<p>
<button type="button" onclick="result()">확인</button>
</p>
</div>
<div id="layout"></div>
</body>
</html>요소에 접근하기 위한 방법은 엄청 다양하다.
document.getElementsByTagName("*"); 을 통해서 모든 요소에 접근 할 수 있고 아니면 특정 태그나 클래스 이름 아이디 등등 접근할 방법이 많다.
document.getElementById("name").value; 아이디로 접근
document.getElementsByName('age')[0].value; 네임으로 접근
document.getElementsByClassName("telClass")[0].value; 클래스로 접근
querySelector("#layout").innerHTML = s; 쿼리 셀렉터로 접근
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function fun() {
// alert("음 언제 배웠지 ???");
alert(event.currentTarget.firstChild.nodeValue);
}
// 속성 값 및 자식 노드수 알아보기
function sub1() {
var str;
var div = document.getElementById("layout");
// 속성값 가져오기
str = div.getAttribute("style");
// 자식 노드 정보(childNodes:문자열,공백,엔터등도검색)
// str += "\n자식수 : " + div.childNodes.length; // 처음실행시:7
// console.log(div.childNodes); // [text, p, text, p, text, p, text]
// 자식 노드 정보(children:태그만)
str += "\n자식수 : " + div.children.length; // 처음실행시:3
console.log(div.children); // [p, p, p]
alert(str);
}
// 노드를 마지막에 추가
function sub2() {
var div = document.getElementById("layout");
var node = document.createElement("p");
node.setAttribute("onclick", "fun();") // click 이벤트 추가
var textNode = document.createTextNode("마지막 !!!");
node.appendChild(textNode);
div.appendChild(node);
}
// 노드를 특정 노드 앞에 추가
function sub3() {
var div = document.getElementById("layout");
var node = document.createElement("p");
var textNode = document.createTextNode("앞 !!!");
node.appendChild(textNode);
div.insertBefore(node, div.childNodes[0]);
// div.insertBefore(node, div.childNodes[1]);
// div.insertBefore(node, div.children[1]);
}
// 노드 삭제
function sub4() {
var div = document.getElementById("layout");
if(div.childNodes.length > 1) {
div.removeChild(div.childNodes[1]);
}
}
// 스타일 없애기
function sub5() {
var div = document.getElementById("layout");
// div.style.border = "none";
div.style.removeProperty("border");
}
// 처음 p 태그 세개를 클릭하면 요소의 text 값 가져오기
window.onload = function(){
var ps = document.getElementById("layout").children;
for(var i=0; i<ps.length; i++) {
ps[i].addEventListener("click", function(){
alert(this.firstChild.nodeValue); // 태그의 텍스트 가져오기
});
}
};
</script>
</head>
<body>
<h3>노드 추가 및 삭제</h3>
<div id="layout" style="width:300px; height: 300px; border: 1px solid #f00;">
<p>자바</p>
<p>안드로이드</p>
<p>프레임워크</p>
</div>
<hr>
<div>
<p>
<button type="button" onclick="sub1()">노드정보</button>
<button type="button" onclick="sub2()">노드추가</button>
<button type="button" onclick="sub3()">특정노드앞에추가</button>
<button type="button" onclick="sub4()">노드삭제</button>
<button type="button" onclick="sub5()">스타일없애기</button>
</p>
</div>
</body>
</html>속성 값 가져오기 = getAttribute() 먼저 요소를 가져온 변수에 대입 해야함.
childNodes.length 랑 children.length의 결과는 다르다.
공백이나 엔터 같은것들도 포함 하는게 childNodes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
<h3>노드 찾기</h3>
<div>
<p><a>HTML</a></p>
<p class="css"><a>CSS</a></p>
<p>
<a>javascript</a>
<span>jquery</span>
</p>
</div>
<hr>
<div class="pp">
<div class="p">
<div class="c1">javascript</div>
<div class="c2">css</div>
</div>
</div>
<script type="text/javascript">
// 모든 p 태그
var list = document.getElementsByTagName("p");
// 자식검색 : text(공백,문자열,엔터등), tag 검색
var c1 = list[2].childNodes;
// 자식검색 : tag만 검색
var c2 = list[2].children;
// a태그만 검색
var c3 = list[2].getElementsByTagName("a");
console.log(c1); // [text,a,text,span]
console.log(c2); // [a,span]
console.log(c3); // [a]
var child = document.querySelector(".c1");
// 부모 검색
var p1 = child.parentNode; // 부모노드, 빈공간도 포함
var p2 = child.parentElement; // 부모노드만
console.log(p1);
console.log(p2);
// 형제
var s1 = child.nextSibling; // 텍스트(빈공간)도 포함
var s2 = child.nextElementSibling; // 태그만
console.log(s1); // #text
console.log(s2); // <div class="c2">css</div>
// 텍스트
var s3 = s2.firstChild.nodeValue;
console.log(s3);
</script>
</body>
</html>검색을 위해서는 배열을 사용해야함.
모든 p 태그를 가져와서 리스트에 담으면 리스트가 되는데
그걸 인덱스를 활용해서 뽑아냄
== 공부 해야 할 소스
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
* {
margin: 0; padding: 0;
box-sizing: border-box;
}
body {
font-size: 14px;
font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
}
a {
color: #000;
text-decoration: none;
cursor: pointer;
}
a:active, a:hover {
text-decoration: underline;
color: #F28011;
}
.btn {
color: #333;
border: 1px solid #333;
background-color: #fff;
padding: 4px 10px;
border-radius: 4px;
font-weight: 500;
cursor:pointer;
font-size: 14px;
font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
vertical-align: baseline;
}
.btn:hover, .btn:active, .btn:focus {
background-color: #e6e6e6;
border-color: #adadad;
color:#333;
}
.boxTF {
border: 1px solid #999;
padding: 5px 5px;
background-color: #fff;
border-radius: 4px;
font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
vertical-align: baseline;
}
.selectField {
border: 1px solid #999;
padding: 4px 5px;
border-radius: 4px;
font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
vertical-align: baseline;
}
textarea:focus, input:focus {
outline: none;
}
.title {
width:100%;
font-size: 16px;
font-weight: bold;
padding: 13px 0;
}
.container {
width: 800px;
margin: 30px auto;
}
.table {
width: 100%; border-spacing: 0; border-collapse: collapse;
}
.table tr th {
padding: 7px 0;
background: #eee;
}
#tbScore input {
/* border:1px solid #999; */
border: none;
padding:5px 5px;
width:100%;
height: 30px;
}
#tbScore span {
cursor: pointer;
}
tr.over {background: #f5fffa;}
</style>
<script type="text/javascript">
function isValidDateFormat(data){
var regexp = /[12][0-9]{3}[\.|\-|\/]?[0-9]{2}[\.|\-|\/]?[0-9]{2}/;
if(! regexp.test(data))
return false;
regexp=/(\.)|(\-)|(\/)/g;
data=data.replace(regexp, "");
var y=parseInt(data.substr(0, 4));
var m=parseInt(data.substr(4, 2));
if(m<1||m>12)
return false;
var d=parseInt(data.substr(6));
var lastDay = (new Date(y, m, 0)).getDate();
if(d<1||d>lastDay)
return false;
return true;
}
function isValidNumberFormat(data){
var format=/^(\d+)$/;
return format.test(data);
}
function isValidScoreFormat(data){
if(! isValidNumberFormat(data)) {
return false;
}
if(parseInt(data)<0||parseInt(data)>100) {
return false;
}
return true;
}
function init() {
// 이벤트 등록
var inputForm = document.getElementById('inputForm');
var inputs = inputForm.getElementsByTagName('input');
for (var i = 0; i < 6 /*inputs.length*/; i++ ) {
inputs[i].onkeypress = function(){ fnReturn('inputForm'); };
inputs[i].onkeyup = function(){ fnKeyup('inputForm'); };
}
}
function fnReturn(id) {
var inputForm = document.getElementById(id);
var inputs = inputForm.getElementsByTagName('input');
var obj;
// 이벤트를 발생시킨 객체
if (event.srcElement) obj = event.srcElement;
else if (event.target) obj = event.target;
if (event.keyCode == 13) {
for (var i = 0; i < inputs.length; i++ ) {
if(i<5 && obj==inputs[i]) {
inputs[i+1].focus();
break;
} else if(i==5 && obj==inputs[i]) {
if(id=="inputForm")
insertScore();
else
updateOk(id);
break;
}
}
}
}
function fnKeyup(id) {
var inputForm = document.getElementById(id);
var inputs = inputForm.getElementsByTagName('input');
var obj;
if (event.srcElement) obj = event.srcElement;
else if (event.target) obj = event.target;
var idx = 0;
for (var i = 0; i < inputs.length; i++ ) {
if(obj==inputs[i]) {
idx = i;
break;
}
}
if(idx>=3 && idx<=5) {
var kor=inputs[3].value.trim();
var eng=inputs[4].value.trim();
var mat=inputs[5].value.trim();
var k = isValidScoreFormat(kor) ? parseInt(kor):0;
var e = isValidScoreFormat(eng) ? parseInt(eng):0;
var m = isValidScoreFormat(mat) ? parseInt(mat):0;
var tot=k+e+m;
var ave=Math.floor(tot/3);
if(!kor && !eng && !mat) {
tot="";
ave="";
}
inputs[6].value = tot;
inputs[7].value = ave;
}
}
window.addEventListener('load', function() {
init();
}, false);
function check(id) {
var inputForm = document.getElementById(id);
var inputs = inputForm.getElementsByTagName('input');
var s;
for (var i = 0; i < inputs.length; i++ ) {
s=inputs[i].value.trim();
if(! s) {
alert("값을 입력 하세요.");
inputs[i].focus();
return false;
}
if(i==2 && !isValidDateFormat(s)) {
alert("날짜의 형식이 잘못 되었습니다.");
inputs[i].focus();
return false;
}
if(i>=3 && i<=5 && (! isValidScoreFormat(s))) {
alert("점수를 정확히 입력 하세요.");
inputs[i].focus();
return false;
}
}
return true;
}
var nID=1;
function insertScore() {
if(! check('inputForm')) {
return;
}
var inputForm = document.getElementById('inputForm');
var inputs = inputForm.getElementsByTagName('input');
var tbScore = document.getElementById('tbScore');
var tr = tbScore.getElementsByTagName('tr');
if(tr.length==1) {
nID=1;
}
nID++;
var id="row"+nID;
var row, cell, span;
var tot, ave, s;
row=document.createElement("tr");
row.setAttribute("id", id);
row.setAttribute("height", "30");
row.setAttribute("align", "center");
row.onmouseover=function() {this.setAttribute("class", "over");};
row.onmouseout=function() {this.removeAttribute("class");};
// 학번, 이름, 생년월일, 국어, 영어, 수학
tot=0;
for(var i=0; i<6; i++) {
s=inputs[i].value.trim();
cell=document.createElement("td");
cell.appendChild(document.createTextNode(s));
row.appendChild(cell);
if(i>=3&&i<=5) {
tot += parseInt(s);
}
inputs[i].value="";
}
ave=Math.floor(tot/3);
inputs[6].value="";
inputs[7].value="";
inputs[0].focus();
cell=document.createElement("td");
cell.appendChild(document.createTextNode(tot));
row.appendChild(cell);
cell=document.createElement("td");
cell.appendChild(document.createTextNode(ave));
row.appendChild(cell);
cell=document.createElement("td");
span=document.createElement("span");
span.appendChild(document.createTextNode("수정"));
span.onclick=function() { updateScore(id); };
// span.setAttribute("style", "cursor:pointer;");
cell.appendChild(span);
cell.appendChild(document.createTextNode(" | "));
span=document.createElement("span");
span.appendChild(document.createTextNode("삭제"));
span.onclick=function() { deleteScore(id); };
// span.setAttribute("style", "cursor:pointer;");
cell.appendChild(span);
row.appendChild(cell);
tbScore.appendChild(row);
}
var arr=[];
function updateScore(id) {
var row=document.getElementById(id);
var tds = row.getElementsByTagName("td");
var str, s, input;
for(var i=0; i<tds.length; i++) {
if(i != tds.length-1) {
arr[i] = tds[i].innerText;
s="";
if(i==6||i==7)
s=" readonly='readonly' style='border: none; text-align: center;' "
else
s=" onfocus='this.select();' ";
tds[i].innerText = "";
str = "<input type='text' value='" + arr[i] + "'" + s +">";
tds[i].innerHTML = str;
input = tds[i].getElementsByTagName('input')[0];
input.onkeypress = function(){ fnReturn(id); };
input.onkeyup = function(){ fnKeyup(id); }
} else {
tds[i].innerText = "";
str = "<span onclick='updateOk(\""+id+"\");'>완료</span> | <span onclick='updateCancel(\""+id+"\");'>취소</span>";
tds[i].innerHTML = str;
}
}
}
function updateOk(id) {
if(! check(id)) {
return;
}
var row=document.getElementById(id);
var tds = row.getElementsByTagName("td");
var input, str;
for(var i=0; i<tds.length; i++) {
if(i != tds.length-1) {
input = tds[i].getElementsByTagName('input')[0];
tds[i].innerText = input.value;
} else {
tds[i].innerText = "";
str = "<span onclick='updateScore(\""+id+"\");'>수정</span> | <span onclick='deleteScore(\""+id+"\");'>삭제</span>";
tds[i].innerHTML = str;
}
}
}
function updateCancel(id) {
var row=document.getElementById(id);
var tds = row.getElementsByTagName("td");
for(var i=0; i<tds.length; i++) {
if(i != tds.length-1) {
tds[i].innerText = "";
tds[i].innerText = arr[i];
} else {
tds[i].innerText = "";
str = "<span onclick='updateScore(\""+id+"\");'>수정</span> | <span onclick='deleteScore(\""+id+"\");'>삭제</span>";
tds[i].innerHTML = str;
}
}
}
function deleteScore(id) {
if(! confirm("데이터를 삭제 하시겠습니까 ? ")) {
return;
}
var tb= document.getElementById("tbScore");
var row=document.getElementById(id);
tb.removeChild(row);
}
</script>
</head>
<body>
<div class="container">
<div class="title">
<h3><span>|</span> 성적 처리</h3>
</div>
<form name="scoreForm" method="post">
<table class="table" border="1">
<thead>
<tr>
<th width="80">학번</th>
<th width="100">이름</th>
<th width="100">생년월일</th>
<th width="80">국어</th>
<th width="80">영어</th>
<th width="80">수학</th>
<th width="80">총점</th>
<th width="80">평균</th>
<th>변경</th>
</tr>
</thead>
<tbody id="tbScore">
<tr id="inputForm" align="center">
<td><input type="text" name="hak" id="hak" onfocus="this.select();"></td>
<td><input type="text" name="name" id="name" onfocus="this.select();"></td>
<td><input type="text" name="birth" id="birth" onfocus="this.select();"></td>
<td><input type="text" name="kor" id="kor" onfocus="this.select();"></td>
<td><input type="text" name="eng" id="eng" onfocus="this.select();"></td>
<td><input type="text" name="mat" id="mat" onfocus="this.select();"></td>
<td><input type="text" name="tot" id="tot" readonly="readonly" style="border: none; text-align: center;"></td>
<td><input type="text" name="ave" id="ave" readonly="readonly" style="border: none; text-align: center;"></td>
<td>
<button type="button" class="btn" onclick="insertScore();" style="width: 100%;">등록하기</button>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
각 칸에 대한 요소들 확인하기
스타일 및 CSS 확인
정규식 확인
스크립트 흐름 파악
공부 해야함
반응형