1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function test() { //자바스크립트로 HTML을 접근/조작 하는 방법 //1. BOM, Browser Object Model // - 특정 태그를 정해진 방법에 따라 접근(고정) // -> 계층 구조가 미리 정해져 있음 // - DOM level 0 //window.document.form1.txt1.value = "하하하"; //window.document.images["img1"].title = "웃는 얼굴"; //2. DOM, Document Object Model // - 현재 문서 구조를 기준으로 트리 구조 제공 // - 모든 HTML 구성 요소를 인식 // - DOM level 1, 2, 3, 0 window.document.getElementById("txt1").value = "DOM"; //bom의 "하하하"구문과 같은 window.document.getElementById("div1").innerText = "DOM" } </script> </head> <body> <!-- ex08.htm --> <form name="form1"> <input type="text" name="txt1" id="txt1" /> <br /> <input type="button" value=" 테스트 " onclick="test()" /> </form> <!-- BOM : 존재 안함 -> name 식별자를 통해 찾아감 DOM : 존재 함 --> <div id="div1"></div> <img src="images/face01.png" name="img1" id="img1"/> </body> </html> | cs |
'WEB > JS' 카테고리의 다른 글
| BOM test (0) | 2016.01.22 |
|---|---|
| 부모, 자식 찾기 (0) | 2016.01.22 |
| 날짜시간 / 배열(array) (0) | 2016.01.22 |
| 문자열 / 길이 / 검색 / 치환 / 벼환 / 분할 / 추출 / 제어문 (0) | 2016.01.22 |
| 함수 (0) | 2016.01.22 |