waitedForU
[01] HTML DOM(Document Object Model) 본문
[01] HTML DOM(Document Object Model)
-비동기식: 그냥 서버에 요청을 하고 기다리는 것이 아니라 다른 것도 한다.(ex.화면을 중에 일부분이 바뀜.)
- W3C에서 표준을 제작하고 있습니다.
- 자바스크립트는 HTML 태그를 생성, 삭제, 속성을 변경할 수 있는 기능을 가지고
있습니다.
- HTML을 조작하기위한 자바스크립트 함수들의 집합을 모델화하여 만든것을 DOM
이라고 합니다.
- Ajax로 어플리케이션 서버로부터의 응답 결과를 전송받아 브러우저의 HTML상에
출력할 때에 DOM 모델을 이용합니다.
- Web Page가 로딩될때 브라우저는 그페이지의 Document Object Model를 생성
합니다.
있습니다.
- HTML을 조작하기위한 자바스크립트 함수들의 집합을 모델화하여 만든것을 DOM
이라고 합니다.
- Ajax로 어플리케이션 서버로부터의 응답 결과를 전송받아 브러우저의 HTML상에
출력할 때에 DOM 모델을 이용합니다.
- Web Page가 로딩될때 브라우저는 그페이지의 Document Object Model를 생성
합니다.
- HTML DOM은 Object들을 Tree 처럼 생성합니다.
- HTML DOM은 동적으로 HTML 태그를 생성할때 필요합니다.
- HTML DOM은 동적으로 HTML 태그를 생성할때 필요합니다.
1. DOM은 내부적으로 HTML 태그를 Tree 형태로 표현합니다.
[01] HTML DOM 활용
get이니까 찾는 거임 뭘 기준으로 찾는가에 따라 달라짐
tag name, class name은 배열임....즉 여러개를 찾을수 있음
element id는 하나만 찾을수 있음.
>>>>> WebContent/dom/idFind.html
<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementById</b> method!</p>
앞뒤로 여백주기<br>두번쓴효과 진하게
<p id="demo"></p>
<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML =
안에 데이터에 이 내용을 담아라! intro의 Hello World!처럼
"The text from the intro paragraph is " + myElement.innerHTML;
</script>
</body>
</html>
>>>>> WebContent/dom/tagnameFind.html
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p>The DOM is very useful.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method</p>
<p id="demo"></p>
<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) is: ' + x[0].innerHTML;
</script> 첫번째 p태그
</body>
</html>
>>>>> WebContent/dom/idTagnameFind.html
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method</p>
</div>
<p id="demo"></p>
<script>
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>
<p id="demo"></p>
<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>
</body>
</html>
>>>>> WebContent/dom/cssSelectorFind.html
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
p태그중 intro 클래스
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>
</body>
</html>
>>>>> WebContent/dom/htmlobjectFind.html
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="form_action.asp">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click "Try it" to display the value of each element in the form.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.forms["frm1"];
문서전체에서 여러 폼중에 frm1이라는 폼을 참조하겠다.
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
text += x.elements[i].value + "<br>";
x의 요소중 value값을 가져오겠다.
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
'Ajax' 카테고리의 다른 글
| [08] XMLHttpRequest Module, XMLHttpRequest Module 실습 (0) | 2016.05.18 |
|---|---|
| [07] Ajax-Request,Response, Ajax-The onreadystatechange Event (0) | 2016.05.18 |
| [06] XMLHttpRequest Object , XMLHttpRequest 생성 (0) | 2016.05.18 |
| [05] Ajax(Asynchronous JavaScript and XML) (0) | 2016.05.18 |
| [02] HTML DOM 실습 1 (0) | 2016.05.17 |
Comments