You will be fine

<javascript> 8.DOM, BOM

by BFine

공부(2018~2019) - 스킨변경전/Javascript

반응형

1. DOM, BOM


 javascript 에서는 Html 문서와 웹브라우저를 객체로 간주하여 처리

 Html 문서를 객체로 표현한 것을 DOM, 웹브라우저를 객체로 표현한 것을 BOM




  getElements로 시작하면 1개 이상의 값을 가져온다.



    <script>

        function getDiv() {

            alert(document.getElementsByTagName("div")[0].innerHTML); // 태그값을 불러온다

        }

        function setDiv(str) {

            document.getElementsByTagName("div")[0].innerHTML = str; // 태그값 변경

        }

    </script>


</head>

<body>

    <div>Hello</div>

        <input type="button" value="check" name="n1" onclick="getDiv()"/>

        <input type="button" value="modify" onclick="setDiv('world!')" />

</body>


======================================================


 <script>

        var image = ['cafelatte.jpg', 'americano.jpg', 'cappuccino.jpg'];

        var count = -1;


        function setImage1(im) {  // javascript 오버로딩형태는 있지만 동작하지 않는다. 마지막에 정의한 함수만 유지 그 외는 무시된다.     

                                                     if (arguments.length == 1) {

                                                         var imag = document.getElementById("k");

                                                                imag.src = "images/" + im; } 이런식으로 하나의 함수에 사용해야함

            } 

            var imag = document.getElementById("k");

            imag.src ="images/"+im;

          // image.width="200";

        }

        function setImage() {

            count++;

            var temp = document.getElementById("k");

            switch (count) {

               case 1:

                   temp.src = "images/" + image[0];

                   break;

                case 2:

                    temp.src = "images/" + image[1];

                    break;

                default:

                    temp.src = "images/" + image[2];

                    break;

            }

            if (count == 3) { count = -1;}

        }


    </script>


</head>

<body>

    <img id="k" src="images/hubble.jpg" width="100" height="50" alt="안보임" />

    <input  type="button" value="change" onclick="setImage1('cappuccino.jpg')" />

    <input type="button" value="continue" onclick="setImage()" />

</body>


실행


Hello



<예제>

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
       var count = 0;
 
        function addLinkTag(){
            var sitename = document.getElementById("sitename").value;
   
            var url = document.getElementById("siteurl").value;
            
            var aArray = document.getElementsByTagName("a");
            aArray[count].href = url;
            aArray[count].innerHTML = sitename;
            count++;
        }
    </script>
 
</head>
<body>
    링크사이트명:<input type="text" id="sitename" /><br>
    링크url:<input type="text" id="siteurl"/>
    <input type="button" value="링크추가" onclick="addLinkTag()" /> <br/>
    <a></a><br />
    <a></a><br />
    <a></a><br />
    <a></a><br />
    <a></a><br />
 
</body>
cs






2. Node

 

노드생성 : document.createTextNode()


노드추가 : getElementById로 불러와서 appendChild를 통해 추가한다.


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    div {
        background-color:yellow;
       width:50px;
    }
</style>
    <script>
        function add(text) {
            var newnode = document.createTextNode(text);
            var parent = document.getElementById("dv");
            parent.appendChild(newnode);
        }
    </script>
 
</head>
 
<body>
    <div id="dv" onclick="add('Click')">Click<br/></div>
</body>

cs




3. BOM Model


screen 화면 ( 최대 가로/세로 정보를 가짐)

history 방문기록

navigator 브라우저정보

location 주소표시

document 현재문서

frames 구성 프레임들

window 현재문서탭 (onlode())


BOM window(최상위 객체) 모델 부터 시작



window.open() , close() : 새로운 브라우저를 열때 사용



실행



<예제>


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
<!DOCTYPE html>
<html>
<head><
<meta charset="UTF-8">
<title>Parent</title>
<script type="text/javascript">
var newwin;
function check(){
    newwin = window.open("idcheck.html","",
    "height=200, width=300,top=100,left=300,titlebar=no,scrollbars=no,menubar=no");
    
}
function childclose() {
    document.getElementById("parent").innerHTML = newwin.document.getElementById("result").innerHTML;
    newwin.close();
}
function browserinform() {
    document.getElementById("parent").innerHTML=
    window.navigator.userAgent;
}
 
 
</script>
</head>
<body>
<input type="text" id= "id">
<input type="button" value=중복확인 onclick="check()">
<input type="button" value=새창닫기 onclick="childclose()">
 
<input type="button" value="새창이동" onclick="newwin.moveBy(10, 10); newwin.focus();" />
    <!-- moveBy 이동, focus 항상위-->
<input type="button" value="새창변경" onclick="newwin.resizeTo(screen.availHeight,screen.availWidth)" />
<input type="button" value="새창사이트변경" onclick="newwin.location.replace('http://www.google.com')" />
<input type="button" value="정보" onclick="browserinform()" />
 
<div id=parent></div>
</body>
</html>
cs


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
 
<title>Child</title>
</head>
<body>
 
<div id=result> </div>
<input type="button" value=창닫기  onclick="myclose()">
 
<script type="text/javascript">
 
//내창:window
//부모창:window.opener
var id = opener.document.getElementById("id").value;
if(id=="java"||id=="script"){
    var output = id+"는 사용 가능합니다."
}else{
    var output = id+"는 사용 불가능합니다."
}
 
function myclose(){
    window.close();//현재창 닫기
    //opener.close();
    
}
document.getElementById("result").innerHTML=output;
 
</script>
 
</body>
</html>
cs










반응형

'공부(2018~2019) - 스킨변경전 > Javascript' 카테고리의 다른 글

<jQuery> 4. Selector, Event  (0) 2018.04.10
<Javascript> 9. Event, 정규표현식  (0) 2018.04.09
<javascript> 7. Number, String  (0) 2018.04.05
<javascript> 6. Date, InnerHTML  (0) 2018.04.04
<jQuery> 3. Event  (0) 2018.04.02

블로그의 정보

57개월 BackEnd

BFine

활동하기

티스토리툴바