자바스크립트 수업 내용 정리
HTML DOM tree
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML DOM tree</title>
</head>
<body>
<p style="color:blue">이것은
<span style="color: red;">문장입니다.</span>
</p>
<form action="#">
<input type="text" name="" id="">
<input type="button" value="테스트" id="">
<hr>
</form>
</body>
</html>
document.getElemnetByTagName()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document.getElemnetByTagName()</title>
<script>
function change(){
let spanArray = document.getElementsByTagName("span");
for(let i=0;i<spanArray.length;i++){
var spanObj = spanArray[i];
spanObj.style.color = "orchid";
spanObj.style.fontSize = "20px";
spanObj.style.background = "yellow";
}
}
function rechange(){
let spanArray = document.getElementsByTagName("span");
for(let i=0;i<spanArray.length;i++){
var spanObj = spanArray[i];
spanObj.style.color = "";
spanObj.style.fontSize = "";
spanObj.style.background = "";
}
}
</script>
</head>
<body>
<h3>내가 좋아하는 과일
<button onclick="change()">누르세요</button>
<button onclick="rechange()">취소하기</button>
</h3>
<hr>
저는 빨간 <span>사과</span>를 좋아해서 아침마다 하나씩 먹고 있어요
운동할 때 중간 중간에 <span>바나나</span>를 먹지요.
탄수화물 섭취가 빨라 힘이 납니다.
또한 달콤한 향기를 품은 <span>체리</span>와
여름냄새가 물씬나는 <span>자두</span>를 좋아합니다.
</body>
</html>
문서의 동적 구성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서의 동적 구성</title>
<script>
function createDIV(){
var obj = document.getElementById("parent");
var newDIV = document.createElement("div");
newDIV.innerHTML = "안녕하세요 ? 새로 생성된 DIV입니다.";
newDIV.setAttribute("id","myDiv");
newDIV.style.backgroundColor = "green";
newDIV.style.color = "white";
newDIV.onclick = function(){
var p = this.parentElement;
p.removeChild(this);
};
obj.appendChild(newDIV);
}
</script>
</head>
<body id="parent">
<h3>DIV 객체를 동적으로 생성, 삽입, 삭제하는 예제</h3>
<hr>
<p>DOM 트리에 동적으로 객체를 삽입할 수 있습니다.
createElement(), appendChild(), removeChild() 메소드를 이용하여 새로운 객체를 생성, 삽입, 삭제하는 예제입니다.
</p>
<p>
<a href="javascript:createDIV()">DIV생성</a>
</p>
</body>
</html>
DOM 객체 p의 프로퍼티, 스타일, 이벤트 리스너
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML DOM tree</title>
</head>
<body>
<h3>DOM 객체 p의 프로퍼티, 스타일, 이벤트 리스너</h3>
<hr>
<p id="firstP" style="color: blue; background:yellow"
onclick="this.style.color='teal'">
이것은
<span style="color: red;">문장입니다.</span>
</p>
<script>
let p = document.getElementById("firstP");
let text = "p.id =" +p.id + "\n";
text += "p.tagName = "+ p.tagName + "\n";
text += "p.innerHTML = "+ p.innerHTML + "\n";
text += "p.style.color = "+ p.style.color + "\n";
text += "p.onclick = "+ p.onclick + "\n";
text += "p.childElementCount = "+ p.childElementCount + "\n";
text += "너비 = "+ p.offsetWidth + "\n";
text += "높이 = "+ p.offsetHeight + "\n";
alert(text);
</script>
</body>
</html>
Leave a comment