지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

JavaScript 고급 BOM 기술에 대한 심층 분석

WBOY
풀어 주다： 2022-01-27 17:10:53
앞으로
2246명이 탐색했습니다.

이 기사는 JavaScript의 BOM에 대한 관련 지식을 제공합니다. BOM은 일련의 관련 개체로 구성되며 각 개체는 많은 메서드와 속성을 제공합니다.

JavaScript 고급 BOM 기술에 대한 심층 분석

디렉터리 개요

JavaScript 고급 BOM 기술에 대한 심층 분석

1.BOM 개요

  • BOM = 브라우저 개체 모델 Browser 개체 모델
  • 콘텐츠와 독립적으로 브라우저 창과 상호 작용하는 개체를 제공하며 핵심 개체는 창입니다.
  • BOM은 일련의 관련 개체로 구성되며 각 개체는 많은 메서드와 속성을 제공합니다.
  • BOM은 표준이 부족합니다. JavaScript 구문에 대한 표준화 조직은 ECMA이고 DOM에 대한 표준화 조직은 원래 W3C의 일부입니다. Netscape 브라우저 표준
DOM BOM
Document Object Model Browser Object Model
DOM은 document을객체로 취급합니다. 한번 살펴보세요 browser를 object
DOM의 최상위 객체는 document BOM의 최상위 객체는 window
DOM입니다. 가장 배워야 할 것은 조작하는 것입니다. 페이지 요소 BOM은 브라우저 창이 상호 작용하는 일부 개체를 학습합니다.
DOM은 W3C 표준 사양입니다. BOM은 브라우저 제조업체가 해당 브라우저에서 정의하며 호환성이 낮습니다

1.1 BOM의 구성

JavaScript 고급 BOM 기술에 대한 심층 분석

  • BOM은 DOM보다 큽니다. 여기에는 DOM이 포함되어 있습니다.

  • window 개체는 브라우저의 최상위 개체이며 이중 역할을 갖습니다.

  • JS가 브라우저 창에 액세스하기 위한 인터페이스입니다.

  • 전역 개체입니다. 전역 범위에 정의된 변수 및 함수는 호출 시 창을 생략할 수 있습니다. 앞서 학습한 대화 상자는 alert(), 프롬프트( )등.

  • alert()、prompt()等。

  • 注意：window下的一个特殊属性 window.name

// 定义在全局作用域中的变量会变成window对象的属性
var num = 10;
console.log(window.num);
// 10

// 定义在全局作用域中的函数会变成window对象的方法
function fn() {
    console.log(11);
}
console.fn();
// 11

var name = 10;  //不要用这个name变量,window下有一个特殊属性window.name
console.log(window.num);
로그인 후 복사

2、window 对象的常见事件

2.1、窗口加载事件

window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，CSS文件等），就调用的处理函数。

window.onload = function(){
    };// 或者window.addEventListener("load",function(){});
로그인 후 복사

注意：

  • 有了window.onload就可以把JS代码写到页面元素的上方

  • 因为onload是等页面内容全部加载完毕，再去执行处理函数

  • window.onload 传统注册事件方式，只能写一次

  • 如果有多个，会以最后一个window.onload为准

  • 如果使用addEventListener 则没有限制

document.addEventListener('DOMContentLoaded',function(){})
로그인 후 복사

接收两个参数：

  • DOMCountentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等

  • 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间

  • 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded事件比较合适。

2.1.1、区别

  • load等页面内容全部加载完毕，包括页面dom元素，图片，flash，css等
  • DOMContentLoaded 是DOM加载完毕，不包含图片 flash css 等就可以执行，加载速度比load更快一些
<script>
    // window.onload = function() {
    //     var btn = document.querySelector('button');
    //     btn.addEventListener('click', function() {
    //         alert('点击我');
    //     })
    // }
    // window.onload = function() {
    //     alert(22);
    // }
    
    window.addEventListener('load', function() {
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            alert('点击我');
        })
    })
    window.addEventListener('load', function() {

        alert(22);
    })
    document.addEventListener('DOMContentLoaded', function() {
            alert(33);
        })
        // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
        // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些</script>
로그인 후 복사

2.2、调整窗口大小事件

window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数

window.onresize = function() {}// 或者window.addEventListener('resize',function(){});
로그인 후 복사
  • 只要窗口大小发生像素变化，就会触发这个事件
  • 我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度
    <script>
        window.addEventListener('load', function() {
            var p = document.querySelector('p');
            window.addEventListener('resize', function() {
                console.log(window.innerWidth);

                console.log('变化了');
                if (window.innerWidth <= 800) {
                    p.style.display = 'none';
                } else {
                    p.style.display = 'block';
                }

            })
        })
    </script>
    <p></p>
로그인 후 복사

3、定时器

window 对象给我们提供了两个定时器

  • setTimeout()
  • setInterval()

3.1、setTimeout()定时器

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

window.setTimeout(调用函数,[延迟的毫秒数]);
로그인 후 복사

注意：

  • window可以省略
  • 这个调用函数
    • 可以直接写函数
    • 或者写函数名
    • 或者采取字符串 ‘函数名()’ （不推荐）
  • 延迟的毫秒数省略默认是0，如果写，必须是毫秒
  • 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
  • setTimeout() 这个调用函数我们也称为回调函数callback
  • 普通函数是按照代码顺序直接调用，而这个函数，需要等待事件，事件到了才会去调用这个函数，因此称为回调函数。
    <script>
        // 1. setTimeout 
        // 语法规范：  window.setTimeout(调用函数, 延时时间);
        // 1. 这个window在调用的时候可以省略
        // 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
        // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
        // 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
        // setTimeout(function() {
        //     console.log('时间到了');

        // }, 2000);
        function callback() {
            console.log('爆炸了');

        }
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
        // setTimeout('callback()', 3000); // 我们不提倡这个写法
    </script>
로그인 후 복사

3.2、clearTimeout()停止定时器

  • clearTimeout()方法取消了先前通过调用 setTimeout()建立的定时器
window.clearTimeout(timeoutID)
로그인 후 복사

注意：

  • window可以省略
  • 里面的参数就是定时器的标识符
    <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function() {
            console.log('爆炸了');
        }, 5000);
        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })
    </script>
로그인 후 복사

3.3、setInterval()定时器

  • setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
window.setInterval(回调函数,[间隔的毫秒数]);
로그인 후 복사
  • window可以省略
  • 这个回调函数:
    • 可以直接写函数
    • 或者写函数名
    • 或者采取字符 ‘函数名()’
  • 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次
    <script>
        // 1. setInterval 
        // 语法规范：  window.setInterval(调用函数, 延时时间);
        setInterval(function() {
            console.log('继续输出');

        }, 1000);
        // 2. setTimeout  延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
        // 3. setInterval  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
    </script>
로그인 후 복사

3.4、clearInterval()停止定时器

  • clearInterval ( ) 方法取消了先前通过调用 setInterval()Attention
    • : window

    <button>开启定时器</button>
    <button>停止定时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; // 全局变量  null是一个空对象
        begin.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('ni hao ma');

            }, 1000);
        })
        stop.addEventListener('click', function() {
            clearInterval(timer);
        })
    </script>
로그인 후 복사
로그인 후 복사

2의 특수 속성 window.name.window object

🎜🎜2.1 Window loading event🎜🎜🎜 창. .onload는 창(페이지) 로딩 이벤트입니다. 이 이벤트는 문서 내용(이미지, 스크립트 파일, CSS 파일 등 포함)이 완전히 로드되고 처리 함수가 호출될 때 발생합니다. 🎜
    <button>点击</button>
    <script>
        // this 指向问题 一般情况下this的最终指向的是那个调用它的对象

        // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
        console.log(this);

        function fn() {
            console.log(this);

        }
        window.fn();
        window.setTimeout(function() {
            console.log(this);

        }, 1000);
        // 2. 方法调用中谁调用this指向谁
        var o = {
            sayHi: function() {
                console.log(this); // this指向的是 o 这个对象

            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     console.log(this); // this指向的是btn这个按钮对象

        // }
        btn.addEventListener('click', function() {
                console.log(this); // this指向的是btn这个按钮对象

            })
            // 3. 构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); // this 指向的是fun 实例对象

        }
        var fun = new Fun();
    </script>
로그인 후 복사
로그인 후 복사
🎜🎜참고: 🎜🎜🎜🎜🎜window.onload를 사용하면 페이지 요소 위에 JS 코드를 작성할 수 있습니다🎜🎜🎜🎜onload는 대기 페이지이기 때문입니다. 모든 콘텐츠가 로드되면 처리 기능을 실행합니다🎜🎜🎜🎜window.onload 기존 등록 이벤트 방법은 한 번만 작성할 수 있습니다🎜🎜🎜🎜여러 개가 있는 경우 마지막 창 .onload가 사용됩니다. 🎜🎜🎜🎜🎜addEventListener를 사용하면 제한이 없습니다. 🎜🎜🎜🎜
console.log(1);setTimeout(function() {
    console.log(3);},1000);console.log(2);
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
🎜두 개의 매개변수를 받습니다: 🎜🎜🎜🎜🎜DOMCountentLoaded 이벤트는 DOM 로딩 시에만 트리거됩니다. 스타일 시트, 그림, 플래시 등을 제외하고 완료되었습니다. 🎜🎜🎜🎜🎜페이지에 그림이 많으면 사용자 액세스에서 온로드 트리거까지 시간이 오래 걸릴 수 있습니다. 🎜🎜🎜🎜대화 효과를 얻을 수 없습니다. 이는 필연적으로 사용자 경험에 영향을 미칩니다. 이 경우 DOMContentLoaded 이벤트를 사용하는 것이 더 적합합니다. 🎜🎜🎜

2.1.1, 차이

🎜🎜load 및 페이지 DOM 요소, 그림, 플래시, CSS 등을 포함한 기타 페이지 콘텐츠가 모두 로드됩니다. 🎜🎜DOMContentLoaded는 DOM이 로드되었음을 의미하며, 이미지, 플래시 CSS 등을 포함하지 않고 실행할 수 있습니다. 로드 속도는 load🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log(1);setTimeout(function() {     console.log(3);},0);console.log(2);</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜🎜2.2, 창 크기 조정 이벤트🎜🎜🎜<code>보다 빠릅니다. window.onresize 예 창 크기 조정 로딩 이벤트, 트리거될 때 호출되는 핸들러 함수🎜
console.log(1);setTimeout(function() {
    console.log(3);},1000);console.log(2);
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
🎜🎜창 크기가 픽셀 단위로 변경되는 한 이 이벤트가 트리거됩니다🎜🎜우리는 종종 이 이벤트를 사용하여 완료합니다. 반응형 레이아웃. window.innerWidth 현재 화면의 너비🎜🎜
console.log(1);setTimeout(function() {
    console.log(3);},0);console.log(2);
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

🎜3.Timer🎜

🎜window 객체는 두 개의 타이머🎜🎜🎜setTimeout() code>🎜🎜<code>setInterval()🎜🎜🎜🎜3.1, setTimeout() 타이머🎜🎜🎜setTimeout() 메서드는 호출자가 호출을 실행하는 데 사용됩니다. 타이머가 만료된 후 기능을 수행합니다. 🎜
// 3. 第三个问题console.log(1);document.onclick = function() {
    console.log('click');}console.log(2);setTimeout(function() {
    console.log(3)}, 3000)
로그인 후 복사
로그인 후 복사
🎜🎜참고🎜: 🎜🎜🎜window는 생략 가능🎜🎜이 호출 함수🎜🎜🎜함수를 직접 작성하거나🎜🎜🎜🎜함수 이름을 작성하거나🎜🎜🎜문자열을 사용할 수 있습니다. 🎜' function Name()'🎜 (권장하지 않음)🎜🎜🎜🎜밀리초 단위의 지연은 생략하고 기본값은 0입니다. 쓴다면 밀리초여야 합니다🎜🎜타이머가 많을 수 있기 때문에 식별자를 할당하는 경우가 많습니다. the Timer🎜🎜setTimeout() 이 호출 함수는 🎜callback function🎜🎜callback🎜🎜🎜이라고도 합니다. 일반적인 함수는 코드 순서대로 직접 호출되지만 이 함수는 이벤트를 기다려야 합니다. , 이벤트가 도착할 때만 함수가 호출되므로 콜백 함수라고 합니다. 🎜🎜
protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link
로그인 후 복사
로그인 후 복사
🎜🎜3.2,clearTimeout()은 타이머를 중지합니다🎜🎜🎜🎜clearTimeout() 메서드는 setTimeout()🎜🎜
    <button>点击</button>
    <p></p>
    <script>
        var btn = document.querySelector('button');
        var p = document.querySelector('p');
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.href = 'http://www.itcast.cn';
            } else {
                p.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }

        }, 1000);
    </script>
로그인 후 복사
로그인 후 복사
을 호출하여 이전에 설정한 타이머를 취소합니다. 🎜참고🎜: 🎜🎜🎜window는 생략 가능🎜🎜내부 매개변수는 타이머의 식별자입니다🎜🎜
    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 记录浏览历史，所以可以实现后退功能
            // location.assign('http://www.itcast.cn');
            // 不记录浏览历史，所以不可以实现后退功能
            // location.replace('http://www.itcast.cn');
            location.reload(true);
        })
    </script>
로그인 후 복사
로그인 후 복사
🎜🎜3.3, setInterval() 타이머🎜🎜🎜🎜setInterval( ) 메소드는 함수를 반복적으로 호출하며, 매번 콜백 함수를 호출할 때마다🎜🎜
    
로그인 후 복사
로그인 후 복사
        用户名：               
🎜🎜window는 이 콜백 함수를 생략🎜🎜할 수 있습니다.🎜🎜함수를 직접 작성할 수도 있습니다🎜 🎜또는 함수 이름을 쓰거나🎜🎜또는 '함수 이름()' 문자를 사용합니다🎜🎜🎜🎜첫 번째 실행도 밀리초 간격 후에 실행되고 그 다음에는 밀리초마다 실행됩니다🎜🎜
    <p></p>
    <script>
        console.log(location.search); // ?uname=andy
        // 1.先去掉？  substr('起始的位置'，截取几个字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var p = document.querySelector('p');
        // 3.把数据写入p中
        p.innerHTML = arr[1] + '欢迎您';
    </script>
로그인 후 복사
로그인 후 복사
🎜🎜3.4,clearInterval()이 중지됩니다. 타이머 🎜🎜🎜🎜clearInterval( ) 메소드는 setInterval()을 호출하여 이전에 설정된 타이머를 취소합니다. 🎜🎜🎜🎜참고 🎜: 🎜
  • window可以省略
  • 里面的参数就是定时器的标识符
    <button>开启定时器</button>
    <button>停止定时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; // 全局变量  null是一个空对象
        begin.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('ni hao ma');

            }, 1000);
        })
        stop.addEventListener('click', function() {
            clearInterval(timer);
        })
    </script>
로그인 후 복사
로그인 후 복사

3.5、this指向

  • this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁

现阶段，我们先了解一下几个this指向

  • 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
  • 方法调用中谁调用this指向谁
  • 构造函数中this指向构造函数实例
    <button>点击</button>
    <script>
        // this 指向问题 一般情况下this的最终指向的是那个调用它的对象

        // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
        console.log(this);

        function fn() {
            console.log(this);

        }
        window.fn();
        window.setTimeout(function() {
            console.log(this);

        }, 1000);
        // 2. 方法调用中谁调用this指向谁
        var o = {
            sayHi: function() {
                console.log(this); // this指向的是 o 这个对象

            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     console.log(this); // this指向的是btn这个按钮对象

        // }
        btn.addEventListener('click', function() {
                console.log(this); // this指向的是btn这个按钮对象

            })
            // 3. 构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); // this 指向的是fun 实例对象

        }
        var fun = new Fun();
    </script>
로그인 후 복사
로그인 후 복사

4、JS执行机制

4.1、JS是单线程

  • JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。
  • 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

4.2、一个问题

以下代码执行的结果是什么？

console.log(1);setTimeout(function() {
    console.log(3);},1000);console.log(2);
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

那么以下代码执行的结果又是什么？

console.log(1);setTimeout(function() {
    console.log(3);},0);console.log(2);
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

4.3、同步和异步

  • 为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程
  • 于是，JS 中出现了同步和异步。
  • 同步:
    • 前一个任务结束后再执行后一个任务
  • 异步：
    • 在做这件事的同时，你还可以去处理其他事情

同步任务

  • 同步任务都在主线程上执行，形成一个执行栈

异步任务

  • JS中的异步是通过回调函数实现的
  • 异步任务有以下三种类型
    • 普通事件，如click,resize等
    • 资源加载，如load,error等
    • 定时器，包括setInterval,setTimeout等
  • 异步任务相关回调函数添加到任务队列中

JavaScript 고급 BOM 기술에 대한 심층 분석

  1. 先执行执行栈中的同步任务
  2. 异步任务(回调函数)放入任务队列中
  3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

JavaScript 고급 BOM 기술에 대한 심층 분석

此时再来看我们刚才的问题：

console.log(1);setTimeout(function() {
    console.log(3);},1000);console.log(2);
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
  • 执行的结果和顺序为 1、2、3
console.log(1);setTimeout(function() {
    console.log(3);},0);console.log(2);
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
  • 执行的结果和顺序为 1、2、3
// 3. 第三个问题console.log(1);document.onclick = function() {
    console.log('click');}console.log(2);setTimeout(function() {
    console.log(3)}, 3000)
로그인 후 복사
로그인 후 복사

JavaScript 고급 BOM 기술에 대한 심층 분석

同步任务放在执行栈中执行，异步任务由异步进程处理放到任务队列中，执行栈中的任务执行完毕会去任务队列中查看是否有异步任务执行，由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。

5、location对象

  • window 对象给我们提供了一个 location属性用于获取或者设置窗体的url，并且可以解析url。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

5.1、url

==统一资源定位符（uniform resouce locator）==是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

url 的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link
로그인 후 복사
로그인 후 복사
组成 说明
protocol 通信协议 常用的http,ftp,maito等
host 主机(域名) www.itheima.com
port 端口号，可选
path 路径 由零或多个'/'符号隔开的字符串
query 参数 以键值对的形式，通过&符号分隔开来
fragment 片段 #后面内容 常见于链接 锚点

5.2、location对象属性

location对象属性 返回值
location.href 获取或者设置整个URL
location.host 返回主机（域名）www.baidu.com
location.port 返回端口号，如果未写返回空字符串
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段 #后面内容常见于链接 锚点

重点记住：href和search

需求：5s之后跳转页面

    <button>点击</button>
    <p></p>
    <script>
        var btn = document.querySelector('button');
        var p = document.querySelector('p');
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.href = 'http://www.itcast.cn';
            } else {
                p.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }

        }, 1000);
    </script>
로그인 후 복사
로그인 후 복사

5.3、location对象方法

location对象方法 返回值
location.assign() 跟href一样，可以跳转页面（也称为重定向页面）
location.replace() 替换当前页面，因为不记录历史，所以不能后退页面
location.reload() 重新加载页面，相当于刷新按钮或者 f5 ，如果参数为true 强制刷新 ctrl+f5 
    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 记录浏览历史，所以可以实现后退功能
            // location.assign('http://www.itcast.cn');
            // 不记录浏览历史，所以不可以实现后退功能
            // location.replace('http://www.itcast.cn');
            location.reload(true);
        })
    </script>
로그인 후 복사
로그인 후 복사

5.4、获取URL参数

我们简单写一个登录框，点击登录跳转到 index.html

    
로그인 후 복사
로그인 후 복사
        用户名：               

接下来我们写 index.html

    <p></p>
    <script>
        console.log(location.search); // ?uname=andy
        // 1.先去掉？  substr('起始的位置'，截取几个字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var p = document.querySelector('p');
        // 3.把数据写入p中
        p.innerHTML = arr[1] + '欢迎您';
    </script>
로그인 후 복사
로그인 후 복사

这样我们就能获取到路径上的URL参数

6、navigator对象

  • navigator 对象包含有关浏览器的信息，它有很多属性
  • 我们常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值

下面前端代码可以判断用户是用哪个终端打开页面的，如果是用 PC 打开的，我们就跳转到 PC 端的页面，如果是用手机打开的，就跳转到手机端页面

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }
로그인 후 복사

7、history对象

  • window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互
  • 该对象包含用户（在浏览器窗口中）访问过的 URL。
history对象方法 作用
back() 可以后退功能
forward() 前进功能
go(参数) 前进后退功能，参数如果是 1 前进1个页面 如果是 -1 后退1个页面 
    <a>点击我去往列表页</a>
    <button>前进</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // history.forward();
            history.go(1);
        })
    </script>
로그인 후 복사

相关推荐：javascript学习教程

위 내용은 JavaScript 고급 BOM 기술에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
html javascript 前端
원천：csdn.net
이전 기사：Nest.js를 사용하여 노드에서 MongoDB 데이터베이스에 연결하는 방법에 대해 이야기해 보겠습니다. 다음 기사：Node.js의 버퍼 자세히 살펴보기
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿