티스토리 뷰
03_SetAttribute
| setAttrubute | 요소의 속성값을 취득할 수 있다. |
| getAttribute | 요소의 속성을 설정할 수 있다. |
| removeAttribute | 요소의 속성값을 제거할 수 있다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div
{
position: fixed;
left: 100px;
top: 10px;
width: 200px;
height: 200px;
background: #718c00;
}
</style>
<script>
function createEle()
{
var bt = document.getElementById('bt');
function popup()
{
var div = document.createElement('div');
var a = document.createElement('a');
var txt = document.createTextNode('아이콕스');
a.appendChild(txt);
a.setAttribute('href','http://icoxpublish.com');
a.setAttribute('target','_blank');
a.setAttribute('title','새창');
div.appendChild(a);
document.body.appendChild(div);
}
bt.onclick = popup;
}
addEventListener('load',createEle);
</script>
</head>
<body>
<button id="bt">요소 생성</button>
</body>
</html>
| 1.일회성 함수 createEle()를 생성 2.getElementById를 통해 id가 bt인 것을 var bt에 할당. 3. 함수 popup() 생성 4.createElement함수를 통해 'div','a','아이콕스'태그 생성 후 각각 div,a,txt에 할당 5.a.appendChild(txt) - 생성된 a의 하위로 txt('아이콕스')를 넣는다. 6.a.setAttirbute를 통해 a태그 안에 속성과 값을 각각 입력 7.div의 하위로 a태그를 넣는다. 8.div를 HTML(document)안의 body의 안에 넣는다. 9.사용자가 bt 변수를 클릭할 때 popup(괄호는 생략)함수를 실행해라. 10.addEventListener를 통해 'load'되면 createEle()를 실행하라는 의미 |
04_innerHTML
| innerHTML | 태그 및 속성과 값, 텍스트 등의 요소를 추가할 수 있다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div
{
position: fixed;
left: 0px;
top: 0px;
width: 200px;
height: 200px;
background: #718c00;
}
.m1
{
background: #fff;
}
</style>
<script>
function createEle()
{
var content = document.getElementById('content');
content.innerHTML = '<p class = "m1">자바스크립트</p>';
}
addEventListener('load',createEle);
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>| 1.createEle()함수를 실행 2.content변수에 getElementById함수를 통해 id="content" 인 것을 할당. 3.content변수를 innerHTML명령어를 통해 요소 생성. 4.addEventListener함수를 통해 'load'되면 createEle함수를 실행. |
05_parentNode
| 상태위치 요소선택 | 설명 |
| parentNode | 선택된 요소의 부모 노드를 선택합니다. |
| previouSibling | 선택된 요소의 이전 형제 노드를 선택합니다. |
| 요소 생성 | 설명 |
| createElement() | 요소를 생성하는 메서드입니다. |
| createTextNode() | 텍스트를 생성하는 메서드입니다. |
| appendChild() | 요소를 부모와 자식의 관계로 만들어주는 메서드입니다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container">
<h1>참가 신청</h1>
<form action=""></form>
<input type="text" id="userName" placeholder="이름"
required autocomplete="off">
<button onclick= "newRegister(); return false;">신청</button>
<hr>
<div id="nameList"></div>
</div>
<script src="05_parentNode.js"></script>
</body>
</html>
function newRegister()
{
var newP = document.createElement("p");
var userName = document.querySelector("#userName");
var newText = document.createTextNode(userName.value);
newP.appendChild(newText);
var delBttn = document.createElement("span");
var delText = document.createTextNode("X");
delBttn.setAttribute("class","del");
delBttn.appendChild(delText);
newP.appendChild(delBttn);
var nameList = document.querySelector("#nameList");
nameList.insertBefore(newP,nameList.childNodes[0]);
userName.value = "";
var removeBttns = document.querySelectorAll(".del");
for(var i = 0; i<removeBttns.length; i++)
{
removeBttns[i].addEventListener("click",function()
{
if(this.parentNode.parentNode)
{
this.parentNode.parentNode.removeChild(this.parentNode);
}
});
}
}| 1.newRegister()메서드를 실행 2. createElement메서드를 통해 p요소 생성 3.querySelector메서드를 통해 #id 선택 4.createTextNote를 통해 텍스트 생성 5.appendChild메서드를 통해 newP의 자식으로 newText삽입 6.각 변수에 태그와 텍스트 생성 7.setAttribute메서드를 통해 클래스속성과 값="del" 할당 8.변수의 자식으로 text를 넣기. 9.newP의 자식으로 delBttn넣기. 10.#id를 선택해서 nameList 변수에 저장. 11.nameList에 insertBefore메서드를 통해 newP에 첫번째 자식으로(배열) 넣어라는 의미. 12.텍스트의 필드지우기 13.querySelectorAll메서드를 통해 class="del"인 것을 모두 선택해서 해당 변수에 저장. 14.for문을 통해 해당 변수의 길이-1만큼 반복. 15.해당 변수의 인덱스가 addEventListener를 통해 클릭이 되면 함수가 실행이 되라는 의미. 16.현재 노드의 부모 노드의 부모노드가 있을 경우에 실행. 17.현재 노드(this)의 부모노드의 부모노드를 찾아서 현재 노드(this)의 부모 노드인 p노드를 삭제. |
06_style
| 스타일 형식 | 요소.style.속성 = '속성 값', 주의할 점은 margin-top을 선택할 때는 '-' 기호 없이 선택 사용. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function()
{
var content = document.getElementById('content');
content.style.width = '200px';
content.style.height = '200px';
content.style.border = '4px solid #718c00';
content.style.textAlign = 'center';
content.style.lineHeight = '200px';
}
</script>
</head>
<body>
<div id="content">내용</div>
</body>
</html>
07_form1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function()
{
var frm1 = document.frm1;
var frm2 = document.frm2;
console.log(frm1.search.placeholder);
console.log(frm2.subject.placeholder);
console.log(frm2.credit.placeholder);
console.log(document.forms[0].elements[0].placeholder);
console.log(document.forms[1][1].placeholder);
console.log(document.forms['frm1'].elements['search'].placeholder);
console.log(document.forms['frm2']['subject'].placeholder);
}
</script>
</head>
<body>
<form action="#" name="frm1">
<input type="search" name="search" placeholder="검색어입력">
<input type="submit" value="확인">
</form>
<form action="#" name="frm2">
<input type="text" name="subject" placeholder="과목입력">
<input type="password" name="credit" placeholder="학점입력">
<input type="submit" value="확인">
</form>
</body>
</html>
08_returnfalse
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function()
{
var login = document.login;
login.onsubmit = function()
{
if(!login.id.value)
{
alert('아이디를 입력해주세요!');
login.id.focus();
return false;
}
if(!login.pw.value)
{
alert('비밀번호를 입력주세요!');
login.pw.focus();
return false;
}
}
}
</script>
</head>
<body>
<form action="#" method="post" name="login">
<div>
<label for="id">아이디</label>
<input type="text" name="id" id="id">
</div>
<div>
<label for="pw">비밀번호</label>
<input type="password" name="pw" id="pw">
</div>
<div>
<input type="submit" value="확인">
</div>
</form>
</body>
</html>