UI/UX_017
간단정리
1. document 객체
- HTML 페이지와 관련된 객체
- 모든 html 요소(태그)는 요소 노드
- 모든 html 속성은 속성 노드
- html 태그내에 있는 텍스트는 텍스트 노드
2. HTML 요소 가져오기
1) document.getElementById(id)
- 태그내에서 id 와 일치하는 객체
2) document.getElementsByTagName(name)
- 태그내에서 태그명과 일치하는 객체를 배열로 반환
3) document.getElementsByClassName(name)
- 태그내에서 클래스명과 일치하는 객체를 배열로 반환
3. HTML 태그 추가나 제거
1) document.createElement(element)
- html 요소(태그)를 생성
2) document.createTextNode(text)
- 텍스트 생성
3) element.removeChild(element)
- html 요소 삭제
4) document.appendChild(element)
- 생성된 객체에 노드 연결
4. HTML 요소 변경
1) element.innerHTML
- html 요소내에 텍스트를 생성하거나 변경
- <h1>제목태크</h1>
2) element.setAttribute(attribute, value)
- html 요소의 속성 값을 변경
3) element.style.property
- html 요소의 스타일 속성 변경
예문
Ex_01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
window.onload = function() {
var myElement = document.getElementById("intro");
myElement.style.color = "red";
};
</script>
</head>
<body>
<p id="intro">Hello World!</p>
<p id="demo">데모컨텐츠</p>
</body>
</html>
Ex_02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
window.onload = function() {
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML = myElement.innerHTML;
};
</script>
</head>
<body>
<p id="intro">Hello World!</p>
<p id="demo">데모컨텐츠</p>
</body>
</html>
Ex_03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
window.onload = function() {
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = x[2].innerHTML;
};
</script>
</head>
<body>
<p>p태그 1</p>
<p>p태그 2</p>
<p>p태그 3</p>
<p id="demo"></p>
</body>
</html>
Ex_04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
window.onload = function() {
var x = document.getElementsByClassName("example");
document.getElementById("demo").innerHTML = x[0].innerHTML;
// id 가 "demo" 인 객체의 내용에 클래스 네임이 example인 배열 객체중 0번째 내용을 넣기
};
</script>
</head>
<body>
<div class="example">첫번재 example 클래스</div>
<div class="example">두번재 example 클래스</div>
<p id="demo"></p>
</body>
</html>
Ex_05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
window.onload = function() {
var para = document.createElement("h1");
var t = document.createTextNode("텍스트노드");
para.appendChild(t);
document.body.appendChild(para);
};
</script>
</head>
<body>
</body>
</html>
Ex_06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<title>INDEX</title>
<script>
window.onload = function() {
var para = document.createElement("h1");
// h1 요소 노드 생성
var t = document.createTextNode("텍스트노드");
// 텍스트 노드 생성
para.appendChild(t);
// h1 요소 노드에 텍스트 노드 연결
document.getElementById("myDIV").appendChild(para);
// myDiv 아이디 값을 가지는 객체에 para 노드 연결
};
</script>
</head>
<body>
<div id="test">test 아이디 div</div>
<div id="myDIV"></div>
</body>
</html>
Ex_07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
window.onload = function() {
// 변수를 선언합니다.
var output = '';
output += '<ul>';
output += ' <li>JavaScript</li>';
output += ' <li>jQuery</li>';
output += ' <li>Ajax</li>';
output += '</ul>';
// demo 객체에 문자열을 넣어서 생성
document.getElementById("demo").innerHTML = output;
};
</script>
</head>
<body>
<div id="demo">
<h1>innerHTML 사용</h1>
</div>
</body>
</html>
Ex_08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
window.onload = function() {
var child = document.getElementById("p1");
document.body.removeChild(child);
// body 문서 바로 아래에 위치해 있는 p1 요소 삭제
};
</script>
</head>
<body>
<p id='p1'>첫째 단락</p>
<p>둘째 단락</p>
</body>
</html>
Ex_09
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
window.onload = function() {
// 변수를 선언합니다.
var img = document.createElement("img");
img.setAttribute("src", "img/mysql.jpg");
img.setAttribute("width", 500);
img.setAttribute("height", 350);
// 노드를 연결합니다.
document.getElementById("myDIV").appendChild(img);
};
</script>
</head>
<body>
<div id="myDIV"></div>
</body>
</html>
Ex_10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<script>
window.onload = function() {
// 변수를 선언합니다.
document.getElementById("myAnchor").setAttribute("href",
"http://www.naver.com");
document.getElementById("myAnchor").setAttribute("target", "_blank");
document.getElementById("myAnchor").innerHTML = "네이버";
};
</script>
</head>
<body>
<a id="myAnchor" href="http://www.seoulit.co.kr">학원홈페이지</a>
</body>
</html>
Ex_11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<style>
td {
border: 1px solid #333333;
width: 50px;
height: 50px;
text-align: center;
}
</style>
<script>
window.onload = function() {
var tableTag = document.createElement("table");
// table 요소 생성
var trTag = document.createElement("tr");
// tr 요소 생성
var tdTag = document.createElement("td");
// td 요소 생성
var node = document.createTextNode("테이블");
// td 안에 들어갈 텍스트 생성
tdTag.appendChild(node);
// td 요소에 텍스트 노드를 연결
trTag.appendChild(tdTag);
// tr 요소에 td 연결
tableTag.appendChild(trTag);
// table 요소에 tr 연결
document.getElementById("div1").appendChild(tableTag);
// 부모 노드인 div에 table 요소 연결
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
Ex_12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<style>
div {
width: 300px;
height: 150px;
background-color: #FFFF00;
font-size: 20px;
}
</style>
<script>
function myFunction() {
var x = document.getElementById("myForm").name;
var x2 = document.getElementById("myForm").length;
var x3 = document.getElementById("myForm").action
document.getElementById("test").innerHTML = "form 이름은 : " + x
+ "<br />";
document.getElementById("test").innerHTML += "form 요소갯수 : " + x2
+ "<br />";
document.getElementById("test").innerHTML += "form 전송할 경로: " + x3;
}
</script>
</head>
<body>
<form id="myForm" name="test" method="post" action="test.html">
<input type="text" id="myText" value="홍길동">
</form>
<button onclick="myFunction()">버튼을 눌러보세용</button>
<div id="test"></div>
</body>
</html>
Ex_13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<style>
div {
width: 300px;
height: 150px;
background-color: #FFFF00;
font-size: 20px;
}
</style>
<script>
function myFunction() {
var x2 = document.getElementById("myForm").elements[1].value;
//var x2 = document.test.fname.value;
//var x2 = document.getElementById("myText").value;
document.getElementById("demo").innerHTML = x2;
}
</script>
</head>
<body>
<form id="myForm" name="test" method="post" action="test.html">
First name: <input type="text" id="myText" name="fname" value="박지성"><br />
Last name: <input type="text" name="lname" value="김연아"><br/ >
<input type="checkbox" name="ctest" value="여성"><br/ >
</form>
<button onclick="myFunction()">버튼을 눌러보세용</button>
<div id="demo"></div>
</body>
</html>
Ex_14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<style>
div {
width: 300px;
height: 150px;
background-color: #FFFF00;
font-size: 20px;
}
</style>
<script>
function check() {
document.getElementById("myCheck").checked = true;
}
function uncheck() {
document.getElementById("myCheck").checked = false;
}
</script>
</head>
<body>
<input type="checkbox" id="myCheck">
<button onclick="check()">체크합니다.</button>
<button onclick="uncheck()">체크해제합니다.</button>
</body>
</html>
Ex_15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<style>
div {
width: 300px;
height: 150px;
background-color: #FFFF00;
font-size: 20px;
}
</style>
<script>
window.onload = function() {
var box1 = document.getElementById("myForm").elements[0];
box1.onclick = myFunction;
}
function myFunction() {
for (var i = 1; i < 4; i++) {
var box = document.getElementById("myForm").elements[i];
box.checked = true;
}
}
</script>
</head>
<body>
<form id="myForm" name="test">
<input type="checkbox"> <input type="checkbox" value="aa">aa
<input type="checkbox" value="aa">bb <input type="checkbox"
value="aa">cc
</form>
</body>
</html>
Ex_16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<style>
div {
width: 300px;
height: 150px;
background-color: #FFFF00;
font-size: 20px;
}
</style>
<script>
function myFunction() {
var x = document.getElementById("mySelect").options.length;
var x2 = document.getElementById("mySelect").options[0].text;
var x3 = document.getElementById("mySelect").options[1].value;
document.getElementById("demo").innerHTML = x;
document.getElementById("demo").innerHTML += x2;
document.getElementById("demo").innerHTML += x3;
}
</script>
</head>
<body>
<select id="mySelect">
<option value="1">Apple</option>
<option value="2">Pear</option>
<option value="3">Banana</option>
<option value="4">Orange</option>
</select>
<button onclick="myFunction()">버튼을 눌러보세용</button>
<div id="demo"></div>
</body>
</html>
Ex_17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<style>
div {
width: 300px;
height: 150px;
background-color: #FFFF00;
font-size: 20px;
}
</style>
<script>
function myFunction() {
var x = document.getElementById("mySelect").options.length;
var x2 = document.getElementById("mySelect").options[0].text;
var x3 = document.getElementById("mySelect").options[1].value;
document.getElementById("demo").innerHTML = x;
document.getElementById("demo").innerHTML += x2;
document.getElementById("demo").innerHTML += x3;
}
</script>
</head>
<body>
<select id="mySelect">
<option value="1">Apple</option>
<option value="2">Pear</option>
<option value="3">Banana</option>
<option value="4">Orange</option>
</select>
<button onclick="myFunction()">버튼을 눌러보세용</button>
<div id="demo"></div>
</body>
</html>
Ex_18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<style>
div {
width: 500px;
height: 150px;
background-color: #FFFF00;
font-size: 20px;
}
</style>
<script>
function myFunction() {
var carList = document.getElementById("car");
var selCarT = carList.options[carList.selectedIndex].text;
var selCarV = carList.options[carList.selectedIndex].value;
document.getElementById("demo").innerHTML = "제가 사고싶은 차종은 : ";
document.getElementById("demo").innerHTML += selCarT + " 이며 가격은";
document.getElementById("demo").innerHTML += selCarV + " 입니다. 사주세용";
}
</script>
</head>
<body>
<select id="car">
<option value="100만원">아우디</option>
<option value="200만원">벤틀리</option>
<option value="300만원">뉴비틀</option>
<option value="400만원">미니쿠페</option>
</select>
<button onclick="myFunction()">버튼을 눌러보세용</button>
<div id="demo"></div>
</body>
</html>
Ex_19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INDEX</title>
<style>
div {
width: 300px;
height: 150px;
background-color: #FFFF00;
font-size: 20px;
}
</style>
<script>
window.onload = function() {
var box1 = document.getElementById("myForm").elements[0];
box1.onclick = myFunction;
}
function myFunction() {
var c = document.getElementById("myForm").elements[0].checked;
for (var i = 1; i < 4; i++) {
var box = document.getElementById("myForm").elements[i];
box.checked = c;
}
}
</script>
</head>
<body>
<form id="myForm" name="test">
<input type="checkbox"> <input type="checkbox" value="aa">aa
<input type="checkbox" value="aa">bb <input type="checkbox"
value="aa">cc
</form>
</body>
</html>