HTML 中的 JavaScript 操作指南：基础语法与BOM、DOM操作

一、JavaScript的简介

1. JavaScript 是一种高级的、解释型的编程语言，主要用于在网页上实现交互式的功能。
2. 网页开发唯一可用语言，增加网页动态性与交互性。
3. 学习JavaScript可以分为三个部分
   • ECMAScript：js的基础语法
   • BOM：浏览器 对象 模型，把浏览器抽象成一个对象，用js语法来操作浏览器
   • DOM

二、JavaScript的引入

1.html内部使用script标签

在script内部直接编写js

2.在外部js文件中编写

在html内部通过script的src属性引入外部js

三、JavaScript的基本语法

1、变量的声明

1. const（constant）:`声明常量
   • 必须赋值
   • 不可更改
2. let: 声明局部变量
   • 出了语句块失效
   • 没有赋值前不能访问
   • 只能声明一次
   • 一般写在{}中
3. var: 声明全局变量
   • 可以多次声明
   • 自带变量提升效果
   • 没有声明就可以访问

<!-- 变量声明在script中 -->
    <script>
        const PI = 3.14;
        console.log(PI);
        {
            let a=10;
            console.log(a);
        }
        let a=10;
            console.log(a);

        console.log(n);
        var n=20;
        console.log(n);
    </script>

2、运算符

1. 算数运算符
   • 只有：+、-、*、/、%
2. 赋值运算符
   • =、+=、-=、*=、/=、%=
3. 特殊
   • 自增、自减
     • a++: 先返回 再a自加1
     • a–: 先返回，再自减1
     • ++a: 先自加1，再返回
     • –a: 先自减1，再返回
4. 比较运算符
   • >、<、>=、<=、==、!=
   • ==和===
     • ==：只判断值
     • ===：全等于，先判断值，再判断类型
5. 逻辑运算符
   • js中的真假
     • [ ]、{ }为真
     • js中的假: false、0、“”、null
   • &&
     • 左侧为真，返回右侧
     • 左侧为假，返回左侧
   • ||
     • 左侧为真，返回左侧
     • 左侧为假，返回右侧
   • !
     • 结果只有true/false
     • 非真为假，非假为真
6. typeof(name)：查看变量name的类型
7. a instance number:查看变量a是不是number类型的

3、流程控制

1. 顺序结构
2. 分支结构
   • if(条件){语句块}
   • if(条件){语句块} else{语句块}
   • if(条件){语句块} else if(条件){语句块} else{语句块}
3. 循环结构
   • for(变量初始值；终止条件；每次变化条件){语句块}
   • while(条件){语句块条件变量}
     先判断，再执行
   • do{语句块}while(条件)
     先执行，再判断

4、函数的调用

1. function 函数名(){语句块 return ；}
2. 调用：函数名();

    <script>
        function mylog(info, n=10) {
            for(let i=0;i<n;i++){
                document.write(info,i,"<br>")

            }
        }
        function mylog2(){
            document.write("开始执行：")
            mylog("醒醒了")
            document.write("结束执行。")
        }
        mylog2()
        
    </script>

5、数据类型

①字符串

1. length：长度
2. charAt：根据索引找字符串，不报错
3. indexof：根据字符找索引，找不到返回-1
4. concat：字符串拼接
5. endsWith：结尾
6. startsWith：开头
7. replace：替换
8. match：匹配字符；返回字典对象
9. search：匹配字符；返回索引
10. slice：切片；不包含stop
    • slice(start, stop)
11. split：切割；支持空字符切割
12. toLowerCase：转小写
13. toUpperCase：转大写
14. trim：剔除空格

②数组

普通数组方法

1. join：拼接：将数组中的元素转化为字符串，以某元素拼接，不改变原数组

2. length：长度

   • 遍历：0~length-1

3. concat：数组连接；不影响原始数组

4. includes：是否包含

5. indexOf：返回元素索引；找不到返回-1

6. join：将元素使用字符拼接

7. pop：删除末尾

8. push：末尾插入

9. shift：删除开头

10. unshift：开头插入

11. reverse：逆序；影响原数组

12. sort：排序；影响原数组

13. splice

    • start：操作的索引位置
    • deleteCount：删除个数：可选
    • items：插入内容：可选
    • 向数组中添加或删除元素，并返回被删除的元素
    • array.splice(start, deleteCount, item1, item2, …)

14. slice：切片；不影响原数组

高阶函数

形参是匿名函数
第一个参数是值，第二个参数是索引

1. forEach：遍历；没有返回值
2. filter：过滤；以列表的形式返回符合条件的value
3. find：返回符合条件的第一个索引
4. map：映射；返回新的一对一的新列表
5. every：所有value符合条件才返回true
6. some：有一个符合就返回true

<script>
let numbers = [1, 2, 3, 4];
let squaredNumbers = numbers.map(function(number) {
  return number * number;
});
console.log(squaredNumbers); // 输出 [1, 4, 9, 16]
</script>

③对象

1. 通过键查询值
   • 对象名.键名
   • 对象名[“键名”]
2. Object.keys(对象名)
   查看所有的键
   let keys = Object.keys(对象名)
3. 遍历
   • 先找到索引，再遍历
     for(let i=0;i<keys.length;i++){console.log(keys[i], obj[keys[i]])}
   • 直接根据索引遍历
     for(let key in o){console.log(key,obj[key]);}
4. js的序列化与反序列化
   • 序列化：将对象转字符串
     JSON.stringify(对象名)
   • 反序列化
     JSON.parse(字符串名)

<script>
   // 序列换：对象转换为字符串
        let obj_str= JSON.stringify(obj)
        console.log(obj_str,typeof(obj_str));
        
        // 反序列
        let obj2 = JSON.parse(obj_str)
        console.log(obj2,typeof(obj2));
</script>

6、延时操作

1. setTimeout：只延时执行一次
2. setInterval：每隔一段时间执行一次
3. 清除
   • clearTimeout(func1)
   • clearInterval(func)

<script>
      // 序列换：对象转换为字符串
        let obj_str= JSON.stringify(obj)
        console.log(obj_str,typeof(obj_str));
        
        // 反序列
        let obj2 = JSON.parse(obj_str)
        console.log(obj2,typeof(obj2));
</script>

四、BOM

1. window全局变量下的属性

2. BOM（Browser Object Model，浏览器对象模型）是一种用于管理浏览器窗口、框架和弹出对话框等浏览器相关组件的编程接口。

3. BOM 主要核心对象

window 对象
document 对象
location 对象
navigator 对象
screen 对象
4. history
- back: 回退
- forward：前进
- go(n)
- 正值，前进
- 负值，后退
- 0，刷新
5. location
- URL，即网址相关
- herf：当前地址; 返回完整的 URL 地址
- protocol：协议；返回协议部分（如 “http:”）
- host：返回主机名
- port：端口
- pathname： 虚拟路径；URL 的路径部分
- search：查询参数；返回 URL 的查询字符串部分。
- hash：路由模式；返回 URL 的片段标识部分（即 # 后面的内容）。
- 锚点
- reload（）：刷新
6. navigator：userAgent；浏览器身份
7. scrollBy（0,700）：滚动多少
scrollTo(0,300)：滚动到
8. 延时操作

五、DOM

文档对象模型（Document Object Model，DOM）,通过js来操作页面元素.

1、页面元素获取

1. querySelector: 找到匹配的第一个
2. querySelectorAll：找到所有；返回类似数组；可以使用下标获取单个
3. document.query……：搜索整个文档
4. target.query……：在target内部去找

2、绑定事件

1. 鼠标事件

- onclick
- onmouse
	- enter
	- leave
	- down
	- up
	- move

2. 表单元素

-	onfocus：聚焦
-	onblur：失去焦点
-	oninput：输入内容改变
- onkeyup：键盘抬起

3. 获取/修改

1. 内容
   • innerText：不考虑标签
     例：container.innerText = “百度”
   • innerHTML：可以识别标签
     例：container.innerHTML = “百度”
2. 属性
   • 非类名
     • href
     • title
     • id
     • ……
     • 对象名.属性名
   • 类名
     • 对象.classList
       • add：添加
       • remove：删除
       • contains：是否有
       • 例：a.classList.contains(“a2”)
       • toggle：有就删，没有就添加
3. 样式：行外元素
   • 设置：都是设置行内样式；.style.样式属性名=
   • 获取
     • 行内样式可以直接通过style.样式属性名获取
       例：span.style.backgroundColor
     • 内部样式表以及外部样式表
       需要通过getComputedStyle(obj).样式属性名
       例：let spanStyle = getComputedStyle(span)

    <script>
        let footer = document.querySelector(".footer");
        console.log(footer);
        let ps = footer.querySelectorAll("p")
        console.log(ps);
        // 遍历
        ps.forEach(function(item){
            console.log(item);
        })
    </script>

4. 相关元素

1. parentElement：父节点；标签名.parentElement
2. children：所有直接子节点；返回列表，可以使用下标，可以计算长度
3. nextElementSibling：下一个相邻
4. previousElementSibling：上一个相邻

5.元素的创建与删除

1. createElement：创建元素
   只能用document创建document.createElement(“img”);
2. appendChild
   将元素插入文档
   例： p2.appendChild(span);将span添加进p2中
3. remove
   删除元素
   标签.remove
   例：img.remove()