WebAPIs-Dom学习

2020-05-19

Web APIs 和 JS基础有什么关联性？

先来看看JS的组成，大致了解Web APIs也是js的一部分。

在JS基础阶段

我们学习的是ECMAScript标准规定的基本语法
掌握JS基础语法
只学习基本语法,做不了常用的网页交互效果
目的是为了JS后面的课程打基础、做铺垫。

在Web APIs阶段

web APIs是W3C组织的标准
Web API我们主要学习DOM和BOM
Web APIs是我们JS所独有的部分
主要学习页面交互功能
需要使用JS基础的课程内容做基础

JS基础学习ECMAScript 基础语法为后面作铺垫，web APIs是JS的应用,大量使用JS基础语法做交互效果。

什么是Web APIs

API ( Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。简单理解: API是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能。

Web API是浏览器提供的一套操作浏览器功能和页面元素的API( BOM和DOM)。现阶段我们主要针对于浏览器讲解常用的API,主要针对浏览器做交互效果。比如我们想要浏览器弹出一个警示框,直接使用alert(‘弹出’ )。因为Web API很多，所以这个阶段成为Web APIs。

MDN详细API:https://developer.mozilla.org/zh-CN/docs/Web/API

API和Web API总结

1.API是为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部如何实现

2.Web API主要是针对于浏览器提供的接口, 主要针对于浏览器做交互效果。

3.Web API 一般都有输入和输出(函数的传参和返回值) , Web API很多都是方法(函数)

4.学习Web API可以结合前面学习内置对象方法的思路学习

DOM简介

文档对象模型( Document Object Model ,简称DOM),是 W3C组织推荐的处理可扩展标记语言( HTML或者XML )的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。

DOM树

DOM树中一些概念

文档:一个页面就是一个文档 , DOM中使用document表示
元素: 页面中的所有标签都是元素, DOM中使用element表示
节点: 网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM中使用node表示。

DOM把以上内容都看做是对象，我们获取的dom元素是一个对象（object），所以称为文档对象模型。

获取元素

DOM在我们实际开发中主要用来操作元素。我们如何来获取页面中的元素呢?获取页面中的元素可以使用以下几种方式:

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取（body html）

根据ID获取

document.getElementById('id名');用id获得一个元素对象。

console.dir 打印我们返回的元素对象, 更好的查看里面的属性和方法

<div id="time">2019-9-9</div>
<script>
    // 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
    // 2. get获得element元素by id，通过驼峰命名法 
    // 3. 参数id是大小写敏感的字符串
    // 4. 返回的是一个元素对象
    var timer = document.getElementById('time');
    console.log(timer);
    console.log(typeof timer);//object
    // 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
    console.dir(timer);
</script>

根据标签名获取

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

1	var lis = document.getElementsByTagName('li');

返回的是获取过来元素对象的集合以伪数组的形式存储的
如果页面中只有一个li ，返回的还是伪数组的形式
如果页面中没有这个元素，返回的是空的伪数组的形式
element.getElementsByTagName(‘标签名’);

还可以获取父元素内部所有指定标签名的子元素，父元素必须是指定的单个元素。

var ol = document.getElementsByTagName('ol');
 console.log(ol.getElementsByTagName('li'));//报错，ol是个伪数组，不是指定的的单个元素
 console.log(ol[0].getElementsByTagName('li'));
 
//通常我们可以给父元素指定一个id，这样获取父元素的子标签
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));

通过HTML5新増的方法

h5兼容ie9以上。

document.getElementsByClassName('类名') ; 根据类名获得某些元素集合。

document.querySelector ('选择器') ; 返回指定选择器的第一个元素对象，切记里面的选择器需要加符号 .box #nav。

document.querySelectorA11('选择器');返回指定选择器的所有元素对象集合。

// 1. getElementsByClassName 类名
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySelector 指定选择器的第一个元素对象,切记,里面的选择器需要加符号 .box  #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3. querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);

获取 body 和 html 元素

1) 获取body 元素

var bodyEle = document.body;

2) 获取html 元素

var htmlEle = document.documentElement;

事件基础

javaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。简单理解:触发—响应机制。网页中的每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。

执行事件的步骤

事件是有三部分组成：事件源、事件类型、事件处理程序，我们也称为事件三要素。

获取事件源的时候尽量使用id而不是标签名，使用标签名获取元素得到的是一个伪数组，伪数组不能直接使用 .事件去处理程序，数组中的某个元素可以。比如[i].onclick。

//(1) 事件源 事件被触发的对象   谁 按钮
var btn = document.getElementById('btn');
//(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序  通过一个函数赋值的方式 完成
btn.onclick = function() {
    alert('点秋香');
}

执行事件的步骤有以下3步：

// 1. 获取事件源
var div = document.querySelector('div');
// 2.绑定事件 注册事件
// div.onclick 
// 3.添加事件处理程序 
div.onclick = function() {
    console.log('我被选中了');
}

常见鼠标事件

获得焦点事件 onfocus

失去焦点事件 onblur

操作元素

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

改变元素内容

element.innerText：获取从起始位置到终止位置的内容,但它去除html标签，同时空格和换行也会去掉。innerText不识别html标签。

element.innerHTML：获取起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行。innerHTML识别html标签，并显示出样式。

demo- 当我们点击了按钮,div里面的文字会发生变化

<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1123</p>
<script>
    // 1. 获取元素 
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    // 2.注册事件
    btn.onclick = function() {
  		 div.innerText = '2019-6-6';
    }
  
    // 我们元素可以不用添加事件
    var p = document.querySelector('p');
    p.innerHTML = '2019-6-6';

常见元素的属性操作

元素可以通过 . 操作符获取属性并赋值。

demo - 点击按钮切换图片，img的src变化

<button id="ldh">刘德华</button>
<button id="zxy">张学友</button> <br>
<img src="images/ldh.jpg" alt="" title="刘德华">

<script>
    // 1. 获取元素
    var ldh = document.getElementById('ldh');
    var zxy = document.getElementById('zxy');
    var img = document.querySelector('img');
    // 2. 注册事件  处理程序
    zxy.onclick = function() {
        img.src = 'images/zxy.jpg';
        img.title = '张学友思密达';
    }
    ldh.onclick = function() {
        img.src = 'images/ldh.jpg';
        img.title = '刘德华';
    }

demo -分时问候并显示不同图片案例

1.根据系统不同时间来判断，所以需要用到日期内置对象，获取小时数。
2.利用多分支语句来设置不同的图片，
3.需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
4.需要一个div元素，显示不同问候语，修改元素内容即可

表单元素的属性操作

利用DOM可以操作如下表单元素的属性:type、value、checked、 selected disabled。

// 1. 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. 注册事件 处理程序
btn.onclick = function() {
    // input.innerHTML = '点击了';  这个是 普通盒子 比如 div 标签里面的内容
    // 表单里面的值 文字内容是通过 value 来修改的
    input.value = '被点击了';
    // 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
    // btn.disabled = true;
    this.disabled = true; // this 指向的是事件函数的调用者 btn
}

①核心思路:点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码

②一个按钮两个状态，点击一次,切换为文本框,继续点击次切换为密码框

③算法:利用一个flag变量,来判断flag的值,如果是1就切换为文本框, flag设置为0 ,如果是0就切换为密码框, flag设置为1

// 1. 获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2. 注册事件 处理程序
var flag = 0;
eye.onclick = function() {
    // 点击一次之后， flag 一定要变化
    if (flag == 0) {
        pwd.type = 'text';
        eye.src = 'images/open.png';
        flag = 1; // 赋值操作
    } else {
        pwd.type = 'password';
        eye.src = 'images/close.png';
        flag = 0;
    }

}

样式属性操作

我们可以通过JS修改元素的大小、颜色、位置等样式。

element. style 行内样式操作
element. className 类名样式操作

1）element. style 行内样式操作

//注册事件 处理程序
div.onclick = function() {
    // div.style里面的属性 采取驼峰命名法 
    this.style.backgroundColor = 'purple';
    this.style.width = '250px';
}

注意:

JS里面的样式采取驼峰命名法比如fontsize、backgroundColor。
JS修改style样式操作,产生的是行内样式, css权重比较高。

案例：循环精灵图

案例分析

①首先精灵图图片排列有规律的。竖着排成一列，每个小图标的高度都是44px

②核心思路:利用for循环修改精灵图片的背景位置background-position

③剩下的就是考验你的数学功底了

④让循环里面的i索引号.* 44就是每个图片的y坐标

<script>
    // 1. 获取元素 所有的小li 
    // var lis = document.getElementsByTagName('li');
    var lis = document.querySelectorAll('li');      
    for (var i = 0; i < lis.length; i++) {
    // 让索引号*44 就是每个li的背景y坐标  
        var index = i * 44;
        lis[i].style.backgroundPosition = '0 -' + index + 'px'; //修改属性的值要转字符串。
    }
</script>

2）element. className 类名样式操作

注意:

1.如果样式修改较多,可以采取操作类名方式更改元素样式。

2.class因为是个保留字,因此使用className来操作元素类名属性

3.className会直接更改元素的类名,会覆盖原先的类名，因此常使用多类名

<div class="first">文本</div>
test.onclick = function() {
     //我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
     this.className = 'change';
     this.className = 'first change';//如果想要保留原先的类名，使用多类名选择器（新的类名写在后面）

总结

排他思想

如果有同一组元素,我们想要某一个元素实现某种样式 ,需要用到循环的排他思想算法:

1.所有元素全部清除样式(干掉其他人)

2.给当前元素设置样式(留下我自己)

3.注意顺序不能颠倒,首先干掉其他人,再设置自己

var btns = document.getElementsByTagName('button');
// btns得到的是伪数组  里面的每一个元素 btns[i]
for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
        for (var i = 0; i < btns.length; i++) {
            btns[i].style.backgroundColor = '';
        }
        // (2) 然后才让当前的元素背景颜色为pink 留下我自己
        this.style.backgroundColor = 'pink';

    }
}

案例 — 百度换肤

点击小图片，整个body的背景切换成大图片。

①这个案例练习的是给一组元素注册事件

②给4个小图片利用循环注册点击事件

③当我们点击了这个图片,让我们页面背景改为当前的图片

④核心算法:把当前图片的src路径取过来,给body做为背景即可

 // 1. 获取元素 
var imgs = document.querySelector('.baidu').querySelectorAll('img');
 // console.log(imgs);
 // 2. 循环注册事件 
 for (var i = 0; i < imgs.length; i++) {
     imgs[i].onclick = function() {
         // this.src 就是我们点击图片的路径images/2.jpg
         // 把这个路径 this.src 给body 就可以了
         document.body.style.backgroundImage = 'url(' + this.src + ')';
     }
 }

案例 — 表格全选和反选

①全选和取消全选做法 : 让下面所有复选框的checked属性(选中状态)跟随全选按钮即可。

②下面复选框需要全部选中，上面全选才能选中做法 : 给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中的,如果有一个没选中的，面全选就不选中。

③可以设置一个变量,来控制全选是否选中。

自定义属性的操作

1.获取属性值

element.属性：获取属性值，元素本身自带的属性，div.id
element .getAttribute(‘属性’); div.getAttribute('index')

2.设置属性值

element.属性=‘值’ ，设置内置属性值。 div.id = 'test'
element . setAttribute(‘属性’，’值’) ;

class的设置属性特殊，这里面写的就是class ，不是className。

1 2	div.className = 'navs';//添加一个navs类,第一种方法 div.setAttribute('class', 'footer'); //添加一个footer类

区别:

element.属性获取内置属性值：(元素本身自带的属性)
element .getAttribute( ‘属性‘ )：主要获得自定义的属性 ( 标准)我们程序员自定义的属性

3 移除属性

element.removeAttribute(属性)

1	div.removeAttribute('index');//移除属性自定义属性index

案例-tab 栏切换

①Tab栏切换有2个大的模块

②上模块选项卡：点击某一个,当前这一个底色会是红色,其余不变(排他思想)，通过修改类名的方式。

③下面的模块内容,会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。

④规律:下面的模块显示内容和上面的选项卡一对应 ,相匹配。

⑤核心思路:给上面的tab_ list 里面的所有按钮添加自定义属性index，属性值从0开始编号。

⑥当我们点击tab_ list 里面的某个按钮，让下面的介绍对应序号的内容显示，其余隐藏(排他思想)

H5自定义属性

自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute( ‘’属性’’)获取。但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性:

1.设置H5自定义属性

H5规定自定义属性data开头做为属性名并且赋值。

比如<div data-index=“1" > </div>

<div getTime="20" data-index="2" data-list-name="andy"></div>
//h5新增的获取自定义属性的方法 它只能获取data-开头的
//dataset 是一个集合里面存放了所有以data开头的自定义属性
 div.setAttribute('data-time', 20);
console.log(div.dataset);
console.log(div.dataset.index);

2.获取H5自定义属性

1.兼容性获取 element.getAttribute( 'data-index' );

2.H5新增 element.dataset.index或者element.dataset[ index' ], ie 11才开始支持。

// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
div.getAttribute('data-list-name')
console.log(div.dataset.listName);
console.log(div.dataset['listName']);

节点操作

为什么学节点操作

获取元素通常使用两种方式:

1.利用DOM提供的方法荻取元素

1
2
3

document.getElementByld();
document.getElementsByTagName();
document.querySelector ;

但是这些方法逻辑性不强、繁琐。

2.利用节点层级关系获取元素

利用父子兄节点关系获取元素 ,逻辑性强，但是兼容性稍差

这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更加简单。

节点概述

网页中的所有内容都是节点(标签、属性、文本、注释等) , 在DOM中,节点使用node来表示。

HTML DOM树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点)均可被修改,也可以创建或删除。

一般地 ,节点至少拥有nodeType (节点类型)、nodeName (节点名称)和nodeValue (节点值)这三个基本属性。

元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3 (文本节点包含文字、空格、换行等)
我们在实际开发中,节点操作主要操作的是元素节点

节点层级

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

1.父级节点

node.parentNode

<div class="box">
	<span class="erweima">×</span>
</div>
        
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是离元素最近的父级节点(亲爸爸) null
console.log(erweima.parentNode);//子节点获取父节点

parentNode属性可返回某节点的父节点,注意是最近的一个父节点
如果指定的节点没有父节点则返回null

2.子节点

1) parentNode. childNodes (标准 )

parentNode. childNodes返回包含指定节点的子节点的集合,该集合为即时更新的集合。注意:返回值里面包含了所有的子节点,包括元素节点,文本节点等。

如果只想要获得里面的元素节点,则需要专门处理。所以我们一般不提倡使用childNodes

var ul = document.querySelector('ul');
for(var i = 0; i < ul.childNodes.length;i++) {
    if (ul. childNodes [i] . nodeType == 1) {
        // ul. childNodes[i]是元素节点，元素节点的nodeType是1
        console. log (ul. childNodes[i]);
}

2) parentNode. children (非标准)

parentNode. children是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返回(这个是我们重点掌握的)。

虽然children是一个非标准 ,但是得到了各个浏览器的支持,因此我们可以放心使用

3) parentNode . firstChild

firstChild返回第一个子节点,找不到则返回null。同样,也是包含所有的节点（文本节点换行）。

4) parentNode . lastChild

lastChild返回最后一个子节点,找不到则返回null.同样,也是包含所有的节点。

5) parentNode . firstElementChild

firstElementChild 返回第一个子元素节点 ie9才支持

6.parentNode.lastElementChild

返回最后一个子元素节点 ie9才支持

7)实际开发的写法既没有兼容性问题又返回第一个子元素

1 2	console.log(ol.children[0]);//返回第一个元素 console.log(ol.children[ol.children.length - 1]);//返回最后一个元素

3.兄弟节点

1) node . nextSibling

nextsibling返回当前元素的下一个兄弟节点,找不到则返回null。同样,也是包含所有的节点（文本）。

2) node .previousSibling

previoussibling返回当前元素上一个兄弟节点,找不到则返回null。同样,也是包含所有的节点。

3) node . nextElementSibling

nextElementsibling返回当前元素下一个兄弟元素节点 ,找不到则返回null.

4) node . previousElementSibling

previousElementsibling 返回当前元素上一个兄弟元素节点 ,找不到则返回null.

这两个方法有兼容性问题，IE9以上才支持。

如何解决兼容性问题?

自己封装一个兼容性的函数

funct ion getNextElementSibling (element) {
	var el = element;
    while (el = el.nextSibling) {
        if (el.nodeType === 1) {
        	return el;
        }
    return null;
    }

添加节点（创建节点）

1）创建元素节点

document.createElement('tagName')

document . createElement()方法创建由tagName 指定的HTML元素。因为这些元素原先不存在,是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。

2）添加节点

1) node.appendChild (child) 后面追加

node . appendchild()方法將一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after仂元素。

2) node.insertBefore(child, 指定元素) 前面添加

node.insertBefore(）方法将一个节点添加到父节点的指定子节点前面。类似before伪元素。

我们想要页面添加一个新的元素： 1. 创建元素 2. 添加元素

// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);

案例 - 留言发布

①核心思路:点击按钮之后,就动态创建一个li ,添加到ul里面。

②创建li的同时,把文本域里面的值通过li.innerHTML赋值给li

③如果想要新的留言后面显示就用appendChild ，如果想要前面显示就用insertBefore

删除节点

node.removeChild(child)

node.removeChild()方法从DOM中删除一个子节点，并返回删除的节点。其中node和child可以没有关系。node只得是被删除元素的父元素，child指的是被删除元素。

    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>


var ul = document.querySelector('ul');
// 删除ul下的li
ul.removeChild(ul.children[0]);

案例 - 删除留言

①当我们把文本域里面的值赋值给li的时候,多添加一个删除的链接。

②需要把所有的链接获取过来,当我们点击当前的链接的时候,删除当前链接所在的li

③阻止链接跳转需要添加javascriptvoid(0);或者javascript:;

复制节点(克隆节点)

node.cloneNode()

node. cloneNode ()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点。复制之后，需要添加节点。

node.cloneNode(); 括号为空或者里面是false 是浅拷贝，只复制标签不复制里面的内容
1. node.cloneNode(true); 括号为true 是深拷贝，复制标签复制里面的内容。

1 2	var lili = ul.children[0].cloneNode(true); ul.appendChild(lili);

***三种动态创建元素区别

1
2
3

document.write();
element.innerHTML;
document.createElement();

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

2.innerHTML 是将内容写入某个DOM节点,不会导致页面全部重绘

3.innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接) , 结构稍微复杂。字符串拼接考虑到字符串的不可变性，效率会越来越低。采用数组形式拼接如下：

var array = [];
for (var i = 0; i < 1000; i++) {
//每次push一个元素
    array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
}
//利用join转化为字符串形式
document.body.innerHTML = array.join('');

4.createElement() 创建多个元素效率稍低一点点 ,但是结构更清晰

总结:不同浏览器下, innerHTML效率要比creatElement 高

DOM总结

关于dom操作,我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作

1 创建

1.document.write

2.innerHTML

3.createElement

2 増

appendChild 追加
insertBefore 插入

3 删

removeChild

4 改

主要修改dom的元素属性, dom元素的内容、属性,表单的值等

1.修改元素属性: src、 href 、 title等

2.修改普通元素内容: innerHTML、innerText

3.修改表单元素: value、 type、 disabled等

4.修改元素样式: style、 className

className会直接更改元素的类名,会覆盖原先的类名，，如果想要保留原先的类名，使用多类名选择器（新的类名写在后面）

5 查

主要获取查询dom的元素

1） DOM提供的API方法: getElementByld、 getElementsByTagName 古老用法不太推荐

2） H5提供的新方法:document.getElementsByClassName(‘类名’), querySelector, querySelectorAll 提倡

3）利用节点操作获取元素:父(parentNode)，子(children)，兄(previousElementSibling、nextElementSibling)（IE 9 ）提倡

parentNode . firstElementChild parentNode.lastElementChild（IE 9）

4） ie 11才开始支持 H5规定自定义属性data开头做为属性名并且赋值。<div data-index=“1" > </div> element.dataset.index ; element.dataset[ index' ]。

6 属性操作

主要针对于自定义属性。

setAttribute :设置dom的属性值
getAttribute :得到dom的属性值
removeAttribute移除属性

7 事件操作

给元素注册事件，采取事件源.事件类型 = 事件处理程序。

8 其他

因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面。

阻止链接跳转需要添加javascriptvoid(0);或者javascript:;

很多方法的命名都是根据驼峰命名法 getElementById