Js基本运用

night_du

于 2022-06-13 16:45:21 发布

阅读量306

点赞数

分类专栏： JavaWeb 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_44119864/article/details/125263024

版权

JavaWeb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

概述

js是什么

js是弱类型编程语言
脚本语言 --边翻译边运行
和java无关，只是参考了java的规则
无需特意安装环境，在浏览器端运行的编程语言
最初的目的：表单验证

现在的使用：表单验证、动画特效的实现

组成

ECMAScript --ES 核心

定义了JavaScript的基本的语法规范
DOM

文档对象模型，提供一些DOM操作的API
BOM

浏览器对象模型，提供操作浏览器的API

特点

弱数据类型
动态类型
面向过程的，面向对象的语言
基于原型的语言
直译式的编程语言

组成：

ES 定义了js的基本语法规范
DOM 文档对象模型提供一些DOM的操作API
BOM 浏览器对象模型

使用方法

// js文件
console.log(123)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 外部引用js文件 -->
		<!-- 标签必须全部打完，双标签 -->
		<script type="text/javascript" src="../js/first.js"></script>

		// 内部编写js文件，文件运行及即执行
		<script type="text/javascript">
			console.log("内部的js代码");
		</script>

	</head>

	<body>

		<!-- 行内式 如果放js命令，必须指定：javascript:-->
		<a href="javascript:console.log('内部的js代码')">a链接</a>
		<button onclick="console.log(999)">按钮</button>
	</body>
</html>

变量、数据类型与运算符

变量

ES5里面常量只可能是字面量：console.log(123)

EM5只有字面值常量，EM6有自定义常量
声明变量：使用var或者let
变量赋值：变量名=值
声明并赋值：var 变量名=值

基本数据类型

unfinished 未定义的（变量只声明，没有赋值）
null
number 数值类型，包括整型、浮点型、非数字
string 字符、字符串
boolean 布尔

复杂数据类型

object

typeof

用于判断当前变量的数据类型：以下举例部分数据类型的使用

let a;
console.log(typeof a);
let b=123;
console.log(b);
let c="qeq";
console.log(c);

数据类型转换

//未定义
var num;
console.log(num, typeof num) 	//undefined undefined

//string字符串
num = "aaa\'aa" //转义字符
console.log(num, typeof num) 	//aaa'aa  string
//字符
num = 'a'
console.log(num, typeof num)	 //a string

//布尔
num = true
console.log(num, typeof num) 	//true boolean

//布尔和数值相加：true=1,false=0
num = num + 12
console.log(num, typeof num) 	//13 number 

//浮点
num = 3.1415
var after = parseFloat(num)
console.log(after, typeof after) //3.1415 number
//整数
var after1 = parseInt(num)
console.log(after1, typeof after1) //3 number

//字符串转数值：首字符是数字
num = "123abc789"
var int = parseInt(num)
var number = Number(num)
console.log(int, typeof int) 	//123 number
console.log(number, typeof number) 	//NaN number
//字符串转数值：首字符不是数字		
//只有当第一个字符是非数字的时候，patseInt才能正确判断。当需要转换字符和数值时，推荐使用Number
num = "a123456abc789";
int = parseInt(num)
number = Number(num)
console.log(int, typeof int)	 //NaN number
console.log(number, typeof number) 	//NaN number

关系运算符

var n = 123;
var m = "123"
console.log(n == m); //true
console.log(n === m); //false

表达式部分的特殊写法

//ifExp如果是：false 0 "" undefined null返回false，非空字符串、非0数字返回true
var ifExp = 0;
console.log(ifExp);
if (ifExp) {
	console.log("success");
} else {
	console.log("error");
}

数组

常见操作

//声明并创建数组
var arr = [];
var arr1 = [1, 3, 9];
var arr2 = ["a", "c", 9, 5, null, undefined, true];
console.log(arr2.length, arr2, typeof arr2);

console.log("指定位置：" + arr2[3], typeof arr2[3]);	//5 number
console.log("指定位置：" + arr2[8], typeof arr2[8]);	//undefined undefined
//遍历
for (var i = 0; i < arr2.length; i++) {
	console.log(arr2[i]);
}
for (let i in arr2) {
	console.log(arr2[i]);
}
for (let a of arr2) {
	console.log(a);
}
delete arr2[3]	//删除数组元素

冒泡排序

var num = [5, 8, 6, 8, 4, 9, 1]
for (var i = 0; i < num.length; i++) {
	for (var j = 0; j < num.length - 1; j++) {
		if (num[j] < num[j + 1]) {
			var temp = num[j];
			num[j] = num[j + 1];
			num[j + 1] = temp;
		}
	}
}
console.log(num);

函数

概述

将一段有固定功能的代码装起来，便于复用

定义

关键字：function
声明：function 函数名(){}
表达式：let 函数名=function(){}

函数的声明并不会调用执行，只要当函数被调用的时候才能执行

//x=1, y=1默认值
function sum(x = 1, y = 1) {
	console.log(arguments); 	//伪数组：使用类似于数组的方法获取数据的一个对象
	console.log(typeof arguments[0],arguments[0]);	 //获取伪数组第一个元素
    //判断数据类型是不是number：两种方法都可以
	// if ("number" == typeof arguments[0]) {
	if (Number(arguments[0])) {
		console.log("数据类型正常");
	} else {
		console.log("数据类型不正常");
	}
	var count = x + y;
	return count;
}

var count = sum(10, 20) 	//30
console.log(count);
//var count = sum("a", 20) 	//Number(arguments[0]),typeof Number(arguments[0])  NaN number

//参数一般情况下不会影响函数的运行，但是会影响运行的结果
// sum() //NaN	无参
// sum(10, 5, 18) //15 参数多了

返回值

function add(x, y) {
	return x + y;
}

//传入方法，不是方法执行的结果，add()是传入方法的结果
function fn(add) {
	var add2 = add(12, 50);
	document.write(add2)
	return function() {
		return add2
	}
}
//方法调用的两种方法
var fn1=fn(add)
var fn2=fn1()
console.log(fn2)

console.log(fn(add)());

arguments对象

是一个函数的内置属性，伪数组，存储了所有传递过来的实参

function getMessage(x, y){   
   console.log(arguments);   
   // arguments.push(12);   
   if (arguments.length >= 2) {     
     console.log(x + y);   
  }   
   if (arguments.length === 1) {     
     console.log(x + 11);   
  } else {     
     console.log(9 + 11);   
  } 
} 
// function getMessage(x = 9, y = 11){
//   console.log(x + y); 
// } 
getMessage(10,12,13); 
getMessage(10,12);
getMessage(10); 
getMessage(); 
function getNumber(x){  
  return x * x; 
} 
var result = getNumber(); 
console.log(result); 
function getInfo(){   
  var all = 0;   
  console.log(typeof(arguments));   
  if (arguments.length!== 0) {     
    for (let argument of arguments) {       
      all += argument;     
   }   
 }   
  console.log("12233--" + all); 
} 
getInfo(12,13,43,23,1);

自调用函数

(function() {
	console.log("自调用函数1");
})();
(function() {
	console.log("自调用函数2");
}())

回调函数

// 回调函数：在一个方法的内部调用另一个函数
var arr = [4, 5, 9]
arr.forEach(function(value, index, array) {
	console.log(value, index, array);
})

对象

创建

//1、使用字面量的方式创建对象
var dc = {
	name: "随便",
	age: 18,
	gander: "男",
	eating: function() {
		console.log("正在吃东西");
	},
}
console.log(dc.age); 	//输出对象值
dc.eating() 	//调用方法
dc.height = 180 	//添加数据
dc.sleeping = function() { 	//添加方法
	console.log("正在睡觉");
}
console.log(dc.height);

//伪数组
var arr = {
	0: 12,
	1: 90,
	2: 4,
	length: 3
}
console.log(arr[0], arr[1], arr[2], arr.length);

//2、使用js的内置对象Object完成对象的创建
var student = new Object();
student.name = "JavaScript"	//添加数据
student.age = 5
student.talking = function() {
	console.log("dddddd");
}
console.log(student.age, student.name);	//输出数据
student.talking()

//删除对象中的属性
delete student.age

遍历

//遍历
for (let key in student) {
	console.log(key)
}

console.log(student) 	//日志方式打印
console.dir(student) 	//显示结构打印
console.error("error") 	//错误方式打印

内置对象

Data

var currentDate = new Date();	//获取当前时间 Thu Oct 21 2021 10:06:47 GMT+0800 (GMT+08:00)
console.log(currentDate);
console.log(currentDate.valueOf());	//获取当前时间的毫秒值 1634782015812
var current=Date.now()	//html5的新方法：获取当前时间 1634782037816
console.log(current);

var date=new Date("2020-12-25")	//获取指定时间 Fri Dec 25 2020 08:00:00 GMT+0800 (GMT+08:00)
console.log(date);

var date1=new Date(2019,11,25)	//使用时间的部分完成获取 Wed Dec 25 2019 00:00:00 GMT+0800 (GMT+08:00)
console.log(date1);

var date2=new Date(5647454451)	//使用毫秒值获取时间 Sat Mar 07 1970 16:44:14 GMT+0800 (GMT+08:00)
console.log(date2);

时间格式化

console.log(currentDate.valueOf()); //转成毫秒值	1634784324698
console.log(currentDate.toString()); //转成时间日期格式	Thu Oct 21 2021 10:45:30 GMT+0800 (GMT+08:00)
console.log(currentDate.toDateString()); //转成日期字符串：年月日	Thu Oct 21 2021
console.log(currentDate.toTimeString()); //转成时间字符串：时分秒	10:45:48 GMT+0800 (GMT+08:00)
//使用当前浏览器中的首位语言对应的默认时间显示格式
console.log(currentDate.toLocaleString());	//2021/10/21 上午10:45:56
console.log(currentDate.toLocaleDateString());	//2021/10/21
console.log(currentDate.toLocaleTimeString());	//上午10:47:24

var fullYear = currentDate.getFullYear() 	//年份
var month = currentDate.getMonth() + 1 		//月份
var date3 = currentDate.getDate() 	//第几天
var day = currentDate.getDay() 	//周几
day = day === 0 ? "日" : day
var hour = currentDate.getHours() 	//24小时值
hour = hour < 10 ? "0" + hour : hour
var minutes = currentDate.getMinutes()	 //0-59分值
minutes = minutes < 10 ? "0" + minutes : minutes
var seconds = currentDate.getSeconds() 	//0-59秒值
seconds = seconds < 10 ? "0" + seconds : seconds
var time = currentDate.getTime() 	//和valueof一致效果
//时间拼接	2021-10-21 10:44:13是周4
var format = fullYear + "-" + month + "-" + date3 + " " + hour + ":" + minutes + ":" + seconds
console.log(format + "是周" + day);

Array

创建

// 使用字面量创建数组
let nums = []
// 使用内置对象创建
let num1 = new Array();
let num2 = new Array(1, 5, 4, 6, 9)

//遍历
for (let number of num2) {
    console.log(number);
}

判断是不是数组

console.log(nums instanceof Array)	//true
console.log(Array.isArray(num1))	//true

let obj = {
    0: "1",
    1: "b",
    2: "c",
    length: 3
}
console.log(obj[1]) //b
console.log(obj.length)	//3
num1.push(4)  //添加不进去的

//遍历
for (let objKey in obj) {
    console.log(objKey+""+obj[objKey]);	//key+value
}

转成字符串

console.log(num2.toString())	//1,5,4,6,9
console.log(num2.valueOf())

栈操作

//栈操作：先进后出
//push方法：向数组的尾部添加元素，修改length属性，返回length
console.log(nums.push(1))	//元素值：1
nums.push(2)
nums.push(3)
console.log(nums.length)	//3  添加三个元素，长度为3
//pop方法：从尾部删除并且返回元素，并且修改length属性
console.log(nums.pop())		//3
console.log(nums.length)	//2

队列操作

//队列操作：先进先出
let num3 = []
num3.push(1)//添加元素
num3.push(2)
num3.push(3)
console.log(num3.length)	//3
//shift方法：从数组的头部获取元素，并且修改length属性
console.log(num3.shift())   //获取头部元素值：1
console.log(num3.length);   //长度：2
//unshift方法：向数组的头部添加元素，修改length属性，返回length
console.log(num3.unshift(23));//3
console.log(num3[0]);   //刚刚添加的元素值：23

排序和反转

nums = [4, 5, 6, 74, 41, 23, 12, 10];
nums.sort();    //使用无参的方法
console.log(nums);  //[10, 12, 23, 4, 41, 5, 6, 74]

//使用有参的方法  -- 预先编写比较规则
function myComparator(x, y) {
    return x - y;
}
nums.sort(myComparator);
console.log(nums);  //[4, 5, 6, 10, 12, 23, 41, 74]

//反转数组 -- 既修改原数组，也会生成新的数组作为返回值
var numbers = nums.reverse();
console.log(numbers);   // [74, 41, 23, 12, 10, 6, 5, 4]
console.log(nums);  //[74, 41, 23, 12, 10, 6, 5, 4]

拼接

//拼接的方法 : 返回一个新的数组，多一个元素，不会改变原数组
let num5 = ["b", "c", "a", "j", "d"];
let res1 = num5.concat("u")
console.log(num5.length);   //5
console.log(res1.length);   //6
console.log(num5.toString());   //b,c,a,j,d
console.log(res1.toString());   //b,c,a,j,d,u

截取和替换

//截取的方法  不改变原数组，截取数组的指定部分作为一个新的数组返回
let slices = num5.slice(0, 3)
console.log(num5.length);       //5
console.log(slices.length);     //3
console.log(num5.toString());   //b,c,a,j,d
console.log(slices.toString()); //b,c,a

//替换数组的部分  真实从原数组中删除指定范围的元素，并且使用指定的元素替代；将删除的元素作为数组返回
console.log(num5.toString())    //b,c,a,j,d
let splice = num5.splice(0, 3, "e")	//第三个参数不写任何东西就是从原数组中删除指定的元素
console.log(num5.length);       //3
console.log(splice.length);     //3
console.log(num5.toString());   //e,j,d
console.log(splice.toString()); //b,c,a

查询

console.log(num5.indexOf("j"));     //1
console.log(num5.lastIndexOf("j")); //1
console.log(num5.includes("j", 2)); //false 从第二个位置找元素j

迭代

//forEach() 方法为每个数组元素调用一次函数（回调函数）。
num5.forEach(function (ele, index, arr) {
    console.log(ele, index, arr);
})
//every() 方法检查所有数组值是否通过测试。
num5.every(function (ele, index, arr) {
    console.log(ele, index, arr);
})
//some() 方法检查某些数组值是否通过了测试。
num5.some(function (ele, index, arr) {
    console.log(ele, index, arr);
})
// filter() 方法创建一个包含通过测试的数组元素的新数组。
num5.filter(function (ele, index, arr) {
    console.log(ele, index, arr);
})
//map() 方法通过对每个数组元素执行函数来创建新数组
// 不会对没有值的数组元素执行函数，不会更改原始数组。
num5.map(function (ele, index, arr) {
    console.log(ele, index, arr);
})
//num4 中超过30的元素删除
num4 = [1, 54, 23, 4, 98, 5, 7];
let res2 = num4.filter(function (ele, index, arr) {
    if (ele > 30) {
        return false
    }
    return true
})
console.log(num4);
console.log(res2);

连接

//连接的方法 连接元素成为一个字符串, 无参的情况下使用逗号连接 -- toString
//有参的时候, 使用参数进行拼接
console.log(num4);
console.log(res2);

清空

//1. 使用splice 删除全部
nums.splice(0, nums.length);
//2. 直接置空
nums = [];
//3. 直接更改length属性
nums.length = 0;
console.log(nums);

字符串

创建

//使用字面量创建
let str = "122adb";
//使用内置对象创建
let string = new String();
let string1 = new String("4545hgv");
console.log(string1.length);//长度

字符

//字符相关
console.log(string1.charAt(2));//指定位置字符
console.log(string1.charCodeAt(2));//获取指定位置的字符ASCLL编码值
console.log(string1[2]);//H5新增的写法，获取指定位置的字符

字符串

//字符串相关
console.log(string1.concat("xiayule"));//拼接字符串
console.log(string1.slice(0, 3));//截取字符串    endIndex拿不到
console.log(string1.substring(2, 4));//截取字符串
console.log(string1.substr(2, 4));//截取字符串

位置


//和位置相关
console.log(string1.indexOf("a"));
console.log(string1.lastIndexOf("5"));

写法

string = "        sdf    efwe        ";
console.log(string.trim());//去两边空格
console.log(string.trimStart());//去头部空格
console.log(string.trimLeft());//去除左边空格
console.log(string.trimRight());//去除右边空格
console.log(string.trimEnd());//去除尾部空格

大小写

console.log(string.toUpperCase());
console.log(string.toLowerCase());

正则表达式

console.log(string1.search("a"));
console.log(string1.replace("5", "-"));
console.log(string1.match("a"));

分割

console.log(string1.split(5));

DOM

概述

什么是DOM

DOM：Document Object Model 文档对象模型

将整个的HTML文件看成是一个整体，提供一套对于整个整体的操作方法
DOM树：文档树

在这里插入图片描述

- 文档：整个网页
- 节点：网页中的各个组成部分，包括但是不限于元素、标签，包括元素，属性，文本，注释等
- 元素：html标签
- 属性：标签的属性
- 文本：双标签的内部，标签和标签之间的部分

常见DOM操作
- 获取元素
- 操作元素
- 常见元素
- 删除元素
- 事件

获取元素的方式

在js操作中,很多时候需要对于页面的元素进行对应的操作, 设置样式啊,在内部创建元素,删除内部的元素,设定相关的时间,获取元素的内容等. 前提是需要在js代码当中能够获取页面上存在的元素

Id属性

document.getElementById ( id属性的值 )
获取一个元素对象

let pObject = document.getElementById("firstP");
console.log(pObject);   //<p class="first" id="firstP">第一个p元素</p>

class属性

document.getElementsByClassName ( class属性的值 )
获取一组元素对象：相同的class属性的值

let firstObject = document.getElementsByClassName("first");
console.log(Array.isArray(firstObject));    //false
console.log(firstObject);
for (let x of firstObject) {
    console.log(x);     //HTMLCollection []
}

标签名

document.getelementsByTagName ( 标签名称 )
获取一组元素对象：都是同一种标签
伪数组

let pObject = document.getElementsByTagName("p");
console.log(pObject);   //HTMLCollection(4) [p#firstP.first, p.first, p.first, p.first, firstP: p#firstP.first]
for (let x of pObject) {
    console.log(x);
}

name属性

document.getElementsByName ( name属性的值 )
获取一组元素对象：相同name属性的值

let ganders = document.getElementsByName("gender");
console.log(Array.isArray(ganders));    //false
console.log(ganders);   //NodeList []

查询选择器

document.querySelector ( 选择器 )
参数是css中任何一种可行的选择器，返回第一个匹配成功的元素或者 null

let pO = document.querySelector("p");   //标签/元素选择器
console.log(pO);
let element = document.querySelector(".first"); //class/类属性
console.log(element);
let element1 = document.querySelector("#first");    //ID选择器
console.log(element1);
let element2 = document.querySelector("input[name=gander]");    //属性选择器
console.log(element2);

查询所有选择器

let element1 = document.querySelectorAll("p");
console.log(element1);
let element2 = document.querySelectorAll(".first")
console.log(element2);
let element3 = document.querySelectorAll("#first");
console.log(element3);
let element4 = document.querySelectorAll("input[name=gender]");
console.log(element4);

属性操作

非表单元素的属性

src href引入静态资源
innerText和innerHTML的区别：是否识别HTML标签
id
alt
display

<body>
<img src="" alt="">
<p><a href="">a标签</a></p>
<div></div>
<script src="../js/DOM2.js"></script>
</body>

//获取页面元素
let imgObject = document.querySelector("img");
console.dir(imgObject);	//显示一个对象所有的属性和方法。
// 设置属性值
imgObject.src = "../../img./1.png";
imgObject.alt = "该图片格式不支持"

let aObj = document.querySelector("a");
aObj.href = "https://www.taobao.com";
console.log(aObj.href)
aObj.target="_blank";

let divObject = document.querySelector("div");
//	  都能设置标签的内容、双标签的内容
//    innerText 不能识别标签
//    innerHTML  可以识别标签
divObject.innerHTML = "<p>这是一个p标签</p>";
console.log(divObject.innerHTML);   //<p>这是一个p标签</p>
console.log(divObject.innerText);   //这是一个p标签

样式设置

通过style属性设置行内样式
通过className设置预设样式（预先写在css文件中或者css内部样式表的）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first {
            width: 200px;
            height: 200px;
            background-color: #451dfe;
        }

        .second {
            width: 300px;
            height: 300px;
            background-color: #1245;
        }
    </style>
</head>
<body>
<div></div>
<p></p>
<script src="../js/DOM3.js"></script>
</body>

// 获取界面上的元素
let divObject = document.querySelector("div");
// 直接使用预设样式
divObject.className = "first";
console.log(divObject.style);   //获取的是行内样式
console.log(getComputedStyle(divObject));
//使用window的方法，直接查看元素当前使用的样式
console.log(getComputedStyle(divObject).width);

//设定行内样式
function getColor() {
    var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
    var color = "#";
    for (let i = 0; i < 6; i++) {
        var index = Math.floor(Math.random() * 16);
        color += arr[index];
    }
    return color;
}

let pObj = document.querySelector("p");
pObj.style.width = "500px";
pObj.style.height = "200px";
pObj.style.backgroundColor = getColor();
console.log(pObj.style);

表单属性

checked selected 选择的
value
disabled 禁用属性不会提交当前控件的内容
readonly 只读属性会提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单属性</title>
</head>
<body>
<form action="#" method="get" name="frm">
    <fieldset>
        <legend>basic infortion</legend>
        <p>
            <lable>用户编号：
                <input type="text" name="userid" value="123456" placeholder="请输入用户编号" style="outline: none" readonly>
            </lable>
        </p>
        <script>
            let useridObj = document.querySelector("[name=userid]");
            console.log(useridObj.value);
        </script>
        <p>
            <label for="password">用户密码：</label>
            <input type="password" name="password" id="password" placeholder="请输入密码">
        </p>
        <p>
            用户性别：<input type="radio" name="gender" value="男">男
            <input type="radio" name="gender" value="女" checked>女
        </p>
        <script>
            let genderObj = document.querySelector("[checked]");
            console.log(genderObj);
        </script>
    </fieldset>
    <p>
        为何注册：<input type="checkbox" name="reason" value="boring">无聊
        <input type="checkbox" name="reason" value="liking">我愿意
        <input type="checkbox" name="reason" value="buy">想买东西
    </p>
    <p>
        用户头像：<input type="file" name="photo">
    </p>
    <p>
        所在城市：
        <select name="city" id="city" required>
            <option value=""></option>
            <option value="南京">南京</option>
            <option value="苏州">苏州</option>
            <option value="无锡">无锡</option>
            <option value="常州">常州</option>
        </select>
    </p>
    <script>
        let cityObj = document.querySelector("[name=city]");
        cityObj.onchange = function () {
            let city = cityObj.value;
            console.log(city);
            let habbies = document.querySelector("[type=checkbox]:checked");
            console.log(habbies);
        }
    </script>
    <p>
        <textarea name="agreement" id="agreement" cols="30" rows="10" style="resize:none"></textarea>
    </p>
    <p>
        <button type="button">普通按钮</button>
        <button type="submit"> 提交</button>
        <button type="reset">重置</button>
    </p>
</form>
<script>
    let formObj = document.frm;
    console.log(formObj);
</script>
</body>
</html>

节点操作

创建元素

在这里插入图片描述

移除、替换元素

<div>
    <p>这是一个p元素1</p>
    <p>这是一个p元素2</p>
    <p>这是一个p元素3</p>
</div>

<script>
    //通过父元素删除
    let paragraphElement = document.querySelector("p");     //获取第一个p标签
    let parentElement = paragraphElement.parentElement;     //获取父级元素：div
    parentElement.removeChild(paragraphElement);    //通过父元素删除：删除第一个p元素

    //删除子元素
    let divElement = document.querySelector("div"); //获取div标签
    let firstChild = divElement.children[0];    //获取div标签下的第一个子标签
    divElement.removeChild(firstChild);     //删除第一个p元素：第一个已经被删除了，所有删除的是：p元素2

    //替换指定元素
    let imageElement = document.createElement("img");   //创建img元素
    imageElement.alt = "图片格式损坏";
    let child = parentElement.children[0];  //获取父级元素div下的第一个元素
    console.log(child); //<p>这是一个p元素3</p>（前两个已被删除）
    parentElement.replaceChild(imageElement, child);    //替换元素

    //直接清空所有元素
    let htmlDivElement = document.querySelector("div");
    htmlDivElement.innerHTML = "";
</script>

节点分类

节点分类

标签节点、属性节点、文本节点
节点属性

节点名称节点类型节点值
标签节点返回的是大写的标签名 1 返回null
属性节点返回小写的属性名 2 返回属性的值
文本节点返回的是#text 3 返回文本的内容

	节点名称	节点类型	节点值
标签节点	返回的是大写的标签名	1	返回null
属性节点	返回小写的属性名	2	返回属性的值
文本节点	返回的是#text	3	返回文本的内容

根据关系：父节点、子节点、兄弟节点

<body>
<p>这是一个p标签</p>
<ul id="first">
    <li>板栗</li>
    <li>毛栗</li>
    <li>锥栗</li>
</ul>
<span>span标签</span>
<script>
    // 获取第一个li
    let liElement = document.querySelector("li");
    //查看节点名称、类型、节点值
    console.log(liElement.nodeName);    //LI
    console.log(liElement.nodeType);    //1
    console.log(liElement.nodeValue);   //null
    //向上寻找父节点，返回父节点对象
    console.log(liElement.parentNode);  //ul
    console.log(liElement.parentNode.parentNode);   //body
    console.log(liElement.parentNode.parentNode.parentNode);   //html
    console.log(liElement.parentNode.parentNode.parentNode.parentNode); //document DOM的顶层对象
    console.log(liElement.parentNode.parentNode.parentNode.parentNode.parentNode);  //null

    // 查看当前节点的父元素
    let element = liElement.parentElement;
    // 查看当前所有子节点
    let childNodes = element.childNodes;
    console.log(childNodes.length);     //7
    for (let childNode of childNodes) {
        console.log(childNode); //带有换行、空白
    }

    // 查看指定元素的节点名称、类型、节点值
    console.log(childNodes[0].nodeName);    //#text(伪数组)
    console.log(childNodes[0].nodeType);    //#text
    console.log(childNodes[0].nodeValue);   //3

    // 查看当前节点的所有子元素
    let children = element.children;
    console.log(children.length);   //3
    for (let child of children) {
        console.log(child); //<li>板栗</li>...
    }

    // 获取节点属性的值
    let attribute = element.getAttribute("id");
    console.log(attribute); //first
    // 获取属性节点
    let attributeNode = element.getAttributeNode("id");
    console.log(attributeNode); //id="first"

    console.log(attributeNode.nodeName);    //id
    console.log(attributeNode.nodeType);    //2
    console.log(attributeNode.nodeValue);   //first

    // 对节点的属性操作
    element.setAttribute("class", "first"); //设置属性的值
    console.log(element.getAttribute("class")); //first
    element.removeAttribute("id");  //移除属性
    console.log(element.getAttribute("id"));    //null 刚刚删除了，所有不存在
</script>
</body>

节点间关系获取节点

<body>
<div>
    <p>ppppppp</p>
    <ul id="father">
        <li>第1个li标签</li>
        <li>第2个li标签</li>
        <li>第3个li标签</li>
        <li>第4个li标签</li>
        <li>第5个li标签</li>
    </ul>
    <span>span</span>
</div>
<script>
    // 获取无序列表
    let uLElement = document.querySelector("ul");
    // 父节点
    console.log(uLElement.parentNode);
    // 父元素
    console.log(uLElement.parentElement);
    // 子节点
    console.log(uLElement.childNodes);  //odeList(11) [text, li, text, li, text, li, text, li, text, li, text]
    // 子元素
    console.log(uLElement.children);    //HTMLCollection(5) [li, li, li, li, li]
    // 第一个子节点
    console.log(uLElement.firstChild);  //#text
    // 第一个子元素
    console.log(uLElement.firstElementChild);   //第一个li标签
    // 最后一个子节点
    console.log(uLElement.lastChild);   //#text
    // 最后一个子元素
    console.log(uLElement.lastElementChild);    //第5个li标签
    // 前一个兄弟节点
    console.log(uLElement.previousSibling); //#text
    // 前一个兄弟元素
    console.log(uLElement.previousElementSibling);  //<p>ppppppp</p>
    // 后一个兄弟节点
    console.log(uLElement.nextSibling); //#text
    // 后一个兄弟元素
    console.log(uLElement.nextElementSibling);  //<span>span</span>
    // 文档根节点
    console.log(uLElement.ownerDocument);   //#document
    // 所有属性节点的集合
    console.log(uLElement.attributes);  //NamedNodeMap {0: id, id: id, length: 1}
</script>
</body>

事件

什么是事件

是一种机制，触发-响应的机制
比如：百度的输入框输入文字，点击搜索按钮，跳转页面显示结果。页面对于特定的预设行为做出预定的反应

事件的三要素

事件源：目标元素 / 被触发的元素对象
事件类型：触发的行为 --预设的行为
事件处理函数：触发的结果响应 --预设的反应

<body>
<button type="button" onclick="clickEvent()">点击我</button>
<div></div>
<script>
    //1、在js代码中编写事件处理函数，在html中调用
    function clickEvent() {
        document.querySelector("div").innerText = "js代码中编写事件处理函数";
    }

    //2、完全使用js代码处理事件的设置
    document.querySelector("button").onclick = function () {
        document.querySelector("div").innerText = "js代码处理事件的设置";
    }

    //3、使用事件监听器完成事件的处理
    document.querySelector("button").addEventListener("click", function () {
        document.querySelector("div").innerText = "事件监听器";
    }, false)
</script>
</body>

事件的三个阶段

捕获阶段
目标阶段
冒泡阶段

案例：冒泡

<head>
    <meta charset="UTF-8">
    <title>事件阶段</title>
    <style>
        .grand {
            width: 600px;
            height: 600px;
            background-color: aqua;
        }

        .father {
            width: 400px;
            height: 400px;
            background-color: blueviolet;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: grey;
        }
    </style>
</head>
<body>
<div class="grand">
    <div class="father">
        <div class="son"></div>
    </div>
</div>
<script>
    let grand = document.querySelector(".grand");
    let father = document.querySelector(".father");
    var son = document.querySelector(".son");
    grand.addEventListener("click", function (e) {
        console.log(e.eventPhase);	//查看事件的阶段
        console.log("grand被触发了")
    }, false)
    father.addEventListener("click", function (e) {
        e.stopPropagation()	//从当前阶段开始不在冒泡
        console.log(e.eventPhase);
        console.log("father被触发了")
    }, false)
    son.addEventListener("click", function (e) {
        e.stopPropagation()
        console.log("son被触发了")
    }, false)
</script>
</body>

事件委托

是一种对于事件冒泡的正向使用，可以节省代码，按照对应的元素关系设定相对于的事件完成功能

<ul id="outer">
    <li>梨子</li>
    <li>桃子</li>
    <li>李子</li>
</ul>
<script>
    let btnObj = document.querySelector("#btn");
    let ulObj = document.querySelector("#outer");
    btnObj.addEventListener("click", function () {
        let liObj = document.createElement("li");
        liObj.innerText = "神秘的水果"
        ulObj.appendChild(liObj)
    }, false)
    ulObj.addEventListener("click", function (e) {
        console.log(e.target.innerText);
    },false)
</script>

常见事件类型

点击事件
- click 单击
- dbclick 双击
焦点事件
- blur 失去焦点
- focus 获取焦点
浏览器的事件
- load 加载
鼠标事件
- mousedown 按下
- mouseup 松开
- mousemove 移过
- mouseover 移入
- mouseout 移除
键盘事件
- keydown 按下
- keyup 松开
- keypress 按下并松开
表单中事件
- submit 提交
- reset 重置
- change 内容改变的时候
- input 输入内容的时候
- select 文本被选中

BOM

概述

浏览器对象模型 Browser Object Model
由多个对象组成，顶层对象window
利用BOM模型中的方法，进行一些和浏览器相关的操作：后退、刷新、前等等

组成

window：窗口对象
navigator：浏览器对象
screen：显示屏幕对象
history：历史记录对象
location：地址栏对象
document：文档对象

Window对象

浏览器的顶层对象，当调用其中的属性和方法的时候，可以省略window

对话框

<body>
<button type="button">点击</button>
<button type="button" id="second">点击</button>
<button type="button" id="third">点击</button>
<script>
    let btn1 = document.querySelector("button");
    let btn2 = document.querySelector("#second");
    let btn3 = document.querySelector("#third");
    btn1.addEventListener("click", function () {
        //通知框
        alert("通知框，再见！");
    }, false);
    btn2.addEventListener("click", function () {
        //输入弹出框
        let s = prompt("请输入验证码：");
        console.log(s);
    }, false);
    btn3.addEventListener("click", function () {
        //确认框
        let b = confirm("请问：确定需要删除这个文件吗？");
        console.log(b);
        if (b) {
            alert("删除文件")
        } else {
            alert("操作取消")
        }
    }, false);
</script>
</body>

定时器

Interval

在指定的毫秒数后执行，循环执行，直到关闭网页或者手动清除
设立：setIntervale
清除：clearInterval

<button type="button" id="start">开始</button>
<button type="button" id="stop">结束</button>
<div></div>
<script>
    function getColor() {
        var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
        var color = "#";
        for (let i = 0; i < 6; i++) {
            var index = Math.floor(Math.random() * 16);
            color += arr[index];
        }
        return color;
    }
    
    let start = document.querySelector("#start");
    let stop = document.querySelector("#stop");
    let divObj = document.querySelector("div");

    let count = 0;
    let change;
    start.addEventListener("click", function () {
        change = setInterval(function () {
            divObj.style.backgroundColor = getColor();
            divObj.style.transition = "all 1s";
            console.log(count++);
        }, 1000)
    }, false);

    stop.addEventListener("click", function () {
        clearInterval(change)
    })
</script>

timeout

在指定的毫秒数后执行，并且只执行一次
设立：setTimeOut
清除：clearTimeOut
如果需要循环执行，需要递归（重新调用）

<script>
    function getColor() {
        var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
        var color = "#";
        for (let i = 0; i < 6; i++) {
            var index = Math.floor(Math.random() * 16);
            color += arr[index];
        }
        return color;
    }

    let start = document.querySelector("#start");
    let stop = document.querySelector("#stop");
    let divObj = document.querySelector("div");

    let count = 0;
    let change;

    function changeBgc() {
        change = setTimeout(function () {
            divObj.style.backgroundColor = getColor();
            divObj.style.transition = "all 1s";
            console.log(count++);
            changeBgc();
        }, 2000)
    }

    start.addEventListener("click", function () {
        changeBgc();
    }, false);

    stop.addEventListener("click", function () {
        clearInterval(change)
    })
</script>

应用

<span></span>
<script>
    function getFormatDate() {
        let currentDate = new Date();
        let fullYear = currentDate.getFullYear() //年份
        let month = currentDate.getMonth() + 1 //月份
        let date3 = currentDate.getDate() //第几天
        let day = currentDate.getDay() //周几
        day = day === 0 ? "日" : day
        let hour = currentDate.getHours() //24小时值
        hour = hour < 10 ? "0" + hour : hour
        let minutes = currentDate.getMinutes() //0-59分值
        minutes = minutes < 10 ? "0" + minutes : minutes
        var seconds = currentDate.getSeconds() //0-59秒值
        seconds = seconds < 10 ? "0" + seconds : seconds
        let time = currentDate.getTime() //和valueof一致效果
        //时间拼接	2021-10-21 10:44:13是周4
        let format = fullYear + "-" + month + "-" + date3 + " " + hour + ":" + minutes + ":" + seconds
        console.log(format + "是周" + day);
        return format
    }

    let span = document.querySelector("span");
    setInterval(function () {
        span.innerText = getFormatDate();
        span.style.fontSize = "30px";
    }, 1000)
</script>

Location对象

地址栏对象
window的子对象
可以获取或者设置地址栏的url

<button type="button">点击</button>
<script>
    console.log(location);
    console.log(location.href);
    console.log(location.host); //localhost:63342
    console.log(location.hostname); //localhost
    console.log(location.port); //63342
    console.log(location.search);   //?_ijt=shs9avujepan7rivqns2m1h7r0
    console.log(location.pathname); //?_ijt=shs9avujepan7rivqns2m1h7r0

    document.querySelector("button").addEventListener("click", function () {
        location.href = "https://www.baidu.com/";
    }, false)
</script>

 //月份
        let date3 = currentDate.getDate() //第几天
        let day = currentDate.getDay() //周几
        day = day === 0 ? "日" : day
        let hour = currentDate.getHours() //24小时值
        hour = hour < 10 ? "0" + hour : hour
        let minutes = currentDate.getMinutes() //0-59分值
        minutes = minutes < 10 ? "0" + minutes : minutes
        var seconds = currentDate.getSeconds() //0-59秒值
        seconds = seconds < 10 ? "0" + seconds : seconds
        let time = currentDate.getTime() //和valueof一致效果
        //时间拼接	2021-10-21 10:44:13是周4
        let format = fullYear + "-" + month + "-" + date3 + " " + hour + ":" + minutes + ":" + seconds
        console.log(format + "是周" + day);
        return format
    }

let span = document.querySelector("span");
setInterval(function () {
    span.innerText = getFormatDate();
    span.style.fontSize = "30px";
}, 1000)

```

Location对象

地址栏对象
window的子对象
可以获取或者设置地址栏的url

<button type="button">点击</button>
<script>
    console.log(location);
    console.log(location.href);
    console.log(location.host); //localhost:63342
    console.log(location.hostname); //localhost
    console.log(location.port); //63342
    console.log(location.search);   //?_ijt=shs9avujepan7rivqns2m1h7r0
    console.log(location.pathname); //?_ijt=shs9avujepan7rivqns2m1h7r0

    document.querySelector("button").addEventListener("click", function () {
        location.href = "https://www.baidu.com/";
    }, false)
</script>