240920 #003 BOM / DOM

브라우저 객체 모델(Browser Object Model)

window

---

location

프로토콜의 종류, 호스트 이름, 문서 위치 등의 정보

(페이지를 이동하는 데 필요한 정보들) local:8181~ 이런 것들,,

        //location
        var output=""; //var를 추가해야할 것 같아? 왜?
        for(var v in location ){ //location이 obj처럼 여러 key와 value를 갖고 있어, 지금 그걸 보려고 이 작업을 하는 거야
            output += v + " : "  + location[v] + "<br>" //v가 location의 key를 빼오니까 value값 보려고 location[v]
        }
        document.body.innerHTML = output;

 

기본 key

key name	description	example
hash	anchor name	#bookmark
search	request parameter	?var1=123

 

기본  method

method name	description
assign(URL)	move to the URL
reload()	reload the page
replace(URL)	replace the page by the URL (impossible to go back)

 

	document.querySelector("#btnReload").onclick = function(){
            location.reload; //getElementById와의 차이?
        }
        document.querySelector("#btnAssign").onclick = function(){
            location.assign("https://naver.com");
        }
        document.querySelector("#btnReplace").onclick = function(){
            location.replace("https://naver.com"); // 요걸로 하면 뒤로가기 불가
        }
        var output=""; //var를 추가해야할 것 같아? 왜?
        for(var v in navigator ){ //location이 obj처럼 여러 key와 value를 갖고 있어, 지금 그걸 보려고 이 작업을 하는 거야
            output += v + " : "  + navigator[v] + "<br>" //v가 location의 key를 빼오니까 value값 보려고 location[v]
        }
        document.getElementById("outputNav").innerHTML = output; // 오 출력 위치 조정하는거 잘 확인해!!

---

navigator

: 브라우저의 정보를 제공하는 Obj

 

---

history

방문한 히스토리 url

// 1 google
        // 2 naver
        // 3 코로나19
        // 4 서울시간
        // 5 본화면
        // 6 naver
        // 7 사전
        document.querySelector("#back").addEventListener("click", function(){
            history.back();
        });
        document.querySelector("#go").addEventListener("click",function(){
            var num = document.querySelector("#num").value;
            history.go(num);
        });
        document.querySelector("#forward").addEventListener("click", function(){
            history.forward();
        })
        document.querySelector("#goNaver").addEventListener("click", function(){
            location.assign("https://naver.com");
        })

---

screen

웹 브라우저 말고, 운영체제의 화면의 속성

@ media screen and (min-width: 800px) { }

key name	description
width
height
availWidth
availHeight
colorDepth
pixelDepth

 

---

문서 객체 모델(Document Object Model)

HTML, XML 문서의 모든 요소(Element)에 접근하는 방법을 정의한 programming Interface

 

객체의 종류

node / element / HTMLelement / document

 

 

 

---

문서 객체 만들기

 

노드 생성 메소드

method	description
createElement(tagName)	create an element node
createTextNode(node)	create a text node

노드 연결 메소드

method	description
apprendChild(node)	connect the node to the object

 

//노드생성 방법 1
	    //document 안에 h1 element를 생성하고 header라는 obj에 넣는다.
            var header = document.createElement("h1");
            //document 안에 Hello라는 textNode를 생성하고 textNode라는 obj에 넣는다.
            var textNode = document.createTextNode('Hello');
            //header 안에 textNode를 집어 넣는다.
            header.appendChild(textNode); 

//노드생성 방법 2
            var html = "";
            html+="<ul>";
            html+="<li>javascript</li>";
            html+="<li>DOM</li>";
            html+="<li>jQuery</li>";
            html+="</ul>";
            document.body.innerHTML = html; //위아래 순서 바꾸면 출력 둘 다 돼 (이게 덮어씌우는 느낌인 듯)

 

 

---

속성 지정하기

window.onload = function(){
         //노드 생성
    	    var img1 = document.createElement("img");
            //노드 속성 지정
            img1.src = "./images/stuoy_nuki1.png"
            img1.width = 320;
            img1.height = 200;
            //노드 연결
            document.body.appendChild(img1);
}

 

 

---

document obj

 

 

 

---

문서 객체 불러오기

※Change the HTML content of a <p> element with id="demo"

= innerHTML's definition

id로 가져오기

getElementById

<script>
    window.onload = function() {
    var title_1 = document.getElementById('title_1');
    var title_2 = document.getElementById('title_2'); 
    title_1.innerHTML = 'hey';
    title_2.innerHTML = 'what?'; //여기서 body.innerHTML이라고 안쓰는 이유?
    //.value와 같이 innerHTML 속성을 가진 tag들이 존재하는데, 보통 쌍을 두는 tag들이 그 예.
    //위에 title_1이 h1의 속성을 갖게되면서 innerHTML의 속성도 자연스레 가진거야.
    };
</script>

 

<body>
  <h1 id="title_1">TITLE</h1>
  <h1 id="title_2">JavaScript</h1>
</body>

---

태그로 가져오기

getElementsByTagName (Id 제외한 것들은 여러 개가 가능해서 element's'이다.)

객체를 '배열'로 가져온다.

window.onload = function() {
  var headers = document.getElementsByTagName('h1'); //Element's'가 된거 확인.
    headers[0].innerHTML = 'Hey';
    headers[1].innerHTML = 'What?';
};

---

문서 객체 삭제하기

method	description
removeChild()	remove the child node in the document object