728x90
Dom ์ด๋? (Document Object Model)
๊ฐ ํ๊ทธ๋ฅผ ์ ๊ทผํ๊ธฐ ์ํ Object(๊ฐ์ฒด)
๊ทธ Object๋ฅผ ์ ๊ทผํ๊ธฐ ์ํ ํจ์
์ฝ๋ ํผ์น๊ธฐ ->
๋๋ณด๊ธฐ
<!DOCTYPE html>
<html> <!-- root tag -->
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- DOM : Document Object Model
๊ฐ tag๋ฅผ ์ ๊ทผํ๊ธฐ ์ํ Object(๊ฐ์ฒด)
๊ทธ Object๋ฅผ ์ ๊ทผํ๊ธฐ ์ํ ํจ์ -->
<!-- childNodes -->
<h3 id="intro">h3 tad id intro</h3>
<p id="demo">p tag id demo</p>
<button type="button" onclick="func()">๋ฒํผ</button>
<script type="text/javascript">
function func(){
//let text = document.getElementById('intro').childNodes[0].nodeValue;
let text = document.getElementById('demo').childNodes[0].nodeValue;
alert(text);
}
</script>
<br><br>
<select id="car">
<option>๋ฒค์ธ </option>
<option>BMW</option>
<option>์์ฐ๋</option>
</select>
<button type="button" onclick="cars()">์๋์ฐจ ์ ํ</button>
<script type="text/javascript">
function cars(){
let carName = document.getElementById("car").childNodes;
alert(carName[1].text); //ํ๊ทธ๋ก ๋ฒ์ง์๋ฅผ ๋ฐ์ง๊ธฐ๋๋ฌธ์ ๋ฒค์ธ 1๋ฒ์ง / ๋ฒค์ธ ์ต์
๋ฐ 2๋ฒ์ง / BMW 3๋ฒ์ง
}
</script>
<br><br>
<!-- appendChild(๋ค์ ์ถ๊ฐ), insertChild(์) -->
<div id="div1">
<p id="p1">์ฒซ๋ฒ์งธ pํ๊ทธ</p>
<p id="p2">๋๋ฒ์งธ pํ๊ทธ</p>
</div>
<button type="button" onclick="appendfunc()">๋ค์์ถ๊ฐ</button>
<button type="button" onclick="insertfunc()">์์์ถ๊ฐ</button>
<button type="button" onclick="delectfunc()">์ญ์ </button>
<script type="text/javascript">
function appendfunc(){
let ptag = document.createElement('p'); // <p></p> ์ถ๊ฐ
let textNode = document.createTextNode("์๋ก์ด p ํ๊ทธ"); // <p>์์ ํด๋น ๋ฌธ์์ด์ถ๊ฐ
ptag.id= 'newid'; //์๋ก ์๊ธด ๊ฐ์ฒด
ptag.className= 'newclass'; // ๋ค์๋ณด๊ธฐ
ptag.appendChild(textNode); //<p>์๋ก์ด ํ๊ทธ</p> ์ถ๊ฐ์๋ฃ
let element = document.getElementById("div1");
element.appendChild(ptag);
}
function insertfunc(){
let h3tag = document.createElement('h3'); // <h3></h3> ์ถ๊ฐ
let textNode = document.createTextNode("์๋ก์ด h3ํ๊ทธ"); // <h3>์์ ํด๋น ๋ฌธ์์ด์ถ๊ฐ
h3tag.appendChild(textNode);
let element = document.getElementById("div1");
let elementBefore = document.getElementById("p2"); // p2 ์์๋ค ์ถ๊ฐํ ๊ฑฐ์ผ (์ถ๊ฐํ ์์น ์ค์ )
element.insertBefore(h3tag, elementBefore);
}
function delectfunc(){
let element = document.getElementById("div1");
let removeElement = document.getElementById("p2"); // ์ง์ฐ๊ณ ์ถ์ id๊ฐ
element.removeChild(removeElement); //removeChild ํจ์๋ก ์ง์ฐ๊ณ ์ถ์ ๊ฐ์ฒด ์ญ์
//์๋ก ์ถ๊ฐํ๋ ๊ฐ์ฒด ์ญ์ +
}
</script>
<!-- NodeList -->
<p>Hello</p>
<p>World</p>
<p>I can do it</p>
<p>Never Change My Mind</p>
<button type="button" onclick="listfunc()">Nodelist</button>
<script type="text/javascript">
function listfunc() {
let nodelist = document.getElementsByTagName("p");
alert(nodelist.length);
nodelist[3].innerHTML = "์๋
ํ์ธ์";
for (i = 0; i < nodelist.length; i++) {
nodelist[i].style.backgroundColor="#00ff00";
}
}
</script>
</body>
</html>
๋๊ธ