BOM 모델 브라우저 객체 모델(browser object model), 브라우저 자체는 브라우저에 내장된 일부 객체를 통해 동작할 수 있습니다.
DOM은 페이지를 조작하는 데 사용되고, BOM은 브라우저 자체를 조작하는 데 사용됩니다.
BOM은 표준화되어 있지 않지만 대부분의 브라우저는 다음 개체를 지원합니다.
1. Window 개체: 전체 창을 나타냅니다.
(1) open 메서드: (이름 , 특성, 높이 및 너비, 도구 모음, 스크롤 막대)
(2) setTimeout 메서드: setTimeout(fn, milliseconds); //첫 번째 매개 변수는 함수 이름이어야 합니다(괄호는 허용되지 않음) )
<html>
<head>
<script>
function f1(){
//win指向了新打开的窗口
var win = window.open('day05_03','wi_1',
'width=400,height=400');
setTimeout(function(){
win.close();
}, 5000);
}
</script>
</head>
<body>
<input type="button" value="click me" onclick="f1();"/>
</body>
</html>(3) setInterval 메소드
var taskId = setInterval(fn, milliseconds); //지정된 시간 간격 후에 함수 실행
(4)clearInterval 메소드
clearInterval(taskId); //setInterval 작업 취소
<html>
<head>
<style>
#d1{
width:80px;
height:80px;
background-color:blue;
position:relative;
}
</style>
<script src="myjs.js"></script>
<script>
function f2(){
var v1 = parseInt($('d1').style.left);
$('d1').style.left = v1 + 50 + 'px';
}
function f1(){
var taskId = setInterval(f2, 500);
setTimeout(function(){
clearInterval(taskId);
},5000)
}
</script>
</head>
<body>
<div id="d1" style="left:10px;"></div>
<input type="button" value="click me"
onclick="f1();"/>
</body>
</html>(5) Alert() 메소드 경고 대화상자 팝업
(6) verify() 메서드
var flag = verify(string); //문자열은 프롬프트 정보, 플래그는 true 또는 false를 반환합니다
(7) 프롬프트 메소드
var info = 프롬프트(string)
<html>
<head>
<script>
function f3(){
var flag = confirm('你喜欢钱吗？');
alert(flag);
}
function f4(){
var info = prompt('请输入手机号');
alert('你输入的手机号是：' + info);
}
</script>
</head>
<body>
<input type="button" value="click me"
onclick="f4();"/>
</body>
</html>2. Document 객체: 전체 문서의 루트를 나타냅니다.
getElementById (id);
createElement(tagName);
write(string); 지정된 위치에 관련 정보를 출력
<html>
<!-- document对象 -->
<head></head>
<body style="font-size:30px;">
开始输出helloword<br/>
<script>
for(i=0; i<100; i++){
document.write('hello world<br/>');
}
</script>
</body>
</html>3, Location 객체: encapsulated 관련 정보 브라우저 주소 표시줄
href 속성: 로드할 페이지 지정
reload 방법: 현재 페이지를 다시 로드합니다.
<html>
<!-- location对象 -->
<head></head>
<body>
<input type="button"
value="跳转到另外一个页面" onclick="location.href = 'day05_04.html';"/><br/>
<input type="button"
value="刷新当前页面" onclick="location.reload();"/>
</body>
</html>새로 고침과 동일합니다. 4, History 개체: 브라우저가 방문한 내용을 캡슐화합니다. 관련 정보 지난 페이지 정보
back(): 뒤로 가기
forward(): 앞으로 가기
go(매개변수): 양수로 앞으로, 음수로 뒤로
<html>
<!-- history对象 -->
<head></head>
<body>
<input type="button"
value="点这里后退" onclick="history.back();"/>
<input type="button"
value="点这里前进" onclick="history.forward();"/>
<input type="button"
value="点这儿后退" onclick="history.go(-1);"/>
</body>
</html>5 , Navigator 객체 : 브라우저 관련 정보를 캡슐화합니다(예: 유형, 버전)
<html>
<!--navigator对象-->
<head></head>
<body>
现在访问的浏览器的相关信息如下：<br/>
<script>
var info;
//for in循环：主要用于遍历对象
for(propName in navigator){ //propName是任意变量
// 将navigator对象的属性名保存到propName变量里
info += propName + ';' +navigator[propName] + '<br/>';
}
document.write(info); //在当前页面输出
</script>
</body>
</html><html>
<!--检测浏览器类型-->
<head>
<script>
function f1(){
if((navigator.userAgent).indexOf('Firefox')>0){
alert("当前浏览器是Firefox");
}else if(navigator.userAgent.indexOf('MSIE')>0){
alert("当前浏览器是IE");
}else{
alert("其他浏览器");
}
}
</script>
</head>
<body>
<input type="button"
value="获得当前浏览器的类型" onclick="f1();"/>
</body>
</html>6, Screen 객체: 브라우저가 위치한 화면의 관련 정보
<html>
<head>
<script>
function f2(){
alert(screen.width + ' ' +
screen.height);
}
</script>
</head>
<body>
<input type="button"
value="获得screen相关信息" onclick="f2();"/>
</body>
</html>
위는 Xiaoqiang의 HTML5 모바일 개발 로드(32) - JavaScript 리뷰 내용입니다. 7. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!
HTML 태그가 웹 개발에 중요한 이유는 무엇입니까?May 02, 2025 am 12:03 AMhtmltagsareessentialforwebdevelopmentasthuctureandenhancewebpages.1) thefinelayout, semantics 및 internactivity.2) semantictagsimproveAccessibility 및 sseo.3) appleasoftagscanoptimizeperformanceandenseRocRossercompatiber.
HTML 태그 및 속성에 일관된 코딩 스타일을 사용하는 것의 중요성을 설명하십시오.May 01, 2025 am 12:01 AM일관된 HTML 인코딩 스타일은 코드의 가독성, 유지 가능성 및 효율성을 향상시키기 때문에 중요합니다. 1) 소문자 태그 및 속성 사용, 2) 일관된 압입 유지, 3) 단일 또는 이중 인용문을 선택하고 고수하십시오. 4) 프로젝트에서 다양한 스타일을 혼합하지 않으십시오.
Bootstrap 4에서 멀티 프로 젝트 회전 목마를 구현하는 방법은 무엇입니까?Apr 30, 2025 pm 03:24 PM솔루션 Bootstrap4에서 다중 프로 젝트 회전 목마를 구현하는 것은 부트 스트랩 4에서 멀티 프로 젝트 회전 목마를 구현하는 것은 쉬운 일이 아닙니다. 부트 스트랩 ...
DeepSeek 공식 웹 사이트는 마우스 스크롤 이벤트를 관통하는 효과를 어떻게 달성합니까?Apr 30, 2025 pm 03:21 PM마우스 스크롤링 이벤트 침투의 효과를 달성하는 방법은 무엇입니까? 웹을 탐색하면 종종 특별한 상호 작용 디자인이 발생합니다. 예를 들어, DeepSeek 공식 웹 사이트에서 � ...
HTML 비디오의 재생 제어 스타일 수정 방법Apr 30, 2025 pm 03:18 PMHTML 비디오의 기본 재생 제어 스타일은 CSS를 통해 직접 수정할 수 없습니다. 1. JavaScript를 사용하여 사용자 정의 컨트롤을 만듭니다. 2. CSS를 통해 이러한 통제를 아름답게합니다. 3. video.js 또는 plyr와 같은 라이브러리를 사용하여 호환성, 사용자 경험 및 성능을 고려하면 프로세스를 단순화 할 수 있습니다.
휴대 전화에서 기본 선택을 사용하면 어떤 문제가 발생합니까?Apr 30, 2025 pm 03:15 PM휴대 전화에서 기본 선택을 사용하는 데있어 잠재적 인 문제는 모바일 애플리케이션을 개발할 때 종종 상자를 선택해야 할 필요가 있습니다. 일반적으로 개발자 ...
휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까?Apr 30, 2025 pm 03:12 PM휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까? 모바일 장치에서 애플리케이션을 개발할 때는 올바른 UI 구성 요소를 선택하는 것이 매우 중요합니다. 많은 개발자 ...
Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하는 방법은 무엇입니까?Apr 30, 2025 pm 03:09 PMThree.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하십시오. 3.js의 Octree를 사용하여 방에서 3 인칭 로밍을 구현하고 충돌을 추가하십시오 ...
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
Dreamweaver Mac版
시각적 웹 개발 도구
