[TOC]

API

全称为 Application Programming Interface， 中文名为 应用程序编程接口

作用：提供一些预先函数，方便开发人员直接使用，节省开发时间

任何开发语言都有自己的API

API 输入输入(I/O)

var max = Math.max(2,3,4);

API 调用方法

console.log("hello world")

Web API 概念

浏览器提供一套操作浏览器功能和页面元素的API （BOM和DOM）

BOM —— 浏览器对象模型

全称： browser object model

作用： 操作浏览器功能的 API

​ 通过BOM的 API 可以操作浏览器窗口，如：弹出框，控制浏览器跳转、获取分辨率等

DOM —— 文档对象模型

全称： document object model

作用： 操作页面元素的 API

​ 通过DOM的 API 操作 文档树的结点

DOM

树（DOM 树）

DOM 分为： 文档、节点、元素、属性 四部分

​ 文档：一个网页内所有东西归为文档

​ 节点： 网页内所有内容为节点，如 标签、属性、文本、注释

​ 元素： 网页中的标签

​ 属性： 标签内的属性

DOM 常用操作

• 获取 element 元素
• 对 element 元素进行操作（设置标签属性或调用方法函数）
• 创建动态元素
• 创建、设置、绑定事件

DOM 获取页面元素

方法一：通过**标签属性 id **获取

<p id="hhh">12</p>
<script>
/* 调用内置对象 document 中的 getElementById 方法
 * 输入参数为 id 
 */
function fun() {
    let text = document.getElementById("hhh");
    // console.dir() 打印 objec对象 全部属性和属性值
    console.log(text);
}

fun();
// ▶<p id="hhh">  firefox浏览器
</script>

注意： 1. id 具有唯一性，只能获取一个id

​ 2. 注意代码顺序，若js先加载，会导致绑定 id 失败

​ 3. 浏览器不同，显示获取对象也不同（console中的log方法）

方法二：通过标签名获取

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<!-- 即使被 div 包裹，其也能被获取 -->
<div>
	<p>5</p>
</div>
<script>
    /* 调用内置对象 document 中的 getElementByTagName 方法
     * 输入参数为 字符串类型的标签名
     */
    function fun() {
        let text = document.getElementsByTagName("p");
        // console.dir() 打印 objec对象 全部属性和属性值
        for (let i=0;i<text.length;i++)
            console.log(text[i])
    }

    fun();
    // ▶ <p>			firefox浏览器
    // ▶ <p>
    // ▶ <p>
    // ▶ <p>
    // ▶ <p>
</script>

注意： 获取到的是由元素组成的数组

标签内套娃法

套娃方法： 第一层——获取 id 属性

​ 第二层——获取 标签

<div id="HHH">
    <p id="hhhh">
        hello world
    </p>
    <p>
        lllllllll
    </p>
</div>
<script>
function fun() {
    // 第一层套娃
    let parent = document.getElementById("HHH");
    console.log(parent);
    // 第二层套娃
    let son_p = parent.getElementsByTagName("p");
    console.log(son_p);
}
fun();
//▶<div id="HHH">…</div> 			opera浏览器
//▶HTMLCollection(2) [p#hhhh,p, hhhh: p#hhhh]
</script>

方法三： 通过 name 属性获取

<form>
    <input type="radio" name="age">0~10<br>
    <input type="radio" name="age">11~20<br>
    <input type="radio" name="age">20~30<br>
    <input type="radio" id="hhh">30~40<br>
</form>
<script>
function fun() {
    let persion = document.getElementsByName("age");
    console.log(persion);
}
fun();
//▶NodeList(3)												Opera浏览器
    
//▶NodeList(3)												Chrome浏览器
    
//▶NodeList(3) [ input, input, input ]						FireFox浏览器
    
//▶<HtmlCollection length="3">...</HtmlCollection>			IE11
</script>

注意： IE10及其以下 有一定兼容问题

​

方法四： 通过 class 属性获取

<p class="hhh">asdfg</p>
<p class="hhh">asdfg</p>
<p class="hhh">asdfg</p>
<div class="hhh">asdfg</div>
<script>
let class_chose = document.getElementsByClassName("hhh");
console.log(class_chose);
//HTMLCollection { 0: p.hhh, 1: p.hhh, 2: p.hhh, 3: p.hhh, length: 4 }		Firefox浏览器
</script>

注意： IE8及其以下不支持该功能

方法五： 利用 css选择器 获取

<div id="box1">
  <p>text1 of box1</p>
  <p class="para">text2 of box1</p>
  <p class="para">text3 of box1</p>
  <p>text4 of box1</p>
</div>
<script>
  // 使用选择器后，选中第一个元素
  var para = document.querySelector("#box1 .para");
  console.log(para);
  //▶<p class="para">						Firefox浏览器
  
  // 使用选择器后，选中全部元素
  var paras = document.querySelectorAll("#box1 .para");
  console.log(paras);
  //▶NodeList [ p.para, p.para ]			Firefox浏览器
</script>

注意： 不兼容IE8及其以下

总结：

document的内置函数/方法	说明
getElementById()	通过 id 属性获取元素
getElementsByTagName()	通过 标签名 获取元素
getElementsByName()	通过 name 属性获取元素
getElementsByClassName()	通过 class 属性获取元素
querySelector()	通过 选择器 获取第一个元素
querySelectorAll()	通过 选择器 获取全部

DOM 事件

事件：类似于行为，比如说 想要做某事

执行方式： 触发——响应

绑定事件三要素： 事件源、事件类型、事件函数

​ 简单来说，就是 给谁绑 、 怎么绑 、 绑完后

事件监听：js会提供解析器，用于监听元素，若元素触发对应事件，解析器会立即执行事件函数

使用方法：绑定HTML元素属性 或 绑定 DOM 对象

<!-- HTML元素属性 -->
<button onclick="alert('点我干嘛？？')">HTML元素属性</button>
<!-- DOM对象 -->
<button id="btn">DOM对象</button>
<script>
    let btn = document.getElementById("btn");
    btn.onclick = function() {
        alert("点我干嘛？？");
    }
</script>

常用的鼠标事件

鼠标事件	说明
onclick	鼠标左键单击触发
ondbclick	鼠标左键双击触发
onmousedown	鼠标按键按下触发
onmouseup	鼠标按键松开触发
onmousemove	鼠标在元素上移动时触发
onmouseover	鼠标在元素上时触发
onmouseout	鼠标离开元素时触发

常用的键盘事件

键盘事件	说明
keydown	键盘按下任意键时触发
keypress	键盘按下并释放时触发，若按着不动会连续触发
keyup	键盘松开任意键时触发

注意：键盘事件中还有一系列属性，这个之后再说

非表单元素属性

可以通过 获取到的元素 来显示、修改、添加元素属性

<a id="link" title="123">跳转</a>
<script>
    let link = document.getElementById("link");
    /* 添加属性 */
    link.href = "https://www.baidu.com";
    /* 显示属性内容 */
    console.log(link.title);
    //123
    console.log(link.id);
    //link
    /* 修改属性 */
    link.title = "hhhhh";
    console.log(link.title);
    //hhhhh
</script>

注意： js一定在标签后面，不然会绑定失败

常用的属性	对应js的属性名
href	href
title	title
id	id
src	src
class	className
for	htmlFor
rowspan	rowSpan

获取标签内容属性

获取标签内部内容的属性：innerHTML 和 innerText

<p id="p1">第一个p标签</p>
<p id="p2">第二个p标签</p>
<script>
    let p1 = document.getElementById("p1");
    let p2 = document.getElementById("p2");
    /* innerText */
    console.log(p1.innerText);
    //第一个p标签
    /* innetHTML */
    console.log(p2.innerHTML);
    //第二个p标签
</script>

区别：

innerHTML 设置属性值时，字符串中若出现标签，会按照HTML语法加载标签

innerText 设置属性值时，字符串中若出现标签，只会按照字符串形式加载

使用场景：

​ 纯字符串时 => innerText

​ 设置内部子标签结构时 => innerHTML

附录代码

<select id="s1">
    <option value="成都">成都</option>
    <option value="自贡">自贡</option>
    <option value="宜宾">宜宾</option>
    <option value="绵阳">绵阳</option>
</select>
<script>
    let s1 = document.getElementById("s1");
    console.log(s1.innerText);
    //成都
    //自贡
    //宜宾
    //绵阳
    console.log(s1.innerHTML);
    //<option value="成都">成都</option>
    //<option value="自贡">自贡</option>
    //<option value="宜宾">宜宾</option>
    //<option value="绵阳">绵阳</option>
</script>

获取标签后对元素属性操作

表单元素有很多属性，可以通过获取的元素加 .属性名 获取当前属性或者手动修改属性

属性如：input的type、 selected下拉菜单的 option 选中属性

<!-- 元素 -->
<p id="p1">你好，世界</p><br>
<button id="btn1">获取p标签内容</button><br>
<button id="btn2">改变p标签内容</button><br><br><br>

<button id="btn3">测试按钮</button><br>
<button id="btn4">禁用测试标签</button>
<script>
    let p1   = document.getElementById('p1');
    let btn1 = document.getElementById('btn1');
    let btn2 = document.getElementById('btn2');
    let btn3 = document.getElementById('btn3');
    let btn4 = document.getElementById('btn4');
    // 点击事件：获取p标签value值
    btn1.onclick = function () {
        alert(p1.innerText);
    };
    // 点击事件：改变p标签内容
    btn2.onclick = function () {
        p1.innerText = p1.innerText == "hello world"?"你好，世界":"hello world";
    }
    btn3.onclick = function () {
        alert("我是测试按钮");
    }
    // 点击事件：启用/禁用测试按钮
    btn4.onclick = function () {
        btn3.disabled = !btn3.disabled;
        btn4.innerText= btn3.disabled?"启用测试按钮":"禁用测试按钮";
    }
</script>

自定义属性操作

可以在标签中设置一些原来没有的 新属性

通过 .getAttribute('新属性名') 来获取新属性值

通过 .setAttribute('新属性名', '值') 来创建或修改新属性值

通过 .removeAttribute('新属性名') 来移除新属性

<p id="p1" age="12" sex="male" height="140">小明</p>
<script>
let p1 = document.getElementById('p1');
// 获取新属性值
console.log("p1.age = "+p1.getAttribute('age'));
console.log("p1.sex = "+p1.getAttribute('sex'));

// 创建新属性
p1.setAttribute("city","宜宾");
console.log("p1.city = "+p1.getAttribute('city'));

// 修改新属性值
p1.setAttribute('age','18');
console.log("p1.age = "+p1.getAttribute('age'));

// 删除属性
p1.removeAttribute('city');
console.log('p1的city是否被移除？'+(p1.getAttribute('city')!=null?"否":"是"));
</script>

style样式单一属性操作

获取元素标记后可以对元素本身样式进行操作

获取样式方法： element.style 其中element为已获元素

添加/修改部分样式方法： element.style.width = '100px'

属性值全部以字符串形式展示，包括 100px 、 25rem 、 100% 、0.5 、 #000000 等数字型属性值

若样式属性名为： margin-top 这样多个单词组成，通过驼峰命名法进行书写： marginTop

<p id="p1">小明</p>
<script>
let p1    = document.getElementById('p1');
let style = p1.style;
style.color         = "#ff0000";
style.fontSize      = "30px";
style.background    = "#00ff00";
style.width         = "200px";
console.log(style);
    
</script>

效果图：

不同浏览器中console打印样式的方式不同

提示：可以写一个 class 的样式 ，再通过 Element.setClassName 的方式修改到之前写的样式中，可以批量

Element.className = Element.className.replace("原来的样式", "想要改的样式");

DOM 节点操作

DOM树

节点属性

nodeType 节点的类型，属性值为数字，表示不同的节点类型，只读，共12种：

​ 常用节点为：1-Element-元素节点 、 2-Attr-属性节点 、 3-Text-文本节点

​ 全部节点为：

节点类型	节点名	说明	节点类型	节点名	说明
1	Element	元素节点	2	Attr	属性节点
3	Text	文本节点	4	CDATASection	CDATA节点
5	EntityReference	实体引用节点	6	Entity	实体节点
7	ProcessingInstruction	处理指令节点	8	Comment	注释节点
9	Document	文档节点	10	DocumentType	文档接口节点
11	DocumentFragment	轻量文档节点	12	Notation	DTD声明节点

nodeName 节点的名称（或者说是标签名称），只读

nodeValue 节点值，设置或返回当前节点值（属性节点就是返回属性值，文本节点就是返回文本内容），注：1-Element-元素节点 的节点值始终为null

获取节点方法

<div id="div1">
    <p>I'm</p><p>stupid .</p>
</div>
<script>
// 首先获取元素节点
let div = document.getElementById("div1");

// 获取属性节点方法，下面展示获取 id属性节点的方式，获取其他属性节点方式相似
let id  = div.getAttributeNode("id");
// 值是动态变化的
console.dir(id);
//甚至可以手动修改属性节点的属性值
id.nodeValue = "div2";

// 该方法只能获取到属性节点的属性值，不能修改原始值
let text = div.getAttribute("id");
console.dir(text);

// 获取元素节点内所有子元素节点
let children = div.childNodes;
console.dir(children);
// 会显示四个节点，其中分别为 文本、p元素、p元素、文本 ，因为有换行，所有首尾会有文本节点
</script>

改变id属性后的结果：

控制台显示：

父子节点常用属性

属性名	读写类型	说明
childNodes	只读	获取节点所有子节点的集合，集合是动态变化的（包括换行）
children	只读	返回一个节点所有子元素节点集合，一个动态更新的元素集合（不包括换行）
firstChild	只读	返回节点的第一个子节点，没有子节点返回 null （包括换行）
lastChild	只读	返回节点的最后一个子节点，没有子节点返回 null （包括换行）
firstElementChild	只读	返回节点的第一个子元素节点，没有子节点返回 null （不包括换行）
lastElementChild	只读	返回节点的最后一个子节点，没有子节点返回 null （不包括换行）
parentNode	只读	返回当前节点的一个父节点，没有就返回null
parentElement	只读	返回当前节点的一个父元素节点，没有就返回null

注意：这是属性，不是函数，不用()驱动

兄弟节点常用属性

属性名	读写类型	说明
nextSibling	只读	返回节点的下一个同级节点，没有返回null
previousSibling	只读	返回节点的上一个同级节点，没有返回null
nextElementSibling	只读	返回节点的下一个同级元素节点，没有返回null
previousElementSibling	只读	返回节点的上一个同级元素节点，没有返回null

注意：IE9以后才支持 nextElementSibling 和 previousElementSibling

创建新节点方法

方法名	说明
document.createElement("div")	创建元素节点
document.createAttribute("id")	创建属性节点
document.createTextNode("hello")	创建文本节点

注意：创建的节点只存在于内存中，不在DOM树中

节点常用操作方法

增删改

方法	说明	参数说明
parentNode.appendChild(child)	将新节点添加在父节点中子节点末尾	child：新节点
parentNode.replaceChild(new , old)	将旧子节点替换为子新节点 并返回替换的旧节点	new：新节点 old：旧节点
parentNode.insertBefore(new , refer)	将新子节点插入目标节点前 若没找到目标节点，则插入到子节点尾部	new：新节点 refer：目标节点
parentNode.removeChild(child)	移除目标子节点	child：目标子节点

<div id="hhh">
    <p id="del">被删节点</p>
    <p id="aim">目标节点</p>
    <p id="rep">旧节点</p>
</div>
<script>
    let div_hhh = document.getElementById("hhh");
    // 定义增删改所用到的节点
    let p1 = document.createElement("p");
    // 解开注释自己玩玩看
    
    // // 新增到指定位置（插入指定位置）
    // let aim = document.getElementById("aim");
    // p1.innerText = "插入节点";
    // div_hhh.insertBefore(p1,aim);
    
    // // 增加节点
    // p1.innerText = "我是新增的节点";
    // div_hhh.appendChild(p1);
    
    // // 删除节点
    // let del = document.getElementById("del");
    // div_hhh.removeChild(del);
    
    // // 修改节点
    // let rep = document.getElementById("rep");
    // p1.innerText = "新节点";
    // div_hhh.replaceChild(p1,rep);

</script>

克隆

方法	说明	参数说明
Node.cloneNode(Boolean)	克隆一个节点	内部值为布尔型 true：克隆节点及节点下的子节点 false：只克隆节点本身，不克隆其下子节点

<div id="hhh">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>
<script>
    let div_hhh = document.getElementById("hhh");
    // 全部克隆
    let clone_all = div_hhh.cloneNode(true);
    clone_all.style.backgroundColor = "#ff0000";
    clone_all.style.color = "#ffffff";
    clone_all.style.textAlign = "center";
    // 只克隆该节点
    let clone_item = div_hhh.cloneNode(false);
    clone_item.style.backgroundColor = "#00ff00";
    clone_item.style.color = "#0000ff";

    div_hhh.appendChild(clone_all);
    div_hhh.appendChild(clone_item);

</script>

子节点判断

方法	说明	参数说明
Node.hasChildNodes()	返回一个布尔值 true表示有子节点 false表示没有	无参数
Node.contains(child)	返回一个布尔值 true表示 目标节点 是 子节点 false反之	child：目标节点

<div id="div1">
    <p id="p1">1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>
<div id="div2"></div>
<div id="div3">

</div>
<script>
let div1 = document.getElementById("div1");
let div2 = document.getElementById("div2");
let div3 = document.getElementById("div3");
let p1   = document.getElementById("p1");

// 有无子节点
console.log(div1.hasChildNodes());
//true
console.log(div2.hasChildNodes());
//false
console.log(div3.hasChildNodes());
//true              注意：换行算文本节点

// 判断是否为自身子节点
console.log(div1.contains(p1));
//true
console.log(div2.contains(p1));
//false
</script>

拓展：判断当前节点是否有子节点

• node.firstChild !== null 或者 node.firstChild != null
• node.childNodes.length > 0
• node.hasChildNodes()

注册事件方法

IE10以上 element.addEventListener( 触发类型 , 执行函数 ) 方法

Element.addEventListener( "click" , function(){
    
})

IE10以下 element.attachEvent( 触发类型(要加on) , 执行函数 ) 方法

Element.attachEvent( "onclick" , function () {
        
})

兼容性写法

// 自己写个函数，判定
function addEvent( element, type, fn ) {
    if (element.addEventListener) 
        element.addEventListener( type ,fn );
    else if (element.attachEvent) 
        element.attachEvent( "on"+type , fn );
}

移除事件方法

IE10以上 element.removeEventListener( 触发类型 , 解除的函数名 )

element.removeEventListener("click", fun);

IE10以下 element.detachEvent( 触发类型(要加on) , 解除的函数名 )

element.detachEvent("click",fun);

注意：只能通过函数名解除事件

兼容性写法

// 自己写个函数，判定
function removeEvent( element, type, fn ) {
    if (element.removeEventListener) 
        element.removeEventListener( type ,fn );
    else if (element.detachEvent) 
        element.detachEvent( "on"+type , fn );
}

DOM事件流

逐步向下为捕获，逐步向上为冒泡

事件流分为：事件捕获、事件执行过程、事件冒泡 三个阶段

事件流执行顺序（元素节点为准线）： 元素被捕获时执行事件 => 元素自身执行事件 => 子元素冒泡时执行事件

相关函数方法

addEventListener() 第三个参数，true表示事件捕获，false或者不填表示事件冒泡

onclick事件属性只能进行冒泡过程，不支持捕获

attachEvent() 同 onclick事件属性

<style>
    #box1 {
        width: 300px;
        height: 300px;
        background: #f00;
    }
    #box2 {
        width: 200px;
        height: 200px;
        background: #0f0;
    }
    #box3 {
        width: 100px;
        height: 100px;
        background: #00f;
    }
</style>
<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
<script>
    let box1 = document.getElementById("box1");
    let box2 = document.getElementById("box2");
    let box3 = document.getElementById("box3");
    box1.addEventListener("click", function () {
        console.log("box1的捕获");
    }, true );
    box2.addEventListener("click", function () {
        console.log("box2的捕获");
    }, true );
    box3.addEventListener("click", function () {
        console.log("box3的捕获");
    }, true );
    box1.addEventListener("click", function () {
        console.log("box1的冒泡");
    }, false );
    box2.addEventListener("click", function () {
        console.log("box2的冒泡");
    }, false );
    box3.addEventListener("click", function () {
        console.log("box3的冒泡");
    }, false );
</script>

点击蓝色区域(box3)，会发现 事件捕获是从父元素一步一步向下的 ， **事件冒泡是从子元素一步一步向上的 **

拓展：事件委托

利用事件冒泡性值，将子元素/子节点的事件委托给父元素，让父元素加载事件

<style>
    ul {
        padding: 0;
        margin: 0;
        list-style: none;
        width: 300px;
    }
    li {
        border: black 1px solid;
        font-size: 30px;
    }
</style>
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>
<p id="p1"></p>
<script>
    let list = document.getElementById("list");
    let p1 = document.getElementById("p1");
    list.onclick = function (e) {
        p1.innerText = "你点击了第" + e.target.innerText + "个li标签";
    }
</script>

点击 li 标签数字试试看吧

事件对象

触发事件会自动生成一个对象，内部存储与事件相关的数据

e 在低版本中存在兼容问题， 低版本使用 windows.event

事件对象e 属性	说明
eventPhase	查看时间触发时所处的阶段
target	获取触发事件的元素
srcElement	获取触发事件的元（适用于低版本）
currentTarget	获取绑定事件的事件源元素
type	获取事件类型
clientX/clientY	鼠标距离浏览器窗口左上角的距离
pageX/pageY	鼠标距离html页面左上角顶点距离(IE8以上才支持)

// 兼容状态使用事件对象
element.onclick = function (e) {
    // 兼容
    e = e || windows.event;
}

取消默认行为和阻止事件传播/传递

事件对象 e 属性/方法	说明
preventDefault()	方法，取消默认行为
returnValue= false	属性，取消默认行为（适用于低版本）
stopPropagation()	方法，阻止冒泡
cancelBubble = true	属性，阻止冒泡（适用于低版本）

<!-- 取消默认行为 -->
<a href="https://www.baidu.com" target="_blank" id="a1">百度</a>
<script>
    let a1 = document.getElementById("a1");
    a1.addEventListener("click", function (e) {
        e = e || window.event;
        alert("点击事件");
        if (e.preventDefault())
            e.preventDefault();
        else if (e.returnValue)
            e.returnValue = false;
    });
</script>

<!-- 阻止事件传播 -->
<style>
    #box1 {
        width: 300px;
        height: 300px;
        background-color: red;
    }

    #box2 {
        width: 200px;
        height: 200px;
        background-color: green;
    }

    #box3 {
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>
<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
<script>
    let box1 = document.getElementById("box1");
    let box2 = document.getElementById("box2");
    let box3 = document.getElementById("box3");
    box1.onclick = function f1(e) {
        e = e || window.event;
        console.log("box1");
        if (e.stopPropagation())
            e.stopPropagation();
        else if (e.cancelBubble)
            e.cancelBubble = false;
    }
    box2.onclick = function f1(e) {
        e = e || window.event;
        console.log("box2");
        if (e.stopPropagation())
            e.stopPropagation();
        else if (e.cancelBubble)
            e.cancelBubble = false;
    }
    box3.onclick = function f1(e) {
        e = e || window.event;
        console.log("box3");
        if (e.stopPropagation())
            e.stopPropagation();
        else if (e.cancelBubble)
            e.cancelBubble = false;
    }
</script>

DOM 测量

DOM有一套提供元素自身有关位置和大小的属性

偏移量属性

属性名	说明
offsetParent	参考 距离最近且有定位的父元素 的偏移量，没有就参考body、html
offsetLeft	向左偏移位置距离
offsetTop	向上偏移位置距离
offsetWidth	元素实际宽度：width + 左右padding + 左右boder
offsetHeight	元素实际高度：height + 上下padding + 上下boder

客户端大小

属性名	说明
clientLeft	左外边距宽度
clientTop	上外边距宽度
clientWidth	width+左右padding
clientHeigh	height + 上下padding

滚动偏移属性

属性名	说明
scrollLeft	标签内容左上角距离左边父元素距离
scrollTop	标签内容左上角距离上边父元素距离
scrollWidth	标签内容的真实宽度
scrollHeight	标签内容的真实高度

BOM

window 对象中属性 与 全局变量关系

浏览器的顶级对象 ， 调用 window 下的属性和方法是，可以省略 window

注意： window 对象内的 name 、 top 属性调用时 ， 不能省略window

全局变量声明是在 window 内创建个新属性

// 在浏览器中依次输入
console.log(window);

var age = 18;

console.log(window);

对话框

2-1-1中 警告弹窗、提示弹窗、确认弹窗 都是 window 的内置方法

window.alert("你好");
window.prompt("年龄","18");
window.confirm("是否成年？");

加载事件

onload加载事件，表示只有绑定加载事件的元素加载完成后才能触发

注意：一个页面只能有一个 window.onload 事件

Element.onload = function () {
	console.log("加载完成");
}

延时器

window对象的一种方法，类似于定时炸弹（一次性）

语法结构： window.setTimeout( function , time )

​ function 为执行函数

​ time 为多少ms后执行（1000 为 1s）

let clock = window.setTimeout( function () {
    console.log("时间到了！！！");
} , 2000 );
clock();

注意：延时器不会影响其他行代码运行

​ 声明定义完成后自动执行

let clock = window.setTimeout( function () {
    console.log("时间到了！！！");
} , 2000 );
console.log(1);
console.log(2);
console.log(3);
console.log(4);

清除延时器

window对象的一种方法，清除延时器

语法结构： window.clearTimeout( timeout )

​ timeout 延时函数

let clock = setTimeout( function () {
    console.log("时间到了！！！");
} , 2000 );
clearTimeout( clock );

定时器

window对象的一个方法，相当于计时器，每一个时间周期事件执行一次

语法结构： window.setInterval ( function , interval );

​ function 执行函数

​ interval 时间间隔

let clock = setInterval( function () {
    console.log("时间到");
} , 2000 );

清除定时器

window对象的一种方法，清除定时器

语法结构： window.clearInterval( timer )

​ timer 定时函数

let clock = setInterval( function () {
    console.log("时间到");
} , 2000 );
clearInterval(clock);

封装动画函数

通过封装好的函数来实现动画效果，函数自己封装

/* 自制动画函数
 * element为目标元素，width为终止时宽度，time为动画时长
 * 若输入第四个参数，则设定帧数
 * 宽度单位默认px，时间单位默认为ms
 * 不支持颜色变化
 */
let action = function ( element , width , time ) {
    let fps = 25;
    if (arguments.length==4)
        fps = arguments[3];
    else if (arguments.length<3||arguments>4)
        return console.log("输入有误！");
    let moving ;
    let el_width = parseFloat(getComputedStyle(element).width);
    let x = ( width - el_width ) * 1000 / time / fps ;
    // console.log(x);
    moving = window.setInterval(function () {
        console.log(12)
        if (parseFloat(getComputedStyle(element).width)>=width)
            clearInterval(moving);
        else {
            element.style.width=parseInt(getComputedStyle(element).width) + x +"px";
        }
    },1000/fps);
};

部分编辑器(如VScode、WebStorm)支持识别注释

location 对象

widow对象下的一个属性（数据类型为对象），用于获取或修改浏览器地址栏的url

location的部分属性：

属性名	说明
scheme	通讯协议，如http、ftp、maito等
host	主机的主机名或服务器IP地址，如 localhost:8080
port	端口号，如8080
path	路径，由数个'/'隔开的字符串，表示主机上的目录文件地址
query	查询，可不写，用于给动态网页传递参数，多个参数用'&'隔开
fragment	锚点

location部分使用方法

<button id="btn1">获取href值</button>
<button id="btn2">改变href值</button>
<button id="btn3">assign方法</button>
<button id="btn4">replace方法</button>
<button id="btn5">reload方法</button>
<script>
    let btn1 = document.getElementById("btn1");
    let btn2 = document.getElementById("btn2");
    let btn3 = document.getElementById("btn3");
    let btn4 = document.getElementById("btn4");
    let btn5 = document.getElementById("btn5");

    // 对url操作
    btn1.onclick = function () {
        // 获取值
        alert(location.href);
    };
    btn2.onclick = function () {
        // 改变值，相当于跳转
        location.href = "https://www.lagou.com";
    };

    // assign()为跳转到指定页面
    btn3.onclick = function () {
        location.assign("https://www.lagou.com");
    };

    // replace()替换当前url网址，并且不能返回
    btn4.onclick = function () {
        location.replace("https://www.lagou.com");
    };

    // reload() 重新加载，类似于F5刷新
    btn5.onclick = function () {
        // 输入参数为布尔型：true表示从服务器那里重新加载，false为从缓存那里重新加载
        location.reload(false);
        // 这里加入弹出框，只是为了方便验证刷新
        let p = document.createElement("p");
        p.innerText = "刷新了";
        btn5.parentElement.appendChild(p);
    };
</script>

history 对象

用于与浏览器历史记录交互，浏览器历史记录是用户对访问页面时的记录（时间顺序记录）

方法	说明
back()	加载history前一个URL
forward()	加载history后一个URL
go()	加载 history中具体URL