JSAPI

简介

• Web APIs 是w3c组织的标准

• 主要学习DOM 和 BOM

• 是JS独有的部分

• 主要学习页面交互功能

API：是一些预定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节

Web API：是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

DOM

文档对象模型（Document Object Model，简称DOM），是w3c组织推荐的处理可扩展标记语言（html或者xml）的标准编程接口

w3c已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式

获取元素

• 根据ID获取

  <div id="time">
      2022.1.24
  </div>
  <script>
  var timer = document.getElementById('time');
  </script>
  //1.因为文档页面从上往下加载，所以先得有标签，script写在标签下面
  //2.id是大小写敏感的 字符串
  //3.返回的是一个元素 对象
  console.dir();
  //打印返回的元素对象，更好的查看里面的属性和方法

• 根据标签名获取

  使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合

  document.getElementsByTagName()
  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
  </ul>
  console.log(document.getElementsByTagName(li));//输出1、2、3、4
  //返回的是以伪数组形式存储的
  //想要依次打印里面的元素对象，采取遍历的方式
  //如果页面中只有一个该元素，返回的还是伪数组的形式
  //如果页面中没有该元素，返回的是空的伪数组

  还可以获取某个元素（父元素）内部所有指定标签名的子元素

  element.getElementsByTagName()
  //element=父元素。父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己
  <ul>
      <li>1</li>
  </ul>
  <ol id = "ol">
      <li>a</li>
  </ol>
  //获取ol中的li
  var ol = document.getElementsById('ol');
  console.log(ol.getElementsByTagName('li'));

• 通过HTML5新增的方法获取

  1. 根据类名

     document.getElementsByClassName('类名');

  2. 根据指定选择器返回第一个元素对象

     document.querySelector('选择器');
     //如果是类选择器，前面需要加.
     //id选择器前需要加#
     //标签选择器则直接写上

  3. 根据指定选择器返回所有

     document.querySelectorAll('选择器');
     //返回指定选择器的所有元素对象

• 特殊元素获取

  获取body元素

  document.body

  获取html元素

  document.documentElement

事件基础

JS使我们有能力创建动态页面，而事件是可以被JS侦测到的行为

事件三要素

事件由三部分组成：

• 事件源

  事件被触发的对象

• 事件类型

  如何触发、什么事件 （比如鼠标经过、鼠标点击（onclick）、还是键盘按下）

• 事件处理程序

  通过函数赋值的方式完成

整体：

//点击按钮（唐伯虎），弹出对话框（点秋香）
<button id="btn">
    唐伯虎
</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = fuction(){
        alert('点秋香')
    }
</script>

执行事件的步骤

1. 获取事件源

2. 注册事件（绑定事件）

3. 添加事件处理程序（采取函数赋值形式）

<div>
    123
</div>
//1. 获取事件源
var div = document.querySelector('div');
//2. 绑定事件
div.onclick
//3. 添加事件处理程序
div.onclick = fuction(){
    console.log('我被点击了');
}

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发
contextmenu	禁止鼠标右键菜单
selectstart	禁止鼠标选中

操作元素

JS的DOM操作可以改变网页内容、结构、样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性

改变元素内容

element.innerText

从起始位置到终止位置的内容，但他去除html标签（在内容中加上html标签不识别），同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签（在内容中加html标签可以使用），同时保留空格和换行

修改元素属性

<button id="ldh">刘德华</button>
<button id="zxy">张学友</button>
<img src="图片地址" alt="">
​
<script>
    /修改元素属性：  src
    /1.获取元素
    var ldh = document.getElementById('ldh');
    var zxy = document.getElementById('zxy');
    var img = document.querySelector('img');
    /2.注册事件
    zxy.onclick = fuction(){
        img.src = '张学友的图片地址';
    }/点击张学友按钮，图片变成张学友的图
    ldh.onclick = fuction(){
        img.src = '刘德华的图片地址'
    }/点击刘德华按钮，图片变成刘德华的图
</script>

修改表单属性

<button>按钮</button>
<input type="text" value="输入内容">
<script>
    /1.获取元素
    var btn = document.querySelector('button');
    var input = document.querySelector('input');
    /2.注册事件，处理程序
    btn.onclick = fuction(){
        input.value = '被点击了';/点击按钮后，input中的value值将会变成被点击了
        this.disabled = true;/disabled：禁用;this指向的是时间函数的调用者-btn;点击按钮之后，按钮将被禁用
    }
</script>

样式属性操作

• JS里的样式采取驼峰命名法

• JS修改style样式操作，产生的是行内样式，权重比较高

//html
<div>
</div>

//css
div{
    width:300px;
    background-color:pink;
}

//js
var div = document.querySelector('div');
div.onlick = fuction(){
    this.style.backgroundColor = 'red' ;/点击div后pink色变red色
    this.style.width = '666px';/点击div后宽度变为666px
}

或：

className方法：

//html
<div>
</div>

//css
div{
    width:300px;
    background-color:pink;
}
.change{
    background-color:red;
    sidth:666px;
}

//js
var div = document.querySelector('div');
div.onlick = fuction(){
    this.className = 'change';//点击div之后给div添加一个change的类名
}

会直接覆盖掉原来的元素样式，会直接更改元素的类名，覆盖原先的类名

/如果不想覆盖原来的类名可以：
this.className = '原来的类名 change';

如何让js代码自己触发事件

btn.onclick();

自定义属性值

目的：为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中

但是有些自定义属性不容易判断是元素内置属性还是自定义属性

所以H5新增了自定义属性：

H5规定以data-开头的都是自定义属性

获取自定义属性值

• 获取元素的属性值：element.属性

• element.getAttribute('属性')

<div id = "demo" index="1"></div>
<script>
    var div = document.querySelector('div');
    /1.
    console.log(div.id);/输出demo
    /2.
    console.log(div.getAttribute('id'));/输出demo
    console.log(div.getAttribute('index'));/输出1
    //index就是自定义属性，只能通过getAttribute来获取
</script>

区别：

element.属性 获取内置属性值（元素本身自带的属性）

element.getAttribute('属性') 主要获得自定义的属性

设置自定义属性值

• element.属性 = '值'

• element.setAttribute('属性','值');

<div id="demo" index="1" class="nav" ></div>
<script>
    /1.
    div.id = 'test';/将div的id值修改为test
    div.className = 'navs';/将div的class值修改为navs
    /2.
    div.setAttribute('index',2);/将div的index值修改为2
    div.setAttribute('class','footer');/将div的class值修改为footer
</script>

区别：

element.属性 = '值' 设置内置属性值

element.setAttribute('属性','值'); 主要设置自定义属性

移除属性

element.removeAttribute('属性');

<div id="demo" index="1" class="nav" ></div>
<script>
    div.removeAttribute('index');/移出index属性
</script>

节点操作

可以用来获取元素

一般节点至少拥有node Type（节点类型）、nodeName（节点名字）、nodeValue（节点值）这三个基本属性

• 元素节点 node Type为1

• 属性节点 node Type为2

• 文本节点 node Type为3（文本节点包含文字、空格、换行等）

节点层级

利用DOM树可以把节点划分为不用的层级，常见的是父子兄层级关系

1. 父节点 parentNode

   得到的是离元素最近的父级节点

   <div class="demo">
       <div class="box">
           <span class="erweima">x</span>
       </div>
   </div>
   <script>
       var erweima = document.querySelector('.erweima');
       console.log(erweima.parentNode);/得到的是box
   </script>

2. 子节点 parentNode.childNodes

   返回包含指定节点的子节点集合，该集合为即时更新的集合

   注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等，如果只想获得里面的元素节点，则需要专门处理，所以一般不提倡使用childNodes

   children :返回所有子元素节点。只返回子元素节点，其余节点不返回

   <ul>
       <li></li>
       <li></li>
       <li></li>
   </ul>
   <script>
       var ul = document.querySelector('ul');
       console.log(ul.children);//只返回三个li
   </script>

   返回第x个子节点

   <script>
       console.log(ul[0])//返回ul中的索引号为0的子节点
       console.log(ul[1])//返回ul中的索引号为1的子节点
       console.log(ul[ul.children.length - 1])//返回ul中最后的子节点
   </script>

3. 兄弟节点

   node.nextSibling下一个节点

   node.previousSibling上一个节点

   返回当前元素的下/上一节点（包含元素节点和文本节点等等）

   node.nextElementSibling下一个节点

   node.previousElementSibling上一个节点

   返回当前元素的下/上一个元素节点（兼容性IE9以上才支持）

创建节点

<ul>
    <li></li>
</ul>
<script>
    /1.创建节点元素节点
    var li = document.createElement('li');
    /2.添加节点  node.appendChild(child);  node：父级、child：子级
    var ul = document.querySelector('ul');
    ul.appendChild(li);/在ul中添加一个li，在原有的元素后面添加
    //3.添加节点  node.insertBefore(child,指定元素);
    var lis = document.createElement('li');
    ul.insertBefore(lili,ul.children[0]);/在ul索引号0的前面添加lili
​
</script>

删除节点

node.removeChild(child);

<ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>光头强</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    ul.removeChild(ul.children[0]);/删除ul子元素中索引号为0的元素
</script>

阻止链接跳转可以添加： javascript:;

<a herf='javascript:;'></a>

复制节点（克隆节点）

node.cloneNode()

该方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var ul = document.querySelector('ul');/获取
    var lili = ul.chilren[0].cloneNode();/复制
    ul.appendChild(lili);/添加 
</script>

注意

1. 如果括号参数为空或者false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点

2. 如果括号参数为true，则为深拷贝，会复制节点本身以及里面所有的子节点

三种动态创建元素区别

• document.write()

• element.innerHTML

• document.createElement()

区别：

1. document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。作为了解

2. innerHTML创建多个元素效率更高(不要采取拼接字符串，采取数组形式拼接），结构稍微复杂

3. createElement()创建多个元素效率会低一点，但是结构清晰

<div class="inner">    </div>
<div class="create">    </div>
​
<script>
    /innerHTML创建元素
    //1.拼接字符串
    var inner = document.querySelector('.inner');
    for(i = 0; i <= 100; i++){
        inner.innerHTML += '<a href="#">xxx</a>'
    }
    //2.数组
    var arr = [];
    for(i = 0; i <= 100; i++){
        arr.push('<a href="#">xxx</a>');
    }
    inner.innerHTML = arr.join('');
    /document.createElement()创建元素
    var create = document.querySelector('.create');
    for(i = 0; i <= 100; i++){
        var a = document.createElement('a');
        create.appendChild(a);
    }
</script>

事件高级

注册事件

给元素添加事件，称为注册事件或绑定事件

注册事件有两种方式：传统方式和方法监听注册方式

传统方式

• 利用on开头的事件（如：onclick）

• 特点：注册事件的唯一性

• 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

• addEventListener()是一个方法

• IE9之前不支持该方法，可使用attachEvent()代替

• 特点：同一个元素同一个事件可以注册多个监听器

eventTarget.addEventListener(type,listener[,useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当对象触发指定的事件时，就会执行事件处理函数。

该方法接受三个函数：

• type：事件类型字符串，比如click、mouseover，注意不带on。因为是字符串类型所以要加''

• listener：事件处理函数，事件发生时，会调用该监听函数

• useCapture：可选参数，是一个布尔值，默认为false

<button></button>
<script>
    var btn = docunment.querySelector('button');
    btn.addEventListener('click',fuction(){
                         alert(66);
                         })//点击按钮弹出66
//或：
    btn.addEventListener('click',fn)
    fuction fn(){
        alert(66);
    }
</script>

删除事件

1. 传统注册方式

   eventTarget.onclick = null;

2. 方法监听注册方式

   eventTarget.removeEventListener(type,listener[,useCapture]);---eventTarget.addEventListener

   eventTarget.detachEvent(eventNameWithOn,callback);---attachEvent()

<div>1</div>
<div>2</div>
<div>3</div>
​
<script>
    var divs = document.querySelectorAll('div');
            /传统注册方式
    divs[0].onclick = fuction(){
        alert(11);
        divs[0].onclick = null;
    }
            /方法监听注册方式
    divs[1].addEventListener('click',fn);
    fuction fn(){
        alert(22);
        divs[1].removeEventListener('click',fn);
    }
            /attachEvent()
    divs[2].attachEvent('onclick',fn1);
    fuction fn1(){
        alert(33);
        divs[2].detachEvent('onclick',fn1);
    }
</script>

DOM事件流

• addEventListener(type,listener[,useCapture]);第三个参数如果是true，表示在事件捕获阶段调用事件处理程序。如果是false或省略，则表示在事件冒泡阶段调用事件处理程序

• 有些事件是没有冒泡的，比如：onblur，onfocus，ommouseenter，onmouseleave

<div class = "father">
    <div class = "son">
    </div>  
</div>
<script>
    var son = document.querySelector('.son');
    var father = document.querySelector('.father');
    /捕获阶段 document-> html -> body -> father -> son
    //点击son后，会先弹出father，再弹出father
    son.addEventListener('click',fuction(){
                         alert('son');
                         },true);
    father.addEventListener('click',fuction{
                            alert('father')
                            },true);    
    / 冒泡阶段 son -> father -> body -> html -> document
    //点击son后，会先弹出son，再弹出father
    son.addEventListener('click',fuction(){
                         alert('son');
                         },false);
    father.addEventListener('click',fuction{
                            alert('father')
                            },false);    
</script>

事件对象

eventTarget.onclick = fuction(event){}
eventTarget.addEventListener('click',fuction(event){})
//event就是事件对象，还可以写成evt或e

解释：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里，这个对象就是事件对象event，它有很多属性和方法

如：

1. 谁绑定了这个事件

2. 鼠标触发事件的话，会得到鼠标的相关信息，比如鼠标点击的坐标

3. 键盘触发事件的话，会得到键盘的相关信息，比如按了哪个键

常见事件对象的属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象 标准
e.srcElement	返回触发事件的对象 非标准 ie6-8使用
e.type	返回事件的类型 比如click、mouseover 不带on
e.cancelBubble	该属性阻止冒泡 非标准 ie6-8使用
e.returnValue	该属性阻止默认事件（默认行为），非标准 ie6-8使用，比如不让链接跳转
e.preventDefault()	该方法阻止默认事件（默认行为），标准
e.stopPropagation()	阻止冒泡 标准

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    var ul = document.querySelector('ul');
    /this和e.target的区别
    ul.addEventListener('click',fuction(e){
                        /给ul绑定了事件，this就指向ul
                        //点击li输出ul
                        console.log(this);
                        /e.target指向点击的对象（触发事件的对象）
                        //点击li输出点击的那个li 
                        console.log(e.target);
                        })
</script>

事件委托

也称事件代理，在jQuery里称事件委派

原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    var ul = document.querySelector('ul');
    ul.addEventListener('click',fuction(e){
                        alert(22)//点击任意li都会弹出22
                        e.target.style.backgroundColor = 'red';//点击哪个li就给那个li的背景色设置red色
                        })
</script>

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。

MouseEvent鼠标事件对象、KeyboardEvent键盘事件对象

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标 IE9+支持
e.pageY	返回鼠标相对于文档页面的Y坐标 IE9+支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

键盘事件对象

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发 (但是它不识别功能键，比如：ctrl、shift)

键盘事件对象 属性	说明
keyCode	返回该键的ASCII值

注意：

1. keyup和keydown事件不区分大小写，按a或A得到的都是65。

2. keypress区分大小写，a--97、A--65

BOM

概述

BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性

window对象是浏览器的顶级对象，它具有双重角色：

1. 它是JS访问浏览器窗口的一个接口

2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法

window对象的常见事件

窗口加载事件

window.onload = fuction(){} window.addEventListener('load',fuction(){})

当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)，就调用的处理函数

注意：

• 有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数

• window.onload传统注册事件方式只能写一次，如果有多个，则会以最后一个window.onload为准

• 如果使用window.addEventListener则没有限制

document.addEventListener('DOMContentLoaded',fuction(){})

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等。ie9以上才支持

区别：

• load等页面内容全部加载完毕，包含页面dom元素、图片、flash、css等

• DOMContentLoaded是DOM加载完毕，不包含图片、图片、flash、css等就可以执行。加载速度比load快

调整窗口大小事件

window.onresize = fuction(){}

window.addEventListener('resize',fuction(){})

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

注意：

• 当窗口大小发生像素变化，就会触发这个事件

• 经常利用这个事件完成响应式布局。window.innerWidth：当前屏幕宽度

定时器

• setTimeout()

• setInterval()

setTimeout()定时器

window.setTimeout(调用函数,[延迟的毫秒数]);

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

注意：

• window在调用的时候可以省略

• 延时时间单位是毫秒，如果省略默认是0。1000毫秒 = 1秒

• 页面中可能有很多的定时器，我们经常给定时器加标识符（名字）。如：var timer1 = setTimeout()

写法：

/1.
setTimeout(fuction(){
           console.log('时间到');
           },2000)//两秒后输出时间到
/2.
fuction callback(){
    console.log('爆炸');
}
setTimeout(callback,2000);//2s后输出爆炸

这个函数我们也称之为回调函数callback

简单理解：回调，就是回头调用的意思。上一件事干完，再回头调用这个函数

element.onclick = fuction(){}或element.addEvenListener('click',fn);里面的函数也是回调函数

清除定时器

停止setTimeout()定时器

window.clearTimeout(timeoutID)

注意：

• window可以省略

• timeoutID就是定时器的标识符

<button>
    点击停止计时器
</button>
<script>
    var btn = document.querySelector('button');
    var timer = setTimeout(fuction(){
                           console.log('爆炸');
                           },5000);
    btn.addEventListener('click',fuction(){
                         clearTimeout(timer);
                         });
</script>

setInterval()定时器

window.setInterval(回调函数,[间隔的毫秒数]);

该方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

注意：

• 间隔毫秒数胜率默认为0。表示每个多少毫秒就自动调用这个函数

• 其它注意事项与setTimeout一致

清除定时器

停止setInterval()定时器

window.clearInterval(intervalID);

注意：

• window可以省略

• intervalID就是定时器的标识符

倒计时

<script>
        function countDown(time) {
            var nowTime = +new Date();//返回的是当前时间总的毫秒数
            var inputTime = +new Date(time);//返回的是用户输入时间总的毫秒数
            var times = (inputTime - nowTime) / 1000;//times是剩余时间总的秒数
            var d = parseInt(times / 60 / 60 / 24);//天
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24);//时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60);//分
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60);//秒
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2022-2-23 10:00:00'));
    </script>

<div>
    <span class="hover"></span>
    <span class="minute"></span>
    <span class="second"></span>
</div>
<script>
    //1.获取元素
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2022-2-23 10:00:00');
        countDown();//先调用一次这个函数，防止第一次刷新页面有空白
        //2.开启定时器
        setInterval(countDown, 1000);
        function countDown() {
            var nowTime = +new Date();//返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000;//times是剩余时间总的秒数
            var h = parseInt(times / 60 / 60 % 24);//时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;//把剩余的小时赋值给小时的盒子
            var m = parseInt(times / 60 % 60);//分
            m = m < 10 ? '0' + m : m;
            minuter.innerHTML = m;//把剩余的分钟赋值给分钟的盒子
            var s = parseInt(times % 60);//秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;//把剩余的秒数赋值给秒数的盒子
        }
</script>

JS执行队列

JS是单线程

JavaScript语言的一大特点就是单线程，也就是说，同一时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致—JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行，应该先添加，再删除

同步和异步

执行机制：

1. 先执行执行栈中的同步任务

2. 异步任务（回调函数）放入任务队列

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

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

异步任务：JS的异步任务是通过回调函数实现的

一般而言，异步任务有以下三种类型：

• 普通事件：如click、resize等

• 资源加载：如load、error等

• 定时器：如setInterval、setTimeout等

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop）

location对象

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

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

location对象的属性

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

location对象的方法

location对象方法	返回值
location.assign()	和href一样，可以跳转页面（也称为重定向页面）
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者f5。如果参数为true强制刷新ctrl+f5

navigator对象

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

if ( (navigator . userAgent . match (/ (phone Ipadlpod iPhone liPod iosl iPad Androidl Mobile IBlackBe rryl IEMobile IMQQBrowser I JUC I Fennec IwOsBrowser I Browse rNGI Webos 1 Symbian Windows Phone)/i))) {
    window. location.href = ""; //手机。如果用移动端浏览器打开，就用移动端页面
}else {
    window. location.href = ""; //电脑
}

history对象

window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能(参数如果为1，前进1个页面，如果是-1则后退一个页面)