pt20JavaScript-CSDN博客

本文链接：https://blog.csdn.net/weixin_60092693/article/details/131620054

一、 JavaScript 基础

一、 JavaScript 概述

JS 介绍

简称JS，是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等。

JS 组成

核心语法 -ECMAScript 规范了JS的基本语法
浏览器对象模型 -BOM：Browser Object Model，提供了一系列操作浏览器的方法
文档对象模型 -DOM：Document Object Model ，提供了一系列操作的HTML文档的方法

使用方式

元素绑定事件onclick

事件：指用户的行为（单击，双击等）或元素的状态（输入框的焦点状态等）
事件处理：元素监听某种事件并在事件发生后自动执行事件处理函数。
常用事件：onclick (单击事件)
语法：将事件名称以标签属性的方式绑定到元素上，自定义事件处理。

<!--实现点击按钮在控制台输出   button按钮标签  -->
<button onclick="console.log('Hello World');">点击</button>

文档内嵌 script

使用标签书写 JS 代码

<script type="text/javascript">
  alert("alert是弹窗");
</script>

注意：标签可以书写在文档的任意位置，书写多次，一旦加载到script标签就会立即执行内部的JS代码，因此不同的位置会影响代码最终的执行效果

外部链接

创建外部的JS文件 XX.js，在HTML文档中使用引入

<script src="index.js"></script>

注意：既可以实现内嵌 JS 代码，也可以实现引入外部的 JS 文件，但是只能二选一。

使用举例demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>js代码书写方式</title>
  <!-- 内嵌 -->
  <script>
    console.log('在head中执行的JavaScript')
  </script>
  <!-- 引入外部js -->
  <script src="demo.js"></script>
</head>
<body>
  <!-- 元素绑定事件的方式 -->
  <button onclick="alert('hello world')">
    click me
  </button>

  <script>
    // js代码单行注释
    /*        多行注释       */ 
    // 浏览器F12,查看console控制台，显示hello world
    console.log('hello world')
  </script>
</body>
</html>

//demo.js文件
// 外部JS文件
console.log('外部JS文件加载成功');

// 浏览器F12,查看console控制台，
在head中执行的JavaScript
外部JS文件加载成功
hello world

二、基础语法

1. JS是由语句组成,语句由关键字,变量,常量,运算符,方法组成.分号可以作为语句结束的标志,也可以省略
2. JS严格区分大小写
3. 注释语法      单行注释使用 //         多行注释使用 /* */

JS的变量与常量

变量

作用 : 用于存储程序运行过程中可动态修改的数据

语法 : 使用关键var声明，自定义变量名

var a;		//变量声明
a = 100;	//变量赋值
var b = 200; //声明并赋值
var m,n,k;	//同时声明多个变量
var j = 10,c = 20; //同时声明并赋值多个变量

命名规范 :
- 变量名,常量名,函数名,方法名自定义,可以由数字,字母,下划线,$组成,禁止以数字开头
- 禁止与关键字冲突(var const function if else for while do break case switch return class)
- 变量名严格区分大小写
- 变量名尽量见名知意,多个单词组成采用小驼峰,例如：“userName”
使用注意 :
- 变量如果省略var关键字，并且未赋值，直接访问会报错
- 变量使用var关键字声明但未赋值，变量初始值为undefined
- 变量省略var关键字声明，已被赋值，可正常使用.影响变量作用域

常量

作用 : 存储一经定义就无法修改的数据
语法 : 必须声明的同时赋值
```
const PI = 3.14;
```
注意 :
- 常量一经定义,不能修改,强制修改会报错
- 命名规范同变量,为了区分变量,常量名采用全大写字母

以上浏览器 console控制台即可操作

数据类型

基本数据类型

数值类型（不区分整数小数）

整数

十进制表示

   var a = 100;

八进制表示
以0为前缀

   var b = 021; //结果为十进制的 17

十六进制
以0x为前缀

   var c = 0x35;//结果为十进制的 53

 使用 : 整数可以采用不同进制表示,在控制台输出时一律会按照十进制输出

小数

小数点表示

 var m = 1.2345;

科学计数法
例 : 1.5e3
e表示10为底,e后面的数值表示10的次方数
1.5e3 等价于 1.5 * 10(3)

string 字符串类型

字符串 : 由一个或多个字符组成,使用""或’'表示,每一位字符都有对应的Unicode编码

var s = "100";
var s1 = "张三";

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 接收用户输入的姓名
    // 如果用户输入内容后点确定 会将用户输入的结果以字符串的形式返回 如果用户点取消 会返回null
    var uname = prompt('请输入姓名');
    // console.log(uname);
    var salary = prompt('请输入薪资');
    // console.log(uname+'的工资为'+salary+'元');
    
    //python代码 
    // '%s的工资为%s元' % (uname,salary)
    // f'{uname}的工资为{salary}元'

    console.log(`${uname}的工资为${salary}元`);
  </script>
</body>
</html>

boolean 布尔类型

只有真和假两个值，布尔值与number值可以互相转换。true 为 1，false 为 0

var isSave = true;
var isChecked = false;

undefined (程序返回的值)

特殊值，变量声明未赋值时显示undefined

var a;
console.log(a);//undefined

null 空类型 (主动使用的)

解除对象引用时使用null,表示对象为空

引用数据类型

主要指对象，函数

数据类型转换

不同类型的数据参与运算时,需要转换类型

强制类型转换

转换字符串类型

方法 : toString() 返回转换后的字符串

var a = 100;
a = a.toString(); //"100"
var b = true;
b = b.toString(); //"true"

转换number类型

Number(param)
参数为要进行数据类型转换的变量或值，返回转换后的结果:
如果转换成功,返回number值
如果转换失败,返回NaN,(Not a Number)，只要数据中存在非number字符,一律转换失败，返回 NaN

    Number("abc")
    typeof NaN
    Number(undefined)
    Number(null)

parseInt(param)
参数为要解析的数据，作用 : 从数据中解析整数值
过程 :
1. 如果参数为非字符串类型，会自动转成字符串
2. 从左向右依次对每一位字符转number，转换失败则停止向后解析，返回结果
parseFloat(param)
作用 : 提取number值，包含整数和小数部分

隐式类型转换（自动转换）

当字符串与其他数据类型进行"+"运算时,表示字符串的拼接，不再是数学运算
转换规则：将非字符串类型的数据转换成字符串之后进行拼接，最终结果为字符串
其他情况下，一律将操作数转number进行数学运算

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>数据类型转换</title>
</head>
<body>
  <script>
    // 1.强制转换
    // 强制转字符串
    // var a = 100;
    // console.log(a.toString());//'100'

    // var a = true;
    // console.log(a.toString());//'true'

    // var a = undefined;
    // console.log(a.toString());//Uncaught TypeError: Cannot read property 'toString' of undefined

    // var a = null;
    // console.log(a.toString());//Uncaught TypeError: Cannot read property 'toString' of null

    // 强制转数值
    console.log(Number(''));// 0
    console.log(Number('  '));// 0
    console.log(Number('123'));// 123
    console.log(Number('abc'));// NaN
    // typeof NaN   检测数据类型
    console.log(Number(true));// 1
    console.log(Number(false));// 0
    console.log(Number(undefined));// NaN
    console.log(Number(null));// 0


    // '123abc' --> 123
    parseInt('123abc'); // 123
    // 3.14-->'3.14'-->3
    parseInt(3.14);// 3

    parseFloat('123.456.789');//123.456

    // 2.隐式转换
    // 字符串 做 +运算  所有内容自动转字符串做拼接
    // 其他情况 自动转数值做数学计算 如果转number出现NaN，NaN参与数学运算的结果也是NaN
    var age = prompt('请输入年龄');
    // '20' + 10 --> '20' + '10' --> '2010'
    // '20' - 10 --> 20 - 10 --> 10
    console.log(`十年之前${age-10},十年之后${age+10}`);


  </script>
</body>
</html>

运算符

赋值运算符

= 将右边的值赋给左边变量

算数运算符

+ - * / %  加 减 乘 除 取余

复合运算符

+= -= *= /= %=

自增或自减运算符

++ -- 变量的自增和自减指的是在自身基础上进行 +1或-1 的操作

注意：

自增或自减运算符在单独与变量结合时，放前和放后没有区别
如果自增或自减运算符与其他运算符结合使用，要区分前缀和后缀,做前缀，那就先++/–,再进行赋值或其他运算，如果做后缀，就先结合其他运算符，再进行++ / –

关系运算符/比较运算符

> <     
>= <=
==(相等) !=(不相等)
===(全等) !==(不全等)

关系运算符用来判断表达式之间的关系,结果永远是布尔值 true/false
使用
- 字符串与字符串之间的比较
  依次比较每位字符的Unicode码，只要某位字符比较出结果，就返回最终结果
- 其他情况
  一律将操作数转换为number进行数值比较，如果某一操作数无法转换number，则变成NaN参与比较运算，结果永远是false
null和其他数据类型做等值比较运算不转换成数字， null和undefined相等但是 null和undefined不全等
相等与全等
- 相等 : 不考虑数据类型,只做值的比较(包含自动类型转换)
- 全等=== : 不会进行数据类型转换，要求数据类型一致并且值相等才判断全等

逻辑运算符

&& 逻辑与条件1&&条件2
表达式同时成立,最终结果才为true;
|| 逻辑或条件1||条件2
表达式中只要有一个成立,最终结果即为true;
! 逻辑非 !条件
对已有表达式的结果取反

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>运算符</title>
</head>
<body>
  <script>
    var a = 10;
    // a = a+1;
    // a += 1;
    
    
    // console.log(a); 
    
    // a++ 后缀 先返回a的值 然后让a自增
    // ++a 前缀 先让a自增 然后返回a的值
    
    // a的值 10         11    12
    // console.log(a++ + a++);   //21
    // 返回值       10     11
    // console.log(a);//12

    // a的值 10     11     12
    // console.log(++a + a++);   //22
    // 返回值    11     11
    // console.log(a);  //12



    // 接收用户输入的年份  判断是否为闰年
    // var y = prompt('请输入年份');
    // y能被4整除 同时不能被100整除 或者能被400整除
    // Python代码
    // y % 4 == 0 and y % 100 != 0 or y % 400 == 0
    // console.log(y % 4 == 0 && y % 100 != 0 || y % 400 == 0);


    // 对于 && 只有两个条件同时满足 结果为true 一假则假
    // 对于 || 只要有一个条件满足 结果为true  一真俱真

    // 接收用户输入的年龄
    // 如果年龄小于18 显示禁止访问
    var age = prompt('请输入年龄');//'25'

    // 如果输入的结果小于18 前面的表达式的结果为true 对于 && 运算来说不能得到最终结果 会执行后面的表达式
    // 如果输入的结果大于等于18 前面的表达式的结果为false
    // 对于&&来说 一假则假最终结果就是false 不会执行后面的表达式
    age < 18 && console.log('禁止访问');

    // 使用 || 完成上面的功能

  </script>
</body>
</html>

三目运算符

语法 :

表达式1 ? 表达式2 : 表达式3;

过程 :
判断表达式1是否成立,返回布尔值
如果表达式1成立,执行表达式2;
如果表达式1不成立,执行表达式3;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三目运算</title>
</head>
<body>
  <script>
    // 接收用户输入的年龄 如果年龄小于18
    // 显示禁止访问
    // 否则显示允许访问
    var age = prompt('请输入年龄');
    // age<18?console.log('禁止访问'):console.log('允许访问');
    console.log(age<18?'禁止访问':'允许访问');
  </script>
</body>
</html>

三、流程控制

控制代码的执行顺序

分类

顺序结构

从上到下依次执行代码语句

分支/选择结构

if语句

简单if结构

if(条件表达式){
	表达式成立时执行的代码段
}

注意 : 除零值以外，其他值都为真，以下条件为假值false

if(0){}
if(0.0){}
if(""){} //空字符串
if(undefined){}
if(NaN){}
if(null){}

特殊写法 :
{ }可以省略,一旦省略，if语句只控制其后的第一行代码

if - else结构

if(条件表达式){
	//条件成立时执行
}else{
	//条件不成立时选择执行
}

多重分支结构

  if(条件1){
  	//条件1成立时执行
  }else if(条件2){
  	//条件2成立时执行
  }else if(条件3){
  	//条件3成立时执行
  }...else{
  	//条件不成立时执行
  }

练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>if语句</title>
</head>
<body>
  <script>
    // var age = prompt('请输入年龄');
    // if(age<18){
    //   console.log('禁止访问');
    // }else{
    //   console.log('允许访问');
    // }
    // console.log('程序结束');


    var s = prompt('请输入成绩');
    /*
        90+  --> S
        80+  --> A
        70+  --> B
        60+  --> C
        60-  --> D
        超过100或小于0 -->  有误
    */ 
    if(s>100 || s<0){
      console.log('输入有误');
    }else if(s >= 90){
      console.log('S');
    }else if(s >= 80){
      console.log('A');
    }else if(s >= 70){
      console.log('B');
    }else if(s >= 60){
      console.log('C');
    }else if(s < 60){
      console.log('D')
    }

  </script>
</body>
</html>

switch语句

switch(value){
	 case 值1 :
	 //value与值1匹配全等时,执行的代码段
	 break; //结束匹配
	 case 值2 :
	 //value与值2匹配全等时,执行的代码段
	 break;
	 case 值3 :
     //value与值3匹配全等时,执行的代码段
	 break;
	 default:
 	 //所有case匹配失败后默认执行的语句
 	 break;
}

使用 :

1. switch语句用于值的匹配，case用于列出所有可能的值；只有switch()表达式的值与case的值匹配全等时，才会执行case对应的代码段
2. break用于结束匹配，不再向后执行；可以省略，break一旦省略，会从当前匹配到的case开始，向后执行所有的代码语句，直至结束或碰到break跳出
3. default用来表示所有case都匹配失败的情况，一般写在末尾，做默认操作
4. 多个case共用代码段
  		case 值1:
  		case 值2:
  		case 值3:
  		//以上任意一个值匹配全等都会执行的代码段

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    var m = prompt('请输入月份');
    // if(m == 1){
    //   console.log('31天')
    // }else if(m == 2){
    //   console.log('28天')
    // }

    switch(m){
      case '1':
      case '3':
      case '5':
      case '7':
      case '8':
      case '10':
      case '12':
        console.log('31天');
        break;
      case '2':
        console.log('28天');
        break;
      case '4':
      case '6':
      case '9':
      case '11':
        console.log('30天');
        break;
      default:
        console.log('月份输入有误');
    }
  </script>
</body>
</html>

循环结构

根据条件，重复执行某段代码

while循环

定义循环变量;
   while(循环条件){
   条件满足时执行的代码段
   更新循环变量;
}

do-while循环

do{
	循环体;
	更新循环变量
}while(循环条件);

与 while 循环的区别 :

while 循环先判断循环条件，条件成立才执行循环体
do-while 循环不管条件是否成立，先执行一次循环体

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // console.log(0);
    // console.log(1);
    // console.log(2);

    // python
    // i = 0
    // while i<10 :
    //     print(i)
    //     i+=1

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

    
    // var upwd = prompt('请输入密码');
    // 如果密码不是123456就让用户继续输入
    // while(upwd != '123456'){
    //   upwd = prompt('请输入密码');
    // }

    // while (true){
    //   var upwd = prompt('请输入密码');
    //   if(upwd == '123456'){
    //     break
    //   }
    // }

    do{
      var upwd = prompt('请输入密码');
    }while(upwd != '123456')

  </script>
</body>
</html>

for 循环

for(1定义循环变量;2循环条件;4更新循环变量){
	3循环体;
}

循环控制 break continue

break 强制结束循环
continue 结束当次循环，开始下一次循环
循环嵌套 : 在循环中嵌套添加其他循环

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // var i = 0;
    // while(i<10){
    //   console.log(i);
    //   i++;
    // }

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

    // 使用for循环 打印0~20之间的偶数
    // for(var i = 0;i<21;i++){
    //   if (i % 2 == 0){
    //     console.log(i)
    //   }
    // }
    // 通过continue语句 跳过所有的奇数实现上面效果
    for(var i = 0;i<21;i++){
      if(i%2){
        continue
      }
      console.log(i);
    }
  </script>
</body>
</html>

四、函数

作用：封装一段待执行的代码

语法

  //函数声明
  function 函数名(参数列表){
  	函数体
  	return 返回值;
  }
  //函数调用
  函数名(参数列表);

使用

函数名自定义，见名知意，命名规范参照变量的命名规范。普通函数以小写字母开头，用于区分构造函数(构造函数使用大写字母开头，定义类)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>function——函数</title>
</head>
<body>
  <!-- 将定义的函数放到button里，点击使用 -->
  <button onclick="fun();">点击输入用户名</button>

  <script>
    function fun(){
      var uname = prompt('请输入用户名');
      alert(`欢迎${uname}`);
    }
    console.log(fun);
    fun();

    // function fun(){
    //   // console.log('hello world');
    //   // return undefined
    //   return 'hello world'
    // }
    // fun()
    // console.log(fun());

    // function fun(uname){
    //   console.log(`hello ${uname}`);
    // }
    // fun();//hello undefined
    // fun('shibw');

    // function fun(a,b,c=15){
    //   console.log(a,b,c)
    // }
    // fun()
    // fun(10.20)
    // fun(10,20,25);


    // 定义一个函数 接收两个数字 返回比较大的数字
    function myMax(a,b){
      // if(a>b){
      //   return a
      // }
      // return b
      return a>b?a:b;
    }
    console.log(myMax(10,20));
    // 定义一个函数 接收一个数字 如果数字在0～9之间 将数字补零然后返回
    // 传入 0   返回 '00'
    // 传入 1   返回 '01'
    // ...
    // 传入 9   返回 '09'
    // 传入 19  返回 '19'
    function addZero(num){
      // if(num<10){
      //   return '0'+num //补零
      // }
      // return ''+num //转字符串
      return num<10?'0'+num:''+num;
    }
    console.log(addZero(9));
    console.log(addZero(19));
  </script>
</body>
</html>

匿名函数

匿名函数：省略函数名的函数。语法为：

匿名函数自执行

 (function (形参){
  
 })(实参);

定义变量接收匿名函数

 var fn = function (){};
 fn(); //函数调用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>匿名函数</title>
</head>
<body>
  <button id="btn">click me</button>

  <script>
    // doctument通过id属性值查找页面中唯一的元素，即上面button的id
    var btn = document.getElementById('btn');
    // btn 页面元素的节点对象
    // console.log(btn);
    // console.dir(btn);
    // 对页面元素的节点对象进行操作 使用 .语法
    // 对象.属性     获取对象的属性值
      console.log(btn.onclick);
    // 对象.属性=值   设置对象的属性值
      btn.onclick = function(){
      console.log('这是匿名函数赋值给变量');
    };
    //     匿名函数自执行,上方的函数要加下;结尾
    // (function(){
    //   console.log('hello world');
    // })()

    // 在代码执行之前 浏览器会先创建执行上下文
    // 执行上下文会将当前作用域中var 声明的变量和function声明的函数 提前到当前作用域的最上方 然后从上向下逐行执行每一条语句
    // 函数名提前时 函数主体也会一同提前 可以在当前作用域任意位置调用函数
    // 变量名提前时 赋值语句不会提前 此时变量只有初始值undefined

    fun();//这是正常声明的函数
    // console.log(fun2);//undefined
    // fun2();//fun2 is not a function

    function fun(){
      console.log('这是正常声明的函数');
    }
    // fun();

    var fun2 = function(){
      console.log('这是匿名函数赋值给变量');
    }
    // fun2();
  </script>
</body>
</html>

作用域

JavaScript 中作用域分为全局作用域和函数作用域，以函数的{ }作为划分作用域的依据

全局变量和全局函数
- 只要在函数外部使用 var 关键字定义的变量，或函数都是全局变量和全局函数，在任何地方都可以访问
- 所有省略 var 关键字定义的变量，一律是全局变量
局部变量/局部函数
- 在函数内部使用 var 关键字定义的变量为局部变量，函数内部定义的函数也为局部函数，只能在当前作用域中使用，外界无法访问
作用域链
局部作用域中访问变量或函数，首先从当前作用域中查找，当前作用域中没有的话，向上级作用域中查找，直至全局作用域

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>作用域</title>
</head>
<body>
  <script>
    var a = 10;
    function fun(a){
      // a是参数 对参数的修改不会影响全局变量
      a = a + 1;
      console.log(a);// 11
    }
    fun(a);
    console.log(a);// 10


    // var a = 10;
    // function fun(){
    //   // a++;
    //   // 函数内部变量如果没有声明但是有值时 为全局变量
    //   a = a + 1;
    //   console.log(a);// 11
    // }
    // fun();
    // console.log(a);// 11


    // var a = 10;
    // function fun(){
    //   // 执行上下文
    //   // var a
    //   console.log(a);//undefined
    //   var a = 1;
    // }
    // fun();
    // console.log(a);//10


    // var a = 10;
    // function fun(){
    //   console.log(a);//10
    // }
    // fun();
    // console.log(a);//10

      
      
    // var a = 10;
    // function fun(){
    //   var a = 1;
    //   console.log(a);//1
    // }
    // fun();
    // console.log(a);//10

  </script>
</body>
</html>

五、DOM节点操作

DOM全称为 “Document Object Model”，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。）

节点对象

JavaScript 会对 html 文档中的元素、属性、文本甚至注释进行封装，称为节点对象，提供相关的属性和方法。

访问节点

元素节点 ( 操作标签）
属性节点（操作标签属性）
文本节点（操作标签的文本内容）

标签属性都是元素节点对象的属性,可以使用点语法访问，例如：

h1.id = "d1"; 		 //set 方法
console.log(h1.id);  //get 方法
h1.id = null;		//remove 方法

注意 :

属性值以字符串表示
class属性需要更名为 className，避免与关键字冲突，例如：
h1.className = “c1 c2 c3”；

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

  <script>
    // 通过标签名查找页面元素
    var lis = document.getElementsByTagName('li');
    // 如果查找的内容可能是多个对象 多个对象会放在节点列表中返回
    console.log(lis);
    // 可以通过索引获取列表中指定位置的对象
    // console.log(lis[0]);
    // console.log(lis[1]);
    // console.log(lis[2]);
    // 遍历节点列表
    
    for(var i=0;i<lis.length;i++){
      console.log(lis[i]);
      // 每个li被点击时 打印ok
      lis[i].onclick = function(){
        console.log('ok');
      }
    }

  </script>
</body>
</html>

为全部初级中级高级添加点击事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    a{
      color: #222;
      text-decoration: none;
    }
    ul{
      margin: 0;
      padding: 0;
      /* 清除列表样式 */
      list-style: none;
      overflow: hidden;
    }
    li{
      float: left;
    }
    .first>a{
      color: #999;
    }
    .item{
      margin-left: 30px;
      padding: 0 5px;
    }
    .active{
      background-color: red;
      /* color: #fff; */
    }
    .active>a{
      color: #fff;
    }
  </style>
</head>
<body>
  <ul>
           <!--    超链接不写默认刷新当前页面，写#无刷新跳转，填补未定义的跳转 地址栏显示#
也可以写空格的javascript，地址栏不会发送变化    -->
    <li class="first"><a href="#">难度：</a></li>
    <li class="item"><a href="javascript:;">全部</a></li>
    <li class="item"><a href="#">初级</a></li>
    <li class="item active"><a href="#">中级</a></li>
    <li class="item"><a href="#">高级</a></li>
  </ul>
  <script>
    // 为全部 初级 中级 高级添加点击事件
    // 查找页面中className值为item的页面元素
    var items = document.getElementsByClassName('item');
    // 获取 li中级 的class属性
    // console.log(items[2].className);  //item  active
    // 删除中级标签的active
    // items[2].className = 'item';
    // 为高级标签添加active    切换颜色变化
    // items[3].className = 'item active';

    // 遍历节点列表 添加点击事件
    for(var i = 0;i<items.length;i++){
      items[i].onclick = function(){
        // 当item被点击时 先找到当前页面中带有class active的页面元素(通过class属性值查找)   然后删除它的class active
        // getElementsByClassName获取的是一个节点列表 想要获取列表中的对象需要通过索引值获取
        var befor = document.getElementsByClassName('active')[0];
        //var befor = document.getElementsByClassName('active');
        // console.log(befor);    //返回一个节点列表[li.item.active]
        befor.className = 'item';
        // 为当前正在被点击的元素添加class active
        // console.log(this);//调用函数的当前对象
        this.className = 'item active';
      }
    }
  </script>
</body>
</html>

获取多个DOM元素和控制属性

根据标签名获取元素节点列表

var elems = document.getElementsByTagName("");
/*
参数 : 标签名
返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象,添加相应下标。
*/

根据 class 属性值获取元素节点列表

var elems = document.getElementsByClassName("");
/*
参数 : 类名(class属性值)
返回值 : 节点列表
*/

元素节点对象提供了以下属性来操作元素内容

innerHTML : 读取或设置元素文本内容,可识别标签语法，使用较多
innerText : 设置元素文本内容,不能识别标签语法
value : 读取或设置表单控件的值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>操作页面元素的内容</title>
</head>
<body>
  <input id="wd" type="text" placeholder="请输入内容">

  <h1 id="show">
    操作页面（页面显示，清空本行，实验）
  </h1>
  
  <script>
    var wd = document.getElementById('wd');
    var show = document.getElementById('show');
    // 获取用户在输入框中输入的内容
    // 将内容放在页面中h1标签中显示

    // 对于普通双标签 h1~h6 div p span a... 可以通过innerHTML或者innerText获取内容
    // innerHTML既识别HTML标签也识别文本内容,使用较多
    // innerText只识别文本内容
    // 对象.innerHTML  获取内部的HTML
    // 对象.innerHTML = 'xxx'  修改内部的HTML
    console.log(show.innerHTML)  //注释下面的onpinput事件测试
    // show.innerHTML = '<a href="http://www.baidu.cn">baidu</a>'
      
    // 对于表单控件 input select button... 可以通过value属性获取表单控件的值
    // console.log(wd.value);
    
    // wd.onfocus = function(){
    //   console.log('获取焦点事件，鼠标点入，操作')
    // }
    // wd.onblur = function(){
    //   console.log('失去焦点事件，鼠标离开，操作')
    // }
    wd.oninput = function(){
      // console.log('输入内容改变事件，内容改变，操作')
      show.innerHTML = wd.value;
    }
    // wd.onchange = function(){
    //   console.log('值发生改变事件，值变化，操作')
    // }


  </script>
</body>
</html>

操作 DOM 树中的属性值：

elem.getAttribute("attrname");//根据指定的属性名返回对应属性值
elem.setAttribute("attrname","value");//为元素添加属性,参数为属性名和属性值
elem.removeAttribute("attrname");//移除指定属性

操作元素样式：

为元素添加 id、class属性，或操作元素的行内样式，访问元素节点的style属性，获取样式对象；样式对象中包含CSS属性，使用点语法操作。

p.style = "width:300px;";
p.style.color = "white";
p.style.fontSize = "20px";

注意 :

属性值以字符串形式给出，单位不能省略
如果css属性名包含连接符，使用JS访问时，一律去掉连接符,改为驼峰， font-size -> fontSize

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>操作页面元素的样式</title>
  <style>
    .red{
      color: #f00;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1 id="title">hello world</h1>
  <script>
    var title = document.getElementById('title');
    // 为页面标签添加属性class,使用较多
    title.className = 'red';
    // 使用style属性
    // html: border-left-color --> js: borderLeftColor，js中style属性的样式声明
    console.log(title.style);
    // title.style.fontSize = '20px';  太复杂，不能补全
    // title.style = "font-size:20px;color:red;";

    
  </script>
</body>
</html>

JS常用事件

属性	发生事件的场景
onabort	图像加载被中断
onblur	元素失去焦点
onchange	用户改变域的内容
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onerror	当加载文档或图像时发生某个错误
onfocus	元素获得焦点
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onload	某个页面或图像被完成加载
onmousedown	某个鼠标按键被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标被移到某元素之上
onmouseup	某个鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被调整尺寸
onselect	文本被选定
onsubmit	提交按钮被点击
onunload	用户退出页面