๐2022-08-05๐
ex8-01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML DOM ํธ๋ฆฌ</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.querySelector("#firstP"); // ํ๋ ๊ฐ์ ธ์ค๋ ๊ฑฐ
// let p = document.querySelectorAll() // ๋ชจ์กฐ๋ฆฌ ๋ค ๊ฐ์ ธ์ค๋ ๊ฑฐ
// 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>
ex8-02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS ์คํ์ผ ๋์ ๋ณ๊ฒฝ</title>
<script>
function change() {
let span = document.getElementById("mySpan"); // id๊ฐ mySpan์ธ ๊ฐ์ฒด ์ฐพ๊ธฐ
span.style.color = "green"; // ๊ธ์ ์ green
span.style.fontSize = "30px"; // ๊ธ์ ํฌ๊ธฐ๋ 30ํฝ์
span.style.display = "block"; // ๋ธ๋ก ๋ฐ์ค๋ก ๋ณ๊ฒฝ
span.style.width = "6em"; // ๋ฐ์ค์ ํญ. 6 ๊ธ์ ํฌ๊ธฐ
span.style.border = "3px dotted magenta"; // 3ํฝ์
์ ์ magenta ํ
๋๋ฆฌ
span.style.margin = "20px"; // ์ํ์ข์ฐ ์ฌ๋ฐฑ 20px
}
</script>
</head>
<body>
<h3>CSS ์คํ์ผ ๋์ ๋ณ๊ฒฝ</h3>
<hr>
<p style="color:blue" >์ด๊ฒ์
<span id="mySpan" style="color:red">๋ฌธ์ฅ์
๋๋ค. </span>
</p>
<input type="button" value="์คํ์ผ๋ณ๊ฒฝ" onclick="change()">
</body>
</html>
ex8-03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>innerHTML ํ์ฉ</title>
<script>
function change() {
let p = document.getElementById("firstP");
p.innerHTML= "๋์ <img src='media/puppy.png'> ๊ฐ์์ง";
}
</script>
</head>
<body>
<h3>innerHTML ํ์ฉ : ์๋ ๊ธ์์ ํด๋ฆญํ๋ฉด ์์ ๊ฐ์์ง๊ฐ ๋ณด์
๋๋ค.</h3>
<hr>
<p id="firstP" style="color:blue"
onclick="change()">์ฌ๊ธฐ์
<span style="color:red">ํด๋ฆญํ์ธ์</span>
</p>
</body>
</html>
ex8-04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this ํ์ฉ</title>
<script>
function change(obj, size, color) {
obj.style.color = color;
obj.style.fontSize = size;
}
</script>
</head>
<body>
<h3>this ํ์ฉ</h3>
<hr>
<button onclick="change(this, '30px', 'red')">๋ฒํผ</button>
<button onclick="change(this, '30px', 'blue')">๋ฒํผ</button>
<div onclick="change(this, '25px', 'orange')">
์ฌ๊ธฐ ํด๋ฆญํ๋ฉด ํฌ๊ธฐ์ ์ ๋ณ๊ฒฝ
</div>
</body>
</html>
ex8-05.html
<!DOCTYPE html>
<html>
<head id="myHead">
<meta charset="UTF-8">
<title>document ๊ฐ์ฒด์ ์ฃผ์ ํ๋กํผํฐ</title>
<script>
let text = "๋ฌธ์ ๋ก๋ฉ ์ค์ผ ๋ readyState = " + document.readyState + "\n";
</script>
</head>
<body style="background-color:yellow; color:blue; direction:rtl"
onload="printProperties()">
<h3>document์ ์ฃผ์ ํ๋กํผํฐ</h3>
<hr>
<a href="http://www.naver.com">๋ค์ด๋ฒ ํํ์ด์ง</a>
<div>์ด๊ณณ์ div ์์ญ์
๋๋ค.</div>
<input id="input" type="text" value="์ฌ๊ธฐ ํฌ์ปค์ค๊ฐ ์์ต๋๋ค">
<script>
// ๋ฌธ์๊ฐ ์์ ํ ๋ก๋(์ถ๋ ฅ)๋์์ ๋, ํ์ฌ document์ ํ๋กํผํฐ ์ถ๋ ฅ
function printProperties() {
document.getElementById("input").focus(); // <input> ํ๊ทธ์ ํฌ์ปค์ค๋ฅผ ์ค
text += "1. location =" + document.location + "\n";
text += "2. URL =" + document.URL + "\n";
text += "3. title =" + document.title + "\n";
text += "4. head์ id =" + document.head.id + "\n";
text += "5. body color =" + document.body.style.color + "\n";
text += "6. domain =" + document.domain + "\n";;
text += "7. lastModified =" + document.lastModified + "\n";
text += "8. defaultView = " + document.defaultView + "\n";
text += "9. ๋ฌธ์์ ๋ก๋ ์๋ฃ ํ readyState = " + document.readyState + "\n";
text += "10. referrer = " + document.referrer + "\n";
text += "11. activeElement = " + document.activeElement.value + "\n";
text += "12. documentElement์ ํ๊ทธ ์ด๋ฆ = " + document.documentElement.tagName + "\n";
alert(text);
}
</script>
</body>
</html>
ex8-06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.getElementsByTagName()</title>
<script>
function change() {
let spanArray = document.querySelectorAll("span");
// for(let i=0; i<spanArray.length; i++) {
// let span = spanArray[i];
// span.style.color = "orchid";
// span.style.fontSize = "20px";
// }
for(let span of spanArray) {
span.style.color = "orchid";
span.style.fontSize = "20px";
}
}
</script>
</head>
<body>
<h3>๋ด๊ฐ ์ข์ํ๋ ๊ณผ์ผ
<button onclick="change()">๋๋ฅด์ธ์</button>
</h3>
<hr>
์ ๋ ๋นจ๊ฐ <span>์ฌ๊ณผ</span>๋ฅผ ์ข์ํด์
์์นจ๋ง๋ค ํ ๊ฐ์ฉ ๋จน๊ณ ์์ด์. ์ด๋ํ ๋๋ ์ค๊ฐ ์ค๊ฐ์
<span>๋ฐ๋๋</span>๋ฅผ ๋จน์ง์. ํ์ํ๋ฌผ ์ญ์ทจ๊ฐ ๋นจ๋ผ
ํ์ด ๋ฉ๋๋ค. ๋ํ ๋ฌ์ฝคํ ํฅ๊ธฐ๋ฅผ ํ์ <span>์ฒด๋ฆฌ</span>์
์ฌ๋ฆ ๋์ ๋ฌผ์ฌ ๋๋ <span>์๋</span>๋ฅผ ์ข์ํฉ๋๋ค.
</body>
</html>
ex8-07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document.getElementsByClassName()</title>
<script>
function viewPlace() {
let tagArray = document.querySelectorAll(".place");
for(let tag of tagArray) {
tag.style.color = "orchid";
tag.style.fontSize = "20px";
tag.style.textDecoration = "underline";
}
}
function viewFood() {
let tagArray = document.querySelectorAll(".food");
for(let tag of tagArray) {
tag.style.color = "darkcyan";
}
}
</script>
</head>
<body>
<h3>๊ฐ๊ณ ์ถ์ ๊ณณ ๋จน๊ณ ์ถ์ ๊ฒ</h3><br>
<button onclick="viewPlace()">๊ฐ๊ณ ์ถ์ ๊ณณ</button>
<button onclick="viewFood()">๋จน๊ณ ์ถ์ ๊ฒ</button>
</h3>
<hr>
<p><span class="place">์ ์ฃผ๋</span>์ ๊ฐ์ <span class="food">ํ๋ผ์ง</span>๋ฅผ ๋จน๊ณ ์ถ๊ณ ์.
<span class="place">๋
๋</span>์ ๊ฐ์ <span class="food">๋
๋ ์์ฐ</span>๋ ๋จน๊ณ ์ถ์ด์. ์ ์ผ ๊ฐ๊ณ ์ถ์ ๊ณณ <span class="place">๋ถ์ฐ ์๊ฐ์น ์์ฅ</span>์์ <span class="food">๊ผผ์ฅ์ด ๊ตฌ์ด</span>๋ ๋จน๊ณ ์ถ์ด์</p>
</body>
</html>
ex8-08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>write()์ writeln()</title></head>
<body>
<h3>write()์ writeln()</h3>
<hr>
<script>
document.write("<h3>๋๋ฌผ์์ ์ํ๊ฐ์๋ค</h3>");
document.write("<p style='color:blue'>๋ ์จ๊ฐ ์ข์ ");
document.write("์ํ๊ฐ๋๋ค</p>");
document.write(2+3);
document.write("๋ช
์
๋๋ค.<br>"); // ๋ค์ ์ค๋ก ๋์ด๊ฐ๊ธฐ
document.writeln(5); // ๋ค์ ์ค์ ๋์ด๊ฐ์ง ๋ชปํจ
document.writeln("๋ช
์
๋๋ค.<br>");
</script>
</body>
</html>
ex8-09.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>write()๋ฅผ ์๋ชป ์ฌ์ฉํ๋ ์</title>
</head>
<body onclick="document.write('<h3>ํด๋ฆญ๋์์ต๋๋ค</h3>')">
<h3>write()๋ฅผ ์๋ชป ์ฌ์ฉํ๋ ์</h3>
<hr>
<p>์น๋ธ๋ผ์ฐ์ ์ ๋ฐํ ์๋ฌด ๊ณณ์ด๋
ํด๋ฆญํด๋ณด์ธ์.</p>
</body>
</html>
ex8-10.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML ๋ฌธ์ ์์ฑ๊ธฐ ๋ง๋ค๊ธฐ</title>
<script>
let win=null;
function showHTML() {
if(win == null || win.closed)
win = window.open("", "outWin", "width=250,height=150");
let textArea = document.getElementById("srcText");
win.document.open();
win.document.write(textArea.value);
win.document.close();
}
</script>
</head>
<body>
<h3>HTML ๋ฌธ์ ์์ฑ๊ธฐ ๋ง๋ค๊ธฐ </h3>
<hr>
<p>์๋์ HTML ๋ฌธ์๋ฅผ ์์ฑํ๊ณ ๋ฒํผ์ ํด๋ฆญํด ๋ณด์ธ์.
์ ์๋์ฐ์ HTML ๋ฌธ์๊ฐ ์ถ๋ ฅ๋ฉ๋๋ค.</p>
<textarea id="srcText" rows="10" cols="40"></textarea>
<br>
<br>
<button onclick="showHTML()">HTML ๋ฌธ์ ์ถ๋ ฅํ๊ธฐ</button>
</body>
</html>
ex8-11.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>๋ฌธ์์ ๋์ ๊ตฌ์ฑ</title>
<script>
function createDIV() {
let obj = document.querySelector("#parent");
let newDIV = document.createElement("div");
newDIV.innerHTML = "์๋ก ์์ฑ๋ DIV์
๋๋ค.";
newDIV.setAttribute("id", "myDiv");
newDIV.style.backgroundColor = "yellow";
newDIV.onclick = function() {
let p = this.parentElement; // ๋ถ๋ชจ HTML ํ๊ทธ ์์
p.removeChild(this); // ์์ ์ ๋ถ๋ชจ๋ก๋ถํฐ ์ ๊ฑฐ
};
obj.appendChild(newDIV);
}
</script>
</head>
<body id="parent">
<h3>DIV ๊ฐ์ฒด๋ฅผ ๋์ ์ผ๋ก ์์ฑ, ์ฝ์
, ์ญ์ ํ๋ ์์ </h3>
<hr>
<p>DOM ํธ๋ฆฌ์ ๋์ ์ผ๋ก ๊ฐ์ฒด๋ฅผ ์ฝ์
ํ ์ ์์ต๋๋ค.
createElement(), appendChild(),
removeChild() ๋ฉ์๋๋ฅผ ์ด์ฉํ์ฌ ์๋ก์ด ๊ฐ์ฒด๋ฅผ ์์ฑ,
์ฝ์
, ์ญ์ ํ๋ ์์ ์
๋๋ค.</p>
<a href="javascript:createDIV()">DIV ์์ฑ</a><p>
<p>
</body>
</html>
๋๊ธ