javascript基础

Javasript简介
- JS是一门面向对象的编程语言
- JS的发展史
注释
- 单行注释
- 多行注释
JS代码的引入方式
- 第一种
- 第二种
JS语法格式
变量
数据类型
对象
运算符
流程控制 --- if与switch
for循环
while循环
三元运算
- 语法格式
- 案例
函数
BOM
- BOM简介
- BOM操作
DOM
事件

Javasript简介

JS是一门面向对象的编程语言

JS的发展史

详情请参见博客：https://www.cnblogs.com/Dominic-Ji/p/9111021.html

注释

单行注释

//单行注释

多行注释

/*
多行注释
多行注释
*/

JS代码的引入方式

第一种

script标签内部书写

第二种

引入外部js文件

JS语法格式

js用分号作为语句的结束，但是不写也没问题

变量

如何定义变量

首次声明变量需要使用关键字，不用也不会报错

var name = 'chloe';   声明的都是全局
let name = 'chloe';   可以区分全局和局部

常量

在js中有真正意义的常量

const pi = 3.14
pi = 3.44; # 会报错

变量命名规范

1 变量名只能是数字 字母 下划线 $
2 命名规范，推荐使用驼峰式命名
3 变量名不能用关键字作为变量名

数据类型

数值类型（number）

js是一门动态类型的语言
动态：一个变量名可以指向任意的数据类型
静态：变量名之恶能植想一种数据类型，后续不能更改变量值

var a = 11;
var b = 11.11;

// 查看当前数据类型 typeof
typeof a;  // "number"
typeof b;  // "number"

// NaN:数值类型，表示的意思是不是一个数字：NOT A NUMBER

查看数据类型---typeof

let a = 11;
let b = 11.11;
typeof a;
typeof b;

数值类型

浮点型(parseFloat)
整形(parseInt)
NaN:表示不是一个数字，NOT A NUMBER

类型转换

转整形

// 字符串转整形
let a = '123';
parseInt(a);  // 123

// 浮点型转整形
let a = "123.123";
parseInt(a);  // 123

// 带有非数字的字符串转整形,字符转开头有数字，即可将数字类型转为整形，如果数字不在中间就会返回NaN
let e = "123asd";
parseInt(e);  // 123

let f = "sf123";
parseInt(f);  // NaN

转浮点型

// 字符串转浮点型
let a = "123.1";
parseFloat(a);  // 123.1

// 整形转浮点型
let b = 123;
parseFloat(a);  // 123

// 带有非数字的字符串转浮点型
let c = "123.1hahah";
parseFloat(c); // 123.1

let f = "sf123.1";
parseFloat(f);  // NaN

字符类型（string）

字符串的定义

// 不支持三引号定义字符串，支持单引号和双引号
var s = 'jason' ；
var s1 = "egon"；

模板字符串

// 模板字符串
var s3 = `
发达
sss
dfdsafa
`

// 模板字符串除了可以定义多行文本之外，还可以实现格式化字符串的效果
var name = 'jason';
car age = 18;
var info = `
	my name is ${name} my age is ${age}
`
// ${}会自动去前面找大括号里面的变量名对应的值，如果，欸有定义会直接报错

字符串的拼接

// 字符串的拼接
python不建议使用+号拼接字符串
js推荐使用+号拼接字符串

字符类型的常用方法 --- 建议与python的字符串方法结合记忆

返回字符串长度，.length

let a = "hello world";
a.length;

移除字符串两侧的空白，.trim()

let b = "   jkajdk   ";
b.trim();

// 无法移除字符串两侧指定内容
let c = "**fhak**"
c.trim("*");
"**fhak**"

.trimLeft() 移除左边的空白

var name = '  chloe  ';
name.trimLeft() // "chloe  "

.trimRight() 移除右边的空白

  var name = '  chloe  ';
  name.trimRight() // "  chloe"

.charAt(n):返回下标为n的元素

var name = 'chloe';
name.charAt(1); // h

.concat():拼接，相当于在字符串末尾追加内容，可以是数字类型，内部会自动转换成相同的数据类型进行操作

var name = 'chloe';
name.concat('hah') // "chloehah";

indexOf(substring):字符串内元素的位置

元素不存在返回-1

元素为1个，返回元素对应的索引值

元素为连续多个且包含在字符串内，返回小字符串的第一个元素的索引

var name = 'chloe';
name.indexOf("d");
-1
name.indexOf("o");
3
name.indexOf("oe");
3

substring(from,to):根据索引切片，无法识别负数

var name = 'chloe';
name.substring(0,-1);  // 不识别负数

slice(start,end) 切片,可以识别负数

var name = 'chloe';
name.slice(0,-1);  // "chlo"

toLowerCase() 所有字母小写

var name = '12asDF.@';
name.toLowerCase(); // "12asdf.@"

toUpperCase() 所有字母大写

var name = '12asDF.@';
name.toUpperCase(); //  "12ASDF.@"

.split(delimiter,limit):指定分隔符，及分割后获取的元素的个数

分隔符不存在不会报错，不会分割

var name = 'tank|egon|jason|wu sir';
// 分割后获取元素个数小于总元素个数
name.split('|',2); // (2) ["tank", "egon"]

// 分割后获取元素个数大于总元素个数,取分割后所有的元素
name.split('|',10); // (4) ["tank", "egon", "jason", "wu sir"]

布尔值（boolean）

布尔值格式

全为小写：true  false

布尔值是false的数据

0 空字符串 null undefined NaN

null与defined

null

表示值为空，一般是指定或者清空一个变量时使用
可以理解为放了值，但是值被拿完了，但是留下了空的装值的盒子
var name = 'chloe';
var name = null;

undefined

表示声明了一个变量，但是没有做初始化操作没有给装值的盒子
函数没有指定返回值的时候，返回的也是undefined

对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

数组对象

数组（类似与python中的列表）[]表示数组
数组基本方法

var a = [11,'a',true];
typrof a; // "object"

// 支持索引取值，但是不支持负数索引
a[1]; // "a"


// 数组的长度：.length
a.length;  // 3

// 数组中追加值
a.push('chloe');
a; // (4) [11, "a", true, "chloe"]

// 数组删除值：pop(),n不写，默认删除最后一个元素，会返回删除的元素值；
a.pop();

// unshift():头部插入元素，返回当前数组的元素个数
a.unshift('false');  // 4
a  // (4) ["false", 11, "a", true]

// shift():头部移除元素，返回被移除的元素值
a.shift(); // "false"

// .slice(start,end):切片，识别负数
a.slice(0,2); // (2) [11, "a"]

// reverse():反转
a.reverse(); // (3) [true, "a", 11]

// .join():使用指定字符串拼接，内部会将数字转为字符串
var a = [true, "a", 11];
a.join(2); // "true2a211"


// concat():相当于python中列表的extend方法,返回扩展后的元组
a.concat([1,2,3]);  // (6) [true, "a", 11, 1, 2, 3]

// sort():排序
var a = [2,2,4,3];
a.sort();  // (4)[2,2,3,4]

数组重要方法 --- forEach(function(value,index,arr){console.log(value,index,arr)})

index arr参数可以不写，如果参数超过三个会显示undefined

var a = [1,2,'a','c'];

// 只有一个value参数，显示数组中的元素值
a.forEach(function(value){console.log(value)});
/*
VM1274:2 1
VM1274:2 2
VM1274:2 a
VM1274:2 c
*/

// 两个参数value index，显示数组中的元素值及元素索引
a.forEach(function(value,index){console.log(value,index)});

VM1326:1 1 0
VM1326:1 2 1
VM1326:1 a 2
VM1326:1 c 3


// 三个参数value index arr,显示数组中的元素值及下标及元素来源
a.forEach(function(value,index,arr){console.log(value,index,arr)});

VM1340:1 1 0 (4) [1, 2, "a", "c"]
VM1340:1 2 1 (4) [1, 2, "a", "c"]
VM1340:1 a 2 (4) [1, 2, "a", "c"]
VM1340:1 c 3 (4) [1, 2, "a", "c"]

// 四个参数，value index arr  xx,显示数组中的元素值及下标及该数组及undefined
a.forEach(function(value,index,arr,xx){console.log(value,index,arr,xx)});

VM1372:1 1 0 (4) [1, 2, "a", "c"] undefined
VM1372:1 2 1 (4) [1, 2, "a", "c"] undefined
VM1372:1 a 2 (4) [1, 2, "a", "c"] undefined
VM1372:1 c 3 (4) [1, 2, "a", "c"] undefined

数组重要方法 --- splice(start,num,data)

三个参数，第一个是起始位置，第二个是删除个数，第三个删除后添加的数据

var a = [1,2,'a','c'];

// 两个参数的情况，第一个是起始位置，第二个是删除个数，返回删除的元素
a.splice(1,1);  // [2]
a; // (3) [1, "a", "c"]


// 三个参数，先删除后添加
// 删除后添加元素
a.splice(1,1,4); // [2]
a; //  [1,4,'a','c']
// 删除后添加数组
a.splice(1,1,[4,5]); // [2]
a;  // (4) [1, Array(2), "a", "c"]

数组重要方法 --- map(function(value,index,arr){return value })

对数组的元素值处理后，可以重新赋值给另一个变量，原数组不变

var a = [1,2,'a','c'];
res = a.map(function(value){return value+1}); // (4) [2, 3, "a1", "c1"]
a; // (4) [1, 2, "a", "c"]

自定义对象

可以看成是我们python中的字典但是js中的自定义对象要比python里面的字典操作起来更加的方便

创建自定义对象的方式一：{}

// 创建自定义对象
var d = {'name':'chloe','age':18};

// 查看对象的类型
typeof d; // "object"

// 取值
d['name']; // "chloe"
d['age'];  // 18
d.name;  // "chloe"
d.age;  // 18

// 支持for循环取值，默认取到的值也是key
for (let i in d)
{
	console.log(i,d[i]);
};
/*
name chloe
age 18
*/

创建自定义对象的方式二：new

var d = new Object();  // {}
// 为对象中添加键值对的方式一
d['name'] = 'chloe';
// 添加键值对的方式二
d.age = 18;
d; // {name: "chloe", age: 18}

Date对象

let d = new Date();
d;  // 
Sat May 16 2020 08:38:28 GMT+0800 (中国标准时间)

// 将上述时间转换为较为方便观看的格式
d.toLocaleString(); // "2020/5/16 上午8:38:28"


// 支持手动输入时间
let d = new Date('2200/11/11 11:11:11');
d; // Tue Nov 11 2200 11:11:11 GMT+0800 (中国标准时间)
d.toLocaleString();  // "2200/11/11 上午11:11:11"

// 注意：月份是从0开始到11月
// 时间对象具体方法
let d6 = new Date();
d6.getDate()  获取日
d6.getDay()		获取星期
d6.getMonth()		获取月份(0-11)
d6.getFullYear()		获取完整的年份
d6.getHours()			获取小时
d6.getMinutes()		获取分钟
d6.getSeconds()		获取秒
d6.getMilliseconds()  获取毫秒
d6.getTime()					时间戳

Json对象 --- 重要

序列化与反序列化：实现不同语言间的数据交互

// 序列化,stringify()---相当于python中的dumps

let j = {'name':'chloe','age':18};
let res = JSON.stringify(j);
res;  // "{"name":"chloe","age":18}"

// 反序列化，parse() ----相当于python中的load
JSON.parse(res);  // {name: "chloe", age: 18}

RegExp对象

在python中如果需要使用正则需要借助于re模块
在js中需要你创建正则对象

# 第一种 有点麻烦

let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}')

# 第二种 个人推荐

let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/

# 匹配内容

reg1.test('egondsb')
reg2.test('egondsb')

# 题目 获取字符串里面所有的字母s

let sss = 'egondsb dsb dsb'
sss.match(/s/)  # 拿到一个就停止了
sss.match(/s/g)	# 全局匹配  g就表示全局模式

sss.match(/s/)
["s", index: 5, input: "egondsb dsb dsb", groups: undefined]
sss.match(/s/g)
(3) ["s", "s", "s"]

# 全局匹配模式吐槽点

let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g
reg2.test('egondsb')

reg3.test('egondsb')  # 全局模式有一个lastIndex属性
true
reg3.test('egondsb')
false
reg3.test('egondsb')
true
reg3.test('egondsb')
false

reg3.lastIndex
0
reg3.test('egondsb')
true
reg3.lastIndex
7

# 吐槽点二 

let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg4.test()

reg4.test()  # 什么都不传 默认传的是undefined
true
reg4.test()
true

reg4.test(undefined)
true
let reg5 = /undefined/
undefined
reg5.test('jason')
false
reg5.test()
true

"""
总结 你在用js书写正则的时候一定要注意上述问题
一般情况下你后续也不会解除到了
"""

Math对象

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

运算符

算术运算符

++ :表示自增1，类似于 +=1
-- :与++用法一致

var x = 10;
// 先将x的值赋值给y,x在自增
var y = x++;
x; // 11
y; // 10

var x = 10;
// x先自增，然后自增后的x赋值给y
var y = ++x;
x; // 11
y; // 11

比较运算符

// == 弱等于，内部自动转换成相同的数据类型进行比较
1 == '1'; // true

// === 强等于，内部不做类型转换
1 === '1'; // false

// 案例
1 ！= '1'; // false
1 !== '1'; // true

逻辑运算符

短路运算的前提下：进行布尔值的且和或的运算。当运算到某一个值就得出最终结果之后，就返回哪个值。

and关系：&&
or关系：||
not关系：！


5 && '5';
'5'

0 || 1；
1

!5 && '5';
false

流程控制 --- if与switch

if语法结构

if (条件)
{
    条件成立时执行的代码
}
else if(条件)
{
    条件成立时执行的代码
}
...
else
{
    上述条件都不成立时的代码
}

if案例

var age = 18;
if (age>18)
{
    console.log('欢迎光临')
}
else if(age=18)
{
	console.log('再等等')
}
else
{
	console.log('未成年人禁止入内')
}

switch语法结构

提前列举好可能出现的条件和解决方式

swithch(条件)
{
	case 条件:
		条件成立时执行的执行代码
		break;
	case 条件:
		条件成立时执行的执行代码
		break;
	case 条件:
		条件成立时执行的执行代码
		break;
	default:
		console.log('上述条件都不成立')
}

switch案例

var num = 2;
switch(num){
  case 0:
  	console.log('喝酒');
  	break;  # 不加break 匹配到一个之后 就一直往下执行
  case 1:
  	console.log('唱歌');
  	break;
  case 2:
  	console.log('洗脚');
  	break;
  case 3:
  	console.log('按摩');
  	break;
  case 4:
  	console.log('营养快线');
  	break;
  case 5:
  	console.log('老板慢走 欢迎下次光临');
  	break;
  default:
  	console.log('条件都没有匹配上 默认走的流程')
}

for循环

案例1：循环打印0-9

for(let i=0;i<10;i++)
{
	console.log(i);
};

案例2：循环打印数组中的每一个元素

var a = [111,222,333];
for (let i=0;i<a.length;i++)
{
	console.log(a[i]);
};

while循环

var i = 0;
while (i < 100)
{    
	console.log(i);    
	i++;
};

三元运算

注意：不要写的过于复杂

语法格式

var res = 条件? 条件成立时的结果:条件不成立时的结果

案例

var res = 2>5 ? 2:100  // 100

var res = 2>5 ?10:(8>5?1:2)  // 1

函数

函数简介

关键字

在javascript中定义函数的关键字时function

基本语法格式

function 函数名(形参1,形参2,形参3...){函数体代码}

无参函数

function func1()
{
	console.log('hello world');
};
// 调用方式与python相同，加小括号调用
func1();

有参函数

// 形参个数与实参个数相同
function func1(a,b)
{
	console.log(a,b);
};
func1(1,2); // 1 2



// 实参个数大于形参个数，实参个数多了也不会报错，只要形参有对应的数据
function func1(a,b)
{
	console.log(a,b);
};
func1(1,2，3，4);  // 1 2



// 实参个数小于形参个数,少的形参就是undefined
function func1(a,b)
{
	console.log(a,b);
};
func1(1); // 1 undefined



// arguments关键字：能够获取函数接收到的所有参数

function func1(a,b)
{	
	console.log(arguments);
	console.log(a,b);
};
func1(1,2,3);
/*
Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
1 2
*/



//arguments简单使用

function func2(a,b){
  if(arguments.length<2){
    console.log('传少了')
  }else if (arguments.length>2){
    console.log('传多了')
  }else{
    console.log('正常执行')
  }
}

函数的返回值 --- return

// 返回值只有一个
function index()
{
	return 666;
};
res = index();  // 666

// 返回值有多个，只能拿到最后一个
function index()
{
	return 666,999;
}
res = index();  // 999

// 返回值有多个的时候，想要全部的返回值，可以放在数组中
function index()
{
	return [666,999];
}
res = index();  // (2) [666, 999]

// 注意：javascript不支持解压赋值

匿名函数 --- 没有函数名

function()
{
	console.log('hello world');
};  // Uncaught SyntaxError: Function statements require a function name

// res相当于函数名
var res = function()
{
	console.log('hello world');
};
res();

箭头函数

主要用来处理简单的业务逻辑类似于python中的匿名函数

// 箭头左边的是形参 右边的是返回值
var func1 = v => v;
// 等价于
var func1 = function(v)
{
	return v;
};

var func1 = (arg1,arg2) => arg1+arg2;
//等价于
var func1 = function(arg1,ard2)
{
	retutn arg1+arg2;
}

函数的全局变量与局部变量

名称空间的查找顺序与python一致：以定义阶段为准

案例一

var city = "BeiJing";
function f() 
{
  var city = "ShangHai";
  function inner()
  {
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  // ShenZhen

案例2

var city = "BeiJing";
function Bar() 
{
  console.log(city);
}
function f() 
{
  var city = "ShangHai";
  return Bar;
};
var ret = f();
ret();  // BeiJing

案例3

var city = "BeiJing";
function f()
{
    var city = "ShangHai";
    function inner()
    {
        console.log(city);
    };
    return inner;
}
var ret = f();
ret();  // ShangHai

BOM

BOM简介

浏览器对象模型 Browser Object Model

javascript代码操作浏览器

BOM操作

window对象

window对象指代的就是浏览器窗口

// 浏览器窗口的高度
window.innerHeight

//浏览器窗口的宽度
window.innerWidth

// 新建窗口打开页面
window.open('httos://https://www.cnblogs.com/Kathrine/','','height=400px,width=400px,top=400px,left=400px')
/*
第一个参数：新建窗口打开的页面的网址
第二个参数：写空即可
第三个参数：新建窗口的位置和大小
*/

// 关闭当前页面
window.close()

window子对象(window子对象的window前缀可以省略)

// 浏览器的名称
window.navigator.appName   
// "Netscape"


// 浏览器版本
window.navigator.appVersion  
//  "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"


// 表示当前是否是一个浏览器
window.navigator.userAgent;
//  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"
/*
扩展：反爬措施
	最简单最常用的就是校验当前请求的发起者是否是一个浏览器，就是用userAgent
	破解该措施的办法：在代码中加上上面的userAgent配置即可
*/


// 查看当前浏览器运行在哪个平台上
window.navigator.platform;
// "Win32"

history对象

//  回退到上一页
window.history.back();

//  前进到下一页
window.history.forward();

location对象

//  获取当前页面的url
window.location.href;

// 跳转到指定的url
window.location.href = '目标网址';

// 刷新页面，作用相当于浏览器上的刷新功能
window.location.reload();

弹出框

警告框

// 语法格式
window.alert('弹出内容')

// 案例
window.alert('warning!!!')
undefined

确认框

// 语法格式
window.confirm('待确认内容')

// 案例
window.confirm('yes or not?')
// 点击确认返回true  点击取消返回false

提示框

// 语法格式
window.prompt('提示信息','默认值')

// 案例
window.prompt("是否保存密码",'yes')
// 用户输入什么就返回什么

计时器相关

过一段时间之后触发一次，只触发一次,setTimeout

<script>
        function func() {
            alert('哈哈')
        }
        setTimeout(func,3000)  // 单位为毫秒，3s后自动执行func函数
</script>

// 取消定时任务
<script>
        function func() {
            alert('哈哈')
        }
       let t = setTimeout(func,3000)  // 单位为毫秒，3s后自动执行func函数
       
       clearTimeout(t)  // 取消定时任务，需要用变量指代取消的定时任务
</script>

每隔一段时间触发一次，循环触发,setInterval

<script>
        function func() {
            alert('哈哈')
        }

        function show() {
            let t = setInterval(func,3000);  // 毫秒为单位 3秒之后自动执行func函数
            function inner() {
                clearInterval(t)  // 清除定时器
            }
            setTimeout(inner,9000)  // 9s后触发inner函数
        }
</script>

DOM

DOM简介

文件对象模型，Document Object Model

javascript代码操作标签

DOM树的概念

timg.jfif

所有的标签都可以称之为节点

DOM操作的用途

javascript可以通过DOM动态的创建HTML
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

DOM操作的简单流程

DOM操作的是标签，而一个HTML文档中的标签非常多

1 先知道如何查找标签
2 再使用DOM对标签进行操作
3 DOM操作需要用关键字document起手

DOM操作 --- 查找标签

代码准备

<div id="d1" class="c1">div
    <p id="p1">div>p</p>
</div>
<p class="c1">
    <span></span>
</p>
<p class='p1'>p</p>

id查找

document.getElementById('d1');
// <div id="d1">…</div>

类查找

docunment.getElementByClassName('c1');
// HTMLCollection [p.c1]0: p.c1length: 1__proto__: HTMLCollection

标签查找

document.getElementsByTagName('p');
// HTMLCollection(2) [p#p1, p.c1, p1: p#p1]
let divEle = document.getElementsByTagName('p')[0];
// <p class="c1">…</p>

注意

注意三个方法的返回值不同(类与标签查找会返回数组)
用变量名指代标签对象的时候，一般都书写为标签名Ele(divEle)

间接查找

当前标签的父标签

document.getElementsByClassName('p1');
// HTMLCollection(2) [p.p1, p.p1]
let pEle = document.getElementsByClassName("p1")[0];
pEle;
// <p class="p1">div>p</p>

// 获取p标签的父节点
pEle.parentElement;
// <div id="d1">…</div>

获取当前标签的子标签

let divEle = document.getElementById('d1')
divEle.children  # 获取所有的子标签
divEle.children[0]
<div>div>div</div>

// 获取第一个子标签
divEle.firstElementChild
<div>div>div</div>

// 获取最后一个子标签
divEle.lastElementChild
<p>div>p</p>

获取同级别标签

divEle.nextElementSibling  # 同级别下面第一个
<div>div下面div</div>

divEle.previousElementSibling  # 同级别上面第一个
<div>div上面的div</div>

DOM操作 --- 节点操作

节点操作介绍

通过DOM操作动态创建标签
给标签添加属性
将标签添加到HTML文档中（临时的）

节点操作 --- 以img标签为例

创建标签

let imgEle = document.createElement('img');

为标签添加属性

添加默认属性，直接点出属性即可

imgEle.src = '111.png';

添加自定义属性，自定义属性无法点出属性

imgEle.setAttribute('自定义属性名','自定义属性值')
// 即可以设置自定义的属性，也可以设置默认的属性
imgEle.setAttribute('title','一张图片')

将标签添加到HTML文档中

let divEle = document.getElementByID('d1');
// 将img标签添加到div的内部，尾部追加
divEle.appendChild(imgEle)

节点操作 --- 以a标签为例