JavaScript로 일반적인 BOM 작업을 구성하고 요약합니다.

이 글은 javascript에 대한 관련 지식을 제공합니다. 주로 창 개체의 일반적인 이벤트, JavaScript 실행 메커니즘 등을 포함하여 BOM 작업과 관련된 문제를 소개합니다. 모두에게 도움이 되기를 바랍니다.

【관련 권장사항: javascript 비디오 튜토리얼, web front-end】

윈도우 객체의 일반적인 이벤트

• 윈도우 로딩 이벤트:

  • window.onload: 페이지 로딩 이벤트, 언제 문서 내용이 완료되었습니다. 로드가 완료되면 호출되는 핸들러 함수가 이벤트(이미지, 스크립트 파일, CSS 파일 등 포함)를 트리거합니다.
  • document.addEventListener('DOMContentLoaded', function(){}): DOM 로딩이 완료된 경우에만, 스타일 시트, 그림, 플래시, 호환성은 제외

• 창 크기 조정 이벤트:

  • 창. onresize: 창 크기 조정 로딩 이벤트

• window.open() 메소드는 지정된 URL로 이동하거나 새 브라우저 창을 여는 데 사용할 수 있습니다.

  • 이 메소드는 4개의 매개변수를 받습니다: 로드됨 URL, 대상 창, 속성 문자열 및 새 창이 브라우저 기록에 현재 로드된 페이지를 대체하는지 여부를 나타내는 부울 값
  • window.open("http://www.wrox.com/", "wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");

• Timer:

  • setInterval(handler: any, timeout?: long , 인수 …: 임의): 순환 호출
  • clearInterval(handle?: long): 취소 setInterval
  • setTimeout(handler: any, timeout?: long, 인수…: 임의): 일회성
  • clearTimeout(handle?: long ) : setTimeout 취소

• window.scroll(x, y)

• window.scrollTo(x, y): 둘은 가로 및 세로 스크롤 막대의 위치를 ​​변경하는 데 동일한 사용법입니다. 페이지에 스크롤바가 있습니다

• window.scrollBy(x, y) : 스크롤바의 누적 스크롤, 양수는 아래로, 음수는 위로 window.scrollBy(0, 10) : 호출될 때 100밀리초마다 스크롤 막대가 10픽셀씩 이동합니다.

• window.getCompulatedStyle(elem, pseudo class)

• Dialog

  • alert
    • alert("프롬프트 문자열")
    • 이 팝업되어 경고 상자를 표시합니다. 경고 상자의 프롬프트 문자열 텍스트
  • confirm
    • confirm("prompt string")
    • 확인 상자를 표시하고 확인 상자에 프롬프트 문자열을 표시합니다
    • 사용자가 "확인" 버튼을 클릭하면 true를 반환하고 "취소"를 클릭합니다. "false를 반환합니다.
  • prompt
    • prompt("프롬프트 문자열","기본값")
    • 입력 상자 표시, 입력 상자에 프롬프트 문자열 표시, 사용자 입력 대기
    • 사용자가 "확인" 버튼을 클릭하면 사용자 입력이 반환되고 "취소"를 클릭하면 null 값이 반환됩니다.

JavaScript 실행 메커니즘

js 스크립트를 실행하고 js 코드를 동기 실행의 실행 스택에 넣습니다. 모드 및 실행 스택 중에 비동기적으로 JS가 발생합니다. 코드(이벤트, 타이머, ajax, 리소스 로딩, 오류)는 웹 API(작업 대기열)에 저장됩니다. 실행 스택의 코드가 완료된 후 작업 대기열로 이동하여 가져옵니다. 실행 후 작업 대기열에서 하나를 가져와 실행하고 작업 대기열의 실행이 완료될 때까지 반복적으로 실행(이벤트 루프)합니다.

location object

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 片段：锚点、链接

개체 속성:

• href*: 전체 URL 가져오기 또는 설정
• host: 호스트 이름(도메인 이름) 반환
• 호스트 이름: 현재 URL의 호스트 이름을 설정하거나 반환합니다.
• post: 포트 번호 반환
• pathname: 경로 반환
• search*: 매개 변수 반환
• hash: 조각(# 뒤 내용) 반환
• protocol: 설정 또는 현재 URL의 프로토콜을 반환합니다.

객체 메서드:

• 할당: href와 마찬가지로 페이지 리디렉션(리디렉션 페이지라고도 함)으로 이동할 수 있습니다.
• replace: 기록이 기록되지 않으므로 현재 페이지를 교체합니다.
• reload: 페이지를 다시 로드합니다. 새로 고침 기능과 동일합니다.

navigator 개체

navigator: 브라우저 구성 정보를 캡슐화하는 개체

• cookieEnabled 当前浏览器是否开启了cookie
  • cookie:在客户端的存储空间，且容量较小根据不同的浏览器有不同的大小，可以做到永久保存 密匙
  • 缺点：特别容易泄露个人信息
• plugins 封装了浏览器安装的所有插件信息
• userAgent 浏览器的名称，内核 版本号 等一些列的字符
• onLine 电脑是否处于脱机状态 电脑联网了吗？
• platform 返回运行浏览器的操作系统平台
• appCodeName 返回浏览器的代码名
• appName 返回浏览器的名称
• appVersion 返回浏览器的平台和版本信息

history对象

window.history 对象包括浏览器的历史（url）集合

• 浏览器的后退功能：history.back()
• 浏览器的向前功能：history.forward()
• 进入历史中的某一个页面：history.go()

screen对象

window.screen 对象包含有关用户的信息

// screen:获得显示设备的分辨率大小
// 完整的分辨率:screen.widht/height
// 如何鉴别客户端的种类 兼容所有的客户端 宽度
//      大屏        中屏            小屏            超小屏
//      lg          md               sm             xs
//      TV          pc               pad            phone
//宽  >= 1200      >=992            >= 768           

• 可用屏幕宽度：screen.availWidth
• 可用屏幕高度：screen.availHeight
• 屏幕高度：screen.Height
• 屏幕宽度：screen.Width
• 屏幕的颜色的位数：colorDepth

元素偏移量offset系列

可以动态得到该元素的位置（偏移）、大小等

• 获取元素距离定位父元素的位置
• 获取元素自身大大小
• ps：返回的数值不带单位

offset系列常用属性：

• element.offseParent：返回作为该元素带有定位的父级元素，如果父级元素都没有定位则返回body
• element.offsetTop*：返回元素相对带有定位父元素上方的偏移
• element.offsetLeft*：返回元素相对带有定位父元素左方的偏移
• element.offsetWidth：返回自身包括padding、边框、内容的宽度，不带单位
• element.offsetHeight：返回自身包括padding、边框、内容的高度，不带单位

元素可视区client系列

动态获取元素的边框大小、元素大小等

常用属性：

• element.clientTop：元素上边框的大小
• element.clientLeft：元素左边框的大小
• element.clientWidth*：返回自身包括padding、内容区的宽度，不含边框，不带单位
• element.clientHeight*：返回自身包括padding、内容区的高度，不含边框，不带单位

元素滚动scroll系列

动态获取元素的大小、滚动距离

常用属性

• element.srcollTop*：返回被卷去的上侧距离，不带单位
• element.srcollLeft*：返回被卷去的左侧距离，不带单位
• element.srcollWidth：返回自身实际的宽度，不含边框，不带单位
• element.srcollHeight：返回自身实际的高度，不含边框，不带单位

滚动条在滚动的时候会触发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 标准模式

查看元素的几何尺寸 ES5新增了解

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}
    }}

属性

状态栏

• defaultStatus 改变浏览器状态栏的默认显示
• status 临时改变浏览器状态的显示

窗口位置

• IE
  • screenLeft는 창 왼쪽 위 모서리의 x 좌표를 선언합니다.
  • screenTop은 창 왼쪽 위 모서리의 y 좌표를 선언합니다.
  • document.body.screenLeft
  • document.documentElement.screenLeft는 숫자를 선언합니다. 현재 문서가 오른쪽으로 스크롤된 픽셀 수
  • document.body.screenTop
  • document.documentElement.screenTop은 현재 문서가 오른쪽으로 스크롤한 픽셀 수를 선언합니다
• !IE
  • screenX는 x 좌표를 선언합니다.
  • screenY는 창의 왼쪽 상단 모서리의 y를 선언합니다. 좌표
  • pageXOffset은 현재 문서가 오른쪽으로 스크롤한 픽셀 수를 선언합니다.
  • pageYOffset은 현재 문서의 픽셀 수를 선언합니다. 오른쪽으로 스크롤했습니다
• FF
  • innerHeight는 창의 문서 표시 영역 높이를 반환합니다.
  • innerWidth는 창의 문서 표시 영역의 너비를 반환합니다. 표시 영역의 너비
  • outerWidth 창의 외부 너비를 반환합니다
  • outerHeight 창의 외부 높이를 반환합니다

기타 속성

• opener는 동일한 도메인 이름 아래의 교차 양식 간 통신을 실현할 수 있습니다. 한 양식에는 다른 양식 오프너가 포함되어야 합니다.
• closed는 현재 창이 다음과 같은 경우 true를 반환합니다. Closed
• name은 창의 이름을 설정하거나 반환합니다.
• self는 현재 창에 대한 참조를 반환합니다

[관련 권장 사항: javascript 비디오 튜토리얼, 웹 프론트 엔드]

위 내용은 JavaScript로 일반적인 BOM 작업을 구성하고 요약합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!