[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及其以下

总结：

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>

常用的鼠标事件

常用的键盘事件

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

非表单元素属性

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

<a id="link" >跳转</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一定在标签后面，不然会绑定失败

获取标签内容属性

获取标签内部内容的属性：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-文本节点

​ 全部节点为：

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属性后的结果：

控制台显示：

父子节点常用属性

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

兄弟节点常用属性

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

创建新节点方法

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

节点常用操作方法

增删改

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

克隆

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

子节点判断

<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

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

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

<!-- 取消默认行为 -->
<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有一套提供元素自身有关位置和大小的属性

偏移量属性

客户端大小

滚动偏移属性

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的部分属性：

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 对象

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