JavaScript基础-CSDN博客

本文链接：https://blog.csdn.net/xuexiwd/article/details/120267030

JavaScript的介绍

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

插一句题外话：JavaScript和Java 就是老婆饼和老婆的关系一样（两者没啥关系）

什么是JavaScript

原文链接：https://blog.csdn.net/fuzhongmin05/article/details/69665829

JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言，用来给HTML网页增加动态功能。

动态：在运行时确定数据类型。变量使用之前不需要类型声明，通常变量的类型是被赋值的那个值的类型。
弱类：计算时可以不同类型之间对使用者透明地隐式转换，即使类型不正确，也能通过隐式转换来得到正确的类型。
原型：新对象继承对象（作为模版），将自身的属性共享给新对象，模版对象称为原型。这样新对象实例化后不但可以享有自己创建时和运行时定义的属性，而且可以享有原型对象的属性。

第一个JavaScript程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_js</title>

</head>
<body>
    <!--1、写在标签属性里-->>
    <a href="https://www.baidu.com" onclick="alert('11')">1111</a>

    <!-- 2、写在script标签 -->
    <!-- <script>
        alert('hello')
    </script> -->

    <!-- 3、导入js文件 -->
    <!-- <script src="hello.js"></script> -->
</body>
</html>

在上述代码，我们可以通过三种方式来运用 script

第一种：写在标签属性里，我们通过一个超链接的形式，在a标签里面放了一个 onclick点击事件。再点击页面出现的 1111后，会弹出一个弹窗显示11，随后会切换到其他网页
第二种：写在script标签，进入页面后，弹出跳窗；

但在这里要说明一下：如果第一种和第二种一起运行的话，就会先执行JavaScript，再执行HTML

原因是：

<body>中的js和html执行的顺序是：加载直到<script>之前的所
有html到内存（此时不渲染，浏览器上看不到内容），执行完
html直接兄弟<script>（此<script>后紧挨着还有<script>也
不执行），而后渲染html。加载html->执行script->渲染html。

第三种：导入js文件，可以将要导入的 JavaScript的代码集中在一起，最后通过在 HTML代码中加入，可以将写的导入出来
```
 <script src="hello.js"></script>
```

alert('111')

JavaScript的变量

在Script中引入变量属性，类似Java，C等语言类似

var 语句用于声明变量

输出在弹窗

<script>
    var a = 1;
    alert(a);
</script>

输出在网页

<script>
    var a = "1";
    document.write(a);  // 输出在网页
</script>

关于 document.write()方法：

document.write()方法可以用在两个方面：页面载入过程中用实时脚本创建页面内容，以及用延时脚本创建本窗口或新窗口的内容。该方法需要一个字符串参数，它是写到窗口或框架中的HTML内容。这些字符串参数可以是变量或值为字符串的表达式，写入的内容常常包括HTML标记语言。
记住，在载入页面后，浏览器输出流自动关闭。在此之后，任何一个对当前页面进行操作的document.write()方法将打开—个新的输出流，它将清除当前页面内容(包括源文档的任何变量或值)。因此，假如希望用脚本生成的HTML替换当前页面，就必须把HTML内容连接起来赋给一个变量，使用一个
document.write()方法完成写操作。不必清除文档并打开一个新数据流，一个document.write()调用就可完成所有的操作。
关于document.write()方法还有一点要说明的是它的相关方法document.close()。脚本向窗口(不管是本窗口或其他窗口)写
完内容后，必须关闭输出流。在延时脚本的最后一个document.write()方法后面，必须确保含有document.close()方法，不这样做就不能显示图像和表单。并且，任何后面调用的document.write()方法只会把内容追加到页面后，而不会清除现有内容来写入新值。为了演示document.write()方法，我们提供了同一个应用程序的两个版本。一个向包含脚本的文档中写内容，另—个向—个单独的窗口写内容。请在文本编辑器中键人每个文档，以.html文件扩展名保存，并在浏览器中打开文档。

输出在网页控制台

<script>
    var a = "1";
    console.log(a)
</script>

而这三种方法都是以后程序报错时会采用的调试工具

JavaScript的基本数据类型

typeof(参数) ：输出传入参数的数据类型，用来判断变量的数据类型

<script>
	var a = 1;
	console.log(typeof(a));	// 在网页控制台输出数据类型 (number)
</script>

1、number 数字类型

<script>
	// not a number : 表示未定义和不可表示的值
	var b = NaN;

	// Infinity : 正无穷大
    var c = Infinity;

	// -Infinity : 负无穷大
    var d = -Infinity;
</script>

2、string 字符串类型

<script>
	// 字符串类型
	var s = "name";
</script>

3、boolean 布尔类型
```
<script>
	var e = true;
</script>
```

4、undefined 未定义类型（两种表示形式）

<script>
	var f;
    var f = undefined;
</script>

5、null object类型（特殊）

<script>
	var n = null;   // object类型
</script>

6、symbol : 唯一性; === 比较的就是值和数据类型

<script>
	var m = Symbol("kk");
   	var n = Symbol("kk");
   	console.log(m === n);

   	a = 1;
   	document.write(typeof(a));
</script>

JavaScript的算数运算符

<script>
    var a = 1;
    // 1、+ : 字符串拼接,加法
    a = a + 1; 
    document.write(a + "<br>")
    // 2、- : 减法
    b = a - 1;
    document.write(b + "<br>")
    // 3、++ : 自增
    a++; 
    document.write(a + "<br>")
    // 4、-- : 自减
    ++a; 
    document.write(a + "<br>")
    // 5、* : 乘法
    a = a*b; 
    document.write(a + "<br>")
    // 6、/ : 除法
    a = a/b; 
    document.write(a + "<br>")
    // 7、**: 幂运算
    a = a**2; 
    document.write(a + "<br>")
    document.write(0/0 + "<br>");    // 输出 NaN
    document.write(1/0 + "<br>");   // 输出 Infinity
    document.write(-1/0 + "<br>");  // 输出-Infinity
</script>

JavaScript的比较运算符

<script>
    // 1、 >、<、>=、<=、==
    document.write(2>1);

    // 2、== : 比较的是值 
    document.write(1==1)    // true
    document.write(1=="1");     // true

    // 3、=== : 比较值和数据类型
    document.write(1==="1")     // false
</script>

简单来说： == 代表相同， =代表严格相同, 为啥这么说呢，这么理解：当进行双等号比较时候：先检查两个操作数数据类型，如果相同，则进行=比较，如果不同，则愿意为你进行一次类型转换，转换成相同类型后再进行比较，而===比较时，如果类型不同，直接就是false.

操作数1 == 操作数2，操作数1 === 操作数2

比较过程：

双等号==：

如果两个值类型相同，再进行三个等号(===)的比较
如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较：
- 如果一个是null，一个是undefined，那么相等
- 如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较

三等号===:

如果类型不同，就一定不相等
如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN，只能使用isNaN( )
来判断）
如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。
如果两个值都是true，或是false，那么相等
如果两个值都引用同一个对象或是函数，那么相等，否则不相等
如果两个值都是null，或是undefined，那么相等

JavaScript的逻辑运算符

<script>
    // 1、&& || !
    // && : 两边都为true 结果为true
    document.write((1>2) && (1<2) + "<br>");

    // || : 一边为true 结果为true
    document.write((1>2) || (1<2) + "<br>");

    // ! : 取反
    var a = true
    document.write(!a + "<br>");
    
    // 除了0 和 NaN, 其他的所有数字转布尔类型都是true
    document.write(!0 + "<br>");    // true
    document.write(!1 + "<br>");    // false
    document.write(!2 + "<br>");    // false
    document.write(!NaN + "<br>");  // true

    // 除了空字符串, 其他的string类型代表true
    var a = "111";
    document.write(!a + "<br>");     // false

    var b = "";
    document.write(!b);     // true

    var n = null;
    var m = undefined;
    document.write(n==m + "<br>")   // true

    document.write(!n + "<br>")     // n是false
    document.write(!m + "<br>")     // m是false
    document.write(n===m + "<br>")  // false

</script>

JavaScript的判断、循环语句

JavaScript的 if-else 基本语句和 Java和C 一样

但关于 switch语句就和其他语句有点区别了

首先回顾一下 Java的switch语句的 switch(a)

表达式中的类型必须是 byte、short、int 或 char；case语句中指定的每个值必须具有与表达式兼容的类型。注意：从Java7开始，表达式中支持String

JavaScript中的 var通过后面写的值来决定var所代表的具体值。所以switch表达式中的类型不会像Java那样有严格规定

<script>
    var a = 2;
    switch(a){
        case 1:
            document.write("number");
            break;
        case "a":
            document.write("string");
            break;
        case true:
            document.write("boolean");
            break;
        case undefined:
            document.write("undefined")
            break;
        case null:
            document.write("null")
            break;
    }
</script>

九九乘法表

相对于其他语言在控制台上输出九九乘法表在功能上没什么区别，但是既然是在 HTML上运行，自然可以加上表格啥有趣的东西啦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   td{
       border: 2px solid;
   }
</style>
<body>
    <script>
        document.write("<table>");
        for(var i=1;i<=9;i++){
            document.write("<tr>");
            for(var j=1;j<=9;j++){
                if(j<=i){
                    document.write("<td>")
                    document.write(i +" * "+j+" = " + i*j + "&nbsp;&nbsp;&nbsp;");
                    document.write("</td>")
                }
            }
            document.write("</tr>");
        }
        document.write("</table>");
    </script>
</body>
</html>

功能实现方面没什么区别，但是要注意做成表格的形式要加上相关的标签，也要在 head 里面加上style：让表格线条更清楚

JavaScript的函数部分

不少人应该都接触过其他语言的函数部分，原理其实差不多，但前面我们看到它的一点“小任性”，所以是不是觉得和前面不太一样。JavaScript的有参和无参函数其实都差不多。

第一种函数表达式：

function 方法名(参数列表){
    方法体
}

是不是并没看出是否为有参或者无参。

// 无参
function ask(){
    alert("111");
}
// 调用函数
ask()

// 有参
function answer(name, food){
   document.write(name + "吃" + food)
}
answer("小明", "鸡" + "<br>")

第二种函数表达式：

2、var 方法名 = function(){
    方法体
}

下面的两个函数是不是像极了Java中方法重载，但很可惜，并不是同一个功能。

function add(a, b){
    alert(a+b);
}

function add(a, b, c){
    alert(a-b);
    for (let i=0;i<arguments.length;i++){
        document.write(arguments[i] + "<br>")
    }
}
document.write(add.length + "<br>")
add(1,2)

最后的结果为 -1，那为什么呢？

方法调用时与参数列表无关，只与方法名有关，同时同名方法会覆盖
方法调用时与参数的个数无关，只和参数列表有关

再通过一个求函数参数列表的和以及找到最大值来感受一下

function add(){
    var sum = 0;
    max = arguments[0];
    for(let i = 0;i < arguments.length;i++){
        sum += arguments[i];
        if(arguments[i]>=max){
            max = arguments[i]
        }
    }
    document.write(sum + "<br>");	// 450
    document.write(max)		// 434
}
add(1,2,434,3,10)

JavaScript的数组

我感觉JavaScript的数组和python的列表有一定的相似性，毕竟都是脚本语言。关键两者啥都可以存。

数组的定义

var 数组名 = new Array(存储数据);
JS中数组长度可变
var 数组名 = [元素1, 元素2, 元素3, …];
JS 中数组可以放任意类型的数据

var arr = new Array(2,2,3,4);
arr[0]=1;
document.write(arr[0])
for(var i = 0;i<arr.length;i++){
     document.write(arr[i] + "<br>")
}

JavaScript的foreach方法：

value	值
index	下标
Array	数组的标识

arr.forEach(function(value,index,Array){
    document.write(value + "<br>")
})

foreach 遍历格式：数组名.forEach(function(参数){打印数组元素})

var array = [1,2,3,"5","6","aa",null]

array.forEach(function(a){
	document.write(a + "<br>")
})

for in,格式:for(var 数组下标 in 数组名){
document.write(arr[数组下标])
}

var arr = new Array(2,2,3,4);

for(var i in arr){
    document.write(arr[i]+"<br>")
}

for(var 变量 of 数组名){
document.write(变量)
}

var arr = new Array(2,2,3,4);

for(var i of arr){
    document.write(i+"<br>")
}

数组的一些常用方法：

join(参数): 将数组中的元素按照指定的分隔符拼接为字符串(不传参数则默认以逗号进行拼接)

var arr = new Array(1,2,3,4,5)
var a = arr.join('-')   // a 为字符串
document.write(a + "<br>")

push(参数): 向数组的末尾添加一个或更多元素，并返回新的长度

arr.push(9)
document.write(arr + "<br>")

indexOf(参数): 返回元素索引（首次出现的位置），如果没有返回-1

document.write(arr.indexOf(3) + "<br>")

pop(): 把数组的尾部最后一个元素弹出，也就是删除

arr.pop()
document.write(arr.indexOf(9) + "<br>")

unshift(参数): 往数组头部添加元素

arr.unshift(12)
document.write(arr + "<br>")

shift(参数)：删除数组的头元素

<script>
    var a = new Array(1,2,3,4,5)
    a.shift()
    var b = a.join('-')
    document.write(b)
</script>

lastIndexOf(参数): 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。

document.write(arr.lastIndexOf(5) + "<br>")

日期Date

新建一个Date对象

var date = new Date()

获取当前的时间

document.write(date + "<br>")

获取年份

document.write(date.getFullYear() + "<br>")

获取月份(计算机是从0开始计时)

document.write((date.getMonth()+1) + "<br>")

获取天数

document.write(date.getDate() + "<br>")

获取星期几

document.write(date.getDay() + "<br>")

获取小时

document.write(date.getHours() + "<br>")

获取分钟

document.write(date.getMinutes() + "<br>")

获取秒

document.write(date.getSeconds() + "<br>")

获取本地日期

document.write(date.toLocaleString() + "<br>")

获取本地日期的年月日

document.write(date.toLocaleDateString() + "<br>")

获取本地日期的时分秒

document.write(date.toLocaleTimeString() + "<br>")

获取从 1970/1/1 到此时此刻的毫秒数

document.write(date.getTime() + "<br>")

得到一个类似 2021-9-22 17:30:50 的时间样式

<script>
    var date = new Date()
    var strtime = date.toLocaleString()
    var strtime1 = strtime.substring(0, 9) + " "
    strtime1 = strtime1.split('/').join('-')
    var strtime2 = strtime.substring(13, 19)
    if(date.getHours<10){
        var hour = "0" + date.getHours()
    }else{
        var hour = date.getHours()
    }
    time = strtime1 + hour +strtime2
    document.write(time)
</script>

Math方法

圆周率

document.write(Math.PI + "<br>")

向下取整(取小)

document.write(Math.floor(9.2) + "<br>")     // 9
document.write(Math.floor(-9.2) + "<br>")    // -10

向上取整

document.write(Math.ceil(9.2) + "<br>")     // 10
document.write(Math.ceil(-9.2) + "<br>")    // -9

四舍五入

document.write(Math.round(8.4) + "<br>")    // 8
document.write(Math.round(-8.4) + "<br>")   // -8

绝对值

document.write(Math.abs(-3.3) + "<br>")     // 3.3

求最大值

document.write(Math.max(1,2,3,4,12,1311,3333,"12111") + "<br>")     // 3333

求最小值

document.write(Math.min(12,121,12312,123,213,"2131","21322") + "<br>")    // 12

sin正弦

document.write(Math.sin(Math.PI/2) + "<br>")

cos余弦

document.write(Math.cos(Math.PI) + "<br>")

tan正切

document.write(Math.tan(0) + "<br>")

求指数式幂

document.write(Math.pow(2,4) + "<br>")

算术平方根

document.write(Math.sqrt(4) + "<br>")

随机数(取0~1的值左闭右开)

document.write(Math.random() + "<br>")

取[10, 20]之间的整数

首先分析一下，JavaScript的random方法只能取[0,1)之间的数，所以我们必须将范围扩大到 [10,21)，且为整数

第一步：将random乘以11，为什么不是10？，因为右开的原因；这样我们就可以随机到[0,11)的数了
第二步：在第一步的基础上进行加10 操作，将范围放在了[10,21)之间
第三步：将数放在parseInt里面，进行取整，不就可以得到 [10,20]内的整数啦

for(var i=0;i<100;i++){
    var a = parseInt(Math.random()*11+10)
    document.write(a + "<br>") 
}

getElementById

定义和用法：

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用
如果没有指定 ID 的元素返回 null
如果存在多个指定 ID 的元素则返回第一个

参数	类型（描述）
elementID	String（必须。元素ID属性值）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    	/* id的style 用 # 表示 */
    	/* class的style 用 . 表示 */
        #div1{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="div1"></div>

    <script>
        var div = document.getElementById("div1")
        console.log(div) // <div id="div1"></div>
    </script>
</body>
</html>

getElementsByClassName

定义和使用：

getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。
NodeList 对象代表一个有顺序的节点列表。NodeList 对象
我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
提示：你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。

参数	类型（描述）
classname	String（必须。你需要获取的元素类名）。多个类名使用空格分隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
    	/* id的style 用 # 表示 */
    	/* class的style 用 . 表示 */
        .div1{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div style="height: 10px;"></div>
    <div class="div1"></div>

    <script>
        var div = document.getElementsByClassName("div1")
        div[0].style.backgroundColor="blue"
        console.log(div)
    </script>
</body>
</html>

getElementsByName

定义和用法：

getElementsByName() 方法可返回带有指定名称的对象的集合。

参数	描述
name	必须。元素名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input text="123" name="div1" id=""></input>

    <script>
        var div = document.getElementsByName("div1")
        console.log(div)
    </script>
</body>
</html>

getElementsByTagName

定义和用法：

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
提示：参数值 “*” 返回文档的所有元素。

参数：

参数	类型（描述）
tagname	String（必须。你要获取元素的标签名）

返回值：

类型	描述
NodeList对象	指定标签名的元素集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>

    <ol id="obd">
        <li>222</li>
        <li>222</li>
        <li>222</li>
    </ol>

    <script>
        var aaa = document.getElementsByTagName("li")
        console.log(aaa)

        var ol = document.getElementsByTagName("ol")
        var bb = document.getElementById("obd")
        console.log(ol[0].getElementsByTagName("li"))
        console.log(bb.getElementsByTagName("li"))
    </script>
</body>
</html>

querySelector

定义和用法：

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用
querySelectorAll() 方法替代。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="ul1" class="ul">
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>

    <ol id="obd">
        <li>222</li>
        <li>222</li>
        <li>222</li>
    </ol>

    <script>
        // querySelector: 通过选择器查询元素标签 (id选择器、类选择器、标签选择器) 选择器注意加符号
        // var ul = document.querySelector("#ul1") // 通过id选择器获取, 加 #
        // var ul = document.querySelector(".ul")   // 通过类选择器获取, 加 .
        // var li = document.querySelector("li")

        // querySelectorAll: 通过选择器查询所有的标签元素，返回值是元素集合
        var li = document.querySelectorAll("li")
        console.log(li)
    </script>
</body>
</html>

轮播图练习

现在我们现在用的是本地上的图片，所以轮播图用比较规律的命名格式 ---- img1、img2、img3

我们可以将图片的格式大小调一调
```
style="height: 100px;width: 100px;"
```
定义一个变量作为图片的编号：var num = 1

定义一个方法

function fun(){
   // 图片每隔3秒自动切换
   // 通过id获取img标签
   var img = document.getElementById("img")
   num++;
   if(num>3){
       num=1
   }
   img.src = "img" + num + ".jpg"
}

在方法外写一个定时器
```
setInterval(fun, 3000)
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img style="height: 100px;width: 100px;" src="img1.jpg" alt="图片加载失败" id="img">
    <script>
        // 定义一个变量作为图片的编号
        var num = 1
        // var str = "img"+num
        function fun(){
            // 图片每隔3秒自动切换
            // 通过id获取img标签
            var img = document.getElementById("img")
            num++;
            if(num>3){
                num=1
            }
            img.src = "img" + num + ".jpg"
        }
        setInterval(fun, 3000)
        // console.log(img)
    </script>
</body>
</html>

节点

网页中所有的内容都是节点（标签、属性、文本、注释）等等，在DOM中节点用node表示

节点的属性：

nodeName：节点的名称，如果为元素节点，则输出具体的元素名（只能读，不能修改）
nodeValue：节点的内容，只能获取文本节点和注释节点的内容（文本节点和注释节点，可读，可修改）
nodeType：节点的类型（只能读，不能修改）

节点类型	返回值
元素节点（Element）	1
属性节点（Attr）	2
文本节点（Test）	3
注释节点（Comment）	8
文档节点（Document）	9
文档类型节点（DocumentType）	10
文档片段节点（DocumentFragment）	11

attributes：查看元素节点的属性集合
parentNode：查看父节点
childrenNodes：查看子节点
firstChild：查看第一个子节点
lastChild：查看最后一个子节点
nextSibling：查看下一个兄弟节点
previousSibling：查看上一个兄弟节点

父节点

1、parentNode获取父节点：获取的是当前元素的直接父元素。parentNode是w3c的标准。

var p = document.getElementById("test").parentNode;

2、parentElement获取父节点：parentElement和parentNode一样，只是parentElement是ie的标准。

var p1 = document.getElementById("test").parentElement;

3、offsetParent获取所有父节点：一看offset我们就知道是偏移量其实这个是于位置有关的上下级，直接能够获取到所有父亲节点，这个对应的值是body下的所有节点信息。

var p2 = document.getElementById("test").offsetParent;

创建一个 a 标签：

<div>
    <a href="#">1111</a>
</div>

在JavaScript里面，先获取标签；然后通过 parentNode 寻找父节点

<script>
    // var div = document.querySelector("div")
    // 获取a标签
    var a = document.querySelector("a")
    // 父节点获取(parentNode) a.parentNode.parentNode(可以一直寻根,但 #document 之后就返回null)
    console.log(a.parentNode)
    console.log(a.parentNode.parentNode.parentNode.parentNode)
</script>

子节点：

创建 ul（无序列表）：li（列表元素）

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

先找到 ul 标签元素

var ul = document.querySelector("ul")

子节点: childNodes(集合); childNodes: 获取所有的子节点: 包括元素标签,注释,文本等.

console.log(ul.childNodes)

nodeType：查看节点类型

获取所有的元素子节点; 用遍历
for(let i = 0;i < ul.childNodes.length;i++){
    if(ul.childNodes[i].nodeType == 1){
        console.log(ul.childNodes[i])
    }
}

获取所有的元素子节点 children

console.log(ul.children)

兄弟节点

<div>div1</div>

<a href="#">1111</a>

先要获取相应的标签

var div1 = document.querySelector("div")

nextSibling: 获取下一个兄弟节点: 基于所有的节点去看兄弟节点

console.log(div1.nextSibling) // 返回的是 text（文本）

nextElementSibling: 获取下一个兄弟元素节点

console.log(div1.nextElementSibling)

previousSibling: 获取上一个兄弟节点

console.log(div1.previousSibling)

previousElementSibling: 获取上一个元素兄弟节点

console.log(div1.previousElementSibling)

创建元素节点

<ul>
    <li>111</li>
</ul>

获取父元素

var ul = document.querySelector("ul")

createElement(“标签名”) : 创建元素节点

var li = document.createElement("li")

添加元素节点

ul.appendChild(li)

创建元素节点

var li2 = document.createElement("li")

insertBefore(a, b) : 将a插入到b位置上

ul.insertBefore(li2, ul.children[0])

删除元素节点

首先获取父元素

var ul = document.querySelector("ul")

获取子元素（因为querySelectorAll返回的是一个集合，所以我们取第一个元素）

var li = document.querySelectorAll("li")[1]

删除子元素节点

ul.removeChild(li)

remove: 移除当前元素

ul.remove()

操作盒子

首先我们创建2个盒子，给出盒子特定样式

<style>
    #div1{
        width: 400px;
        height: 400px;
        background-color: red;
    }
    #div2{
        width: 150px;
        height: 150px;
        background-color: yellow;
    }
    #div3{
        width: 150px;
        height: 150px;
        background-color: yellow;
    }
</style>

<div id="div1">
    <div id="div2">

    </div>
</div>

在盒子下面放不跳转的链接或者按钮等可以触发点击事件的标签（我选择的是超链接：a标签）

<a href="#" onclick="del()">删除div1的第一个子元素</a>
<a href="#" onclick="add()">新增一个盒子</a>

先获取父元素

var div1 = document.querySelector("div")

删除节点（先删除子节点，如果子节点都删除完了；可以选择将父节点删除）

function del(params) {
    var div2 = div1.children[0]            
    if(div1.firstElementChild == null){
        div1.remove()
    }else{
        div1.removeChild(div2)
    }
}

增加节点（点击之后，就会去创建一个新的节点；然后设置节点的属性，最后将设置好的节点添加到子节点中）

function add(params) {
    // 创建子元素
    var div3 = document.createElement("div")
    // setAttribute : 设置元素节点的属性值
    div3.setAttribute("id", "div3")
    div1.appendChild(div3)
}

Canvas

Canvas 对象表示一个 HTML 画布元素 - 。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

你可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过 CanvasRenderingContext2D 对象获得。这是通过 Canvas 对象的 getContext() 方法并且把直接量字符串 “2d” 作为唯一的参数传递给它而获得的。

标记在 Safari 1.3 中引入，在制作此参考页时，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，标记及其 API 可以使用位于 excanvas.sourceforge.net 的 ExplorerCanvas 开源项目来模拟

canvas不设置高宽则默认宽为300px, 高为150px；head的style会影响body里面的style，导致最后的比例出现问题；所以不要在head中的style中设置宽高信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #my_canvas{
            background-color: red;
            box-shadow: 10px 10px 2px rgba(12, 213, 123, 123);
            /* width: 200px;
            height: 200px; */
        }
    </style>
</head>
<body>
    <!-- canvas不设置高宽则默认宽为300px, 高为150px -->
    <!-- head的style会影响body里面的style，导致最后的比例出现问题 -->
    <canvas id="my_canvas" height="400px" width="300px"></canvas>
</body>
</html>

用canvas绘制矩形

canvas就是一个画布，所以我们要拿到笔，在上面进行画画

将画布背景添加上颜色，为了更好分辨

<style>
    #my_canvas{
        background-color: red;
        box-shadow: 10px 10px 6px black;
    }
</style>

写一个canvas的画布标签

canvas id="my_canvas" width="400px" height="300px"></canvas>

获取canvas元素

var my_canvas = document.getElementById("my_canvas")

获取上下文对象(画笔)

var txt = my_canvas.getContext("2d")

设置画笔的颜色

txt.fillstyle="green"

绘画矩形: fillRect(x,y,w,h)固定矩形位置, 其中x是横坐标, y是纵坐标

txt.fillRect(10,10,100,100)

绘制一个矩形边框

将画布背景添加上颜色，为了更好分辨

<style>
    #my_canvas{
        background-color: red;
        box-shadow: 10px 10px 6px black;
    }
</style>

写一个canvas的画布标签

canvas id="my_canvas" width="400px" height="300px"></canvas>

获取canvas元素

var my_canvas = document.getElementById("my_canvas")

获取画笔

var txt = my_canvas.getContext("2d")

设置颜色

txt.strokeStyle="yellow"

绘制矩形边框 strokeRect绘制的是边框

txt.strokeRect(100,100,100,100)

清除矩形

将画布背景添加上颜色，为了更好分辨

<style>
    #my_canvas{
        background-color: red;
        box-shadow: 10px 10px 6px black;
    }
</style>

写一个canvas的画布标签

canvas id="my_canvas" width="400px" height="300px"></canvas>

获取canvas元素

var my_canvas = document.getElementById("my_canvas")

获取画笔

var txt = my_canvas.getContext("2d")

设置颜色

txt.fillStyle="yellow"

绘制矩形边框 strokeRect绘制的是边框

txt.fillRect(100,100,100,100)

清除选中的内容 clearRect(x,y,w,h)

txt.clearRect(100,100,90,90)

绘制路径

将画布背景添加上颜色，为了更好分辨

<style>
    #my_canvas{
        background-color: red;
        box-shadow: 10px 10px 6px black;
    }
</style>

写一个canvas的画布标签

canvas id="my_canvas" width="400px" height="300px"></canvas>

获取canvas元素

var my_canvas = document.getElementById("my_canvas")

获取画笔

var txt = my_canvas.getContext("2d")

开启路径

txt.beginPath()

moveTo(x,y) 起始坐标

txt.moveTo(50,50)

lineTo(x,y) 作为下一个连线的坐标

txt.lineTo(100,100)
txt.lineTo(70,60)

开始绘制

txt.stroke()

绘制三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #my_canvas{
            background-color: red;
            box-shadow: 10px 10px 6px black;
        }
    </style>
</head>
<body>
    <canvas id="my_canvas" width="400px" height="300px"></canvas>

    <script>
        // 获取canvas元素
        var my_canvas = document.getElementById("my_canvas")
        // 获取画笔
        var txt = my_canvas.getContext("2d")
        // 开启路径
        txt.beginPath()
        // moveTo(x,y) 起始坐标
        txt.moveTo(50,50)
        // lineTo(x,y)  作为下一个连线的坐标
        txt.lineTo(200,100)
        txt.lineTo(70,100)
        // 关闭路径(连接起点和终点)
        txt.closePath()
        // 开始绘制(不会填充)
        txt.stroke()
        // 填充其中的部分
        txt.fill()
    </script>
</body>
</html>

绘制对称三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #my_canvas{
            background-color: red;
            box-shadow: 10px 10px 6px black;
        }
    </style>
</head>
<body>
    <canvas id="my_canvas" width="800px" height="800px"></canvas>

    <script>
        // 获取canvas元素
        var my_canvas = document.getElementById("my_canvas")
        // 获取画笔
        var txt = my_canvas.getContext("2d")

        // 开启路径
        txt.beginPath()
        txt.moveTo(150,150)
        txt.lineTo(150,350)
        txt.lineTo(350,350)
        txt.closePath()
        txt.fill()

        txt.beginPath()
        txt.moveTo(500,205)
        txt.lineTo(505,5)
        txt.lineTo(300,5)
        txt.closePath()
        txt.fill()
    </script>
</body>
</html>