PDH 개발 공부

[JavaScript] DOM ,BOM 본문

JavaScript

[JavaScript] DOM ,BOM

IFBB 2021. 7. 1. 10:31

Window 객체

Window 객체

  • 전역객체라고도 불린다. JSC , BOM , DOM 모든 객체를 포함하고 있다. 창이나 프레임을 의미한다.

DOM(Document Object Model)

  • 문서에 대한 모든 내용을 담고있는 객체 , 도큐먼트에 관련 된 내용 모두
  • 문서 즉 얼려진 페이지에 대한 정보를 따로 객체화 시켜서 관리함 (텍스트 , 버튼 ,이미지 등등)
  • 웹문서에 대한 모든 내용을 담고있는 객체를 DOM 이라고 한다
  • 자바스크립트가 브라우저 창(window)을 제어하기 위한 객체
  • 자바스크립트 실행과 관련된 환경 정보 에 접근 가능한 객체
    ex)getElementsByTagName, getElementsById , getElementsByClassName

클로저 개념 보기

BOM

  • 웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화 시킨 것이다. 경고창 ,팝업창 , URI 등등

에제코드 1


let s = "";
for(props in window){
    s += (props + ":" + window[props]);
}

console.log(s);

setTimeout(function(){
let popup = window.open("popup.html" , "popup" , "width = 600 , height = 400 ");
setTimeout(function(){ // 클로저
popup.document.write("<h1>popup text changed</h1>"); 
},  2000)

} , 2000);

예제코드 2


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
</script>
</head>
<body>
    <h1>BOM(Browser Object Model)</h1>
    <h2>3. location 객체(주소창)</h2>

    <h3>Refresh Page 하는 방법</h3>
    <!-- 방법1 -->
    <button onclick='location = location;'>refresh01</button>

    <!-- 방법2 -->
    <button onclick='location.href = location.href;'>refresh02</button>

    <!-- 방법3 -->
    <button onclick='location.assign("");'>refresh03</button>

    <!-- 방법4 -->
    <button onclick='location.replace(location);'>refresh04</button>

    <!-- 방법5 -->
    <button onclick='location.reload();'>refresh05</button>

    <h3>Redirect</h3>
    <button onclick='location.href = "http://www.douzone.com";'>redirect to 우리회사</button>
</body>
</html>

예제코드 3


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="browser-detect.js"></script>
<script>
let s = "";
for(props in navigator) {
    s += (props + ":" + navigator[props] + "\n");
}
console.log(s);

BrowserDetect.init();
console.log(BrowserDetect.browser);
console.log(BrowserDetect.version);
console.log(BrowserDetect.OS);
</script>
</head>
<body>
    <h1>BOM(Browser Object Model)</h1>
    <h2>4. navigator 객체</h2>
</body>
</html>

'JavaScript' 카테고리의 다른 글

[JavaScript] 비동기 처리 2  (0) 2021.07.12
[JavaScript] 비동기 처리 1 (CallBack 함수에 대해)  (0) 2021.07.12
[Node.js]Ejs  (0) 2021.07.08
[JavaScript] this  (0) 2021.07.08
Ajax  (0) 2021.07.08
'JavaScript' Related Articles more
Comments