이 글은 javascript에 대한 관련 지식을 제공합니다. 주로 창 개체의 일반적인 이벤트, JavaScript 실행 메커니즘 등을 포함하여 BOM 작업과 관련된 문제를 소개합니다. 모두에게 도움이 되기를 바랍니다.
【관련 권장사항: javascript 비디오 튜토리얼, web front-end】
윈도우 로딩 이벤트:
창 크기 조정 이벤트:
window.open() 메소드는 지정된 URL로 이동하거나 새 브라우저 창을 여는 데 사용할 수 있습니다.
window.open("http://www.wrox.com/", "wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");Timer:
window.scroll(x, y)
window.scrollTo(x, y): 둘은 가로 및 세로 스크롤 막대의 위치를 변경하는 데 동일한 사용법입니다. 페이지에 스크롤바가 있습니다
window.scrollBy(x, y) : 스크롤바의 누적 스크롤, 양수는 아래로, 음수는 위로 window.scrollBy(0, 10) : 호출될 때 100밀리초마다 스크롤 막대가 10픽셀씩 이동합니다.
window.getCompulatedStyle(elem, pseudo class)
Dialog
js 스크립트를 실행하고 js 코드를 동기 실행의 실행 스택에 넣습니다. 모드 및 실행 스택 중에 비동기적으로 JS가 발생합니다. 코드(이벤트, 타이머, ajax, 리소스 로딩, 오류)는 웹 API(작업 대기열)에 저장됩니다. 실행 스택의 코드가 완료된 후 작업 대기열로 이동하여 가져옵니다. 실행 후 작업 대기열에서 하나를 가져와 실행하고 작업 대기열의 실행이 완료될 때까지 반복적으로 실행(이벤트 루프)합니다.
window.history를 사용하여 가져옵니다. 현재 페이지의 주소 URL을 입력하고 브라우저를 새 페이지로 리디렉션
http://www.itcast.cn:80/index.html?name=andy&age=1#link http：通信协议 www.itcast.cn：域名80：端口 index.html：路径?name=andy&age=1：参数 #link 片段：锚点、链接
개체 속성:
객체 메서드:
navigator: 브라우저 구성 정보를 캡슐화하는 개체
window.history 对象包括浏览器的历史（url）集合
window.screen 对象包含有关用户的信息
// screen:获得显示设备的分辨率大小 // 完整的分辨率:screen.widht/height // 如何鉴别客户端的种类 兼容所有的客户端 宽度 // 大屏 中屏 小屏 超小屏 // lg md sm xs // TV pc pad phone //宽 >= 1200 >=992 >= 768
可以动态得到该元素的位置（偏移）、大小等
offset系列常用属性：
动态获取元素的边框大小、元素大小等
常用属性：
动态获取元素的大小、滚动距离
常用属性
滚动条在滚动的时候会触发onscroll事件
window.pageXOffset/pageYOffset IE8 及IE8以下不兼容 document.body/documentElement.scrollLeft/scrollTop兼容性比较混乱，用时取两个值相加，因为不可能存在两个值同时有值 封装兼容性方法，求滚动条滚轮滚动距离getScrollOffet()
/*
封装一个获取滚动条的滚动距离
返回：x:水平滚动条滚动的距离 y:垂直滚动条滚动的距离
*/function getScrollOffet(){
if(window.pageXOffset){
return {//对象的{}一定要在关键字后，否则系统会自动加上; 则返回值会是undefined
x : window.pageXOffset,
y : window.pageYOffset }
}else{//兼容IE8以及以下
return {
x : document.body.scrollLeft + document.documentElement.scrollLeft,
y : document.body.scrollTop + document.documentElement.scrollTop }
}}window.innerWidth/innerHeightIE8及IE8以下不兼容(注意：这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度) document.documentElement.clientWidth/clientHeight标准模式下，任意浏览器都兼容 document.body.clientWidth/clientHeight适用于怪异某事下的浏览器 封装兼容性方法，返回浏览器视口尺寸getViewportOffset()
/*封装返回浏览器视口尺寸
返回值：
w ：视口的宽度
h : 视口的高度
*/function getViewportOffset(){
if(window.innerWidth){
return {
w : window.innerWidth,
h : window.innerHeight }
}else{ //兼容IE8以及以下的浏览器
if(document.compatMode == 'BackCompat'){
//怪异渲染模式下
return {
w : document.body.clientWidth,
h : document.body.clientHeight }
}else{
// 标准模式
return {
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight }
}
}}console.log(document.compatMode);// BackCompat 怪异模式// CSS1Compat 标准模式domElement.getBoundingClientRect() 兼容性很好；返回一个对象，该对象中有left、top、right、bottom等属性，left、top代表元素左上角的X和Y坐标， right和bottom表示元素右下角的X和Y坐标height 和 width属性老版本IE未实现 返回的结果并不是’实时的’
// 获取元素在文档中的位置function getElementPosition(target){
// 支持 BoundingClientRect()方法
if(0 && target.getBoundingClientRect){
var pos = target.getBoundingClientRect();
return { // 涉及到滚动条有移动的情况下 加上滚动条的位置
x : pos.left + Math.max(document.body.scrollLeft, document.documentElement.scrollLeft),
y : pos.top + Math.max(document.body.scrollTop, document.documentElement.scrollTop)
}
} else {
var pos = {
left : 0,
top : 0
}
var _elm = target;
while(target.offsetParent){
if(_elm == target){//首次累加left 和 top
pos.left += target.offsetLeft;
pos.top += target.offsetTop;
}else{
pos.left += target.offsetLeft + target.clientLeft;
pos.top += target.offsetTop + target.clientTop;
}
// target 重新赋值
target = target.offsetParent;
}
return { x : pos.left, y : pos.top}
}}状态栏
窗口位置
기타 속성
[관련 권장 사항: javascript 비디오 튜토리얼, 웹 프론트 엔드]
위 내용은 JavaScript로 일반적인 BOM 작업을 구성하고 요약합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
