JavaScript与DOM的奇妙探险：从入门到精通的实战笔记

文章目录

JavaScript
基本说明
特点
两种使用方式
- 在script中写
- 使用script标签引入JS文件
数据类型
- 介绍
- 特殊值
运算符
- 算数运算符
- 赋值运算符
- 逻辑运算符：![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/bbf5c150699845af837d3c45c926e941.png)
- 条件运算符
数组的定义
- 基本使用
- 数组的遍历
函数
- 含义
- 函数定义方式
- - 基本语法
  - 代码示例
- 细节和注意事项
自定义对象
- Object形式
- {} 形式
事件
- 介绍
- 事件一览表
- 事件分类
- 事件的注册
- 静态注册事件
- 动态注册事件
- - - - 动态事件注册的步骤
- onload加载完成事件
- onclick单击事件
- onblur失去焦点事件
- onchange 内容改变事件
- onsubmit事件
dom
- 介绍及其分类
HTML DOM
- 介绍
- document 对象
- - 说明
  - 对象方法一览
HTML DOM结点
- 介绍
- - - 在 HTMLDOM中，每个部分都是节点：
    - 节点常用方法
    - 节点常用属性

在现代Web开发中，JavaScript与DOM（文档对象模型）是每个开发者必不可少的工具和技能。无论你是刚踏入前端开发领域的新手，还是希望深入了解并掌握高级技巧的经验丰富者，这篇笔记都会为你提供宝贵的指导。本文将带你全面了解JavaScript与DOM的关键概念、基本操作和高级应用，帮助你在开发过程中游刃有余，创造出更加动态和交互性强的网页。
参考学习：JavaScript 教程 (w3school.com.cn)

JavaScript

基本说明

JavaScript 能改变 HTML 内容，能改变 HTML 属性，能改变 HTML 样式 (CSS)，能完成页面的数据验证。

特点

JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释
JavaScript是一种基于对象的脚本语言，可以创建对象，也能使用现有的对象(有对象)。

JavaScript是弱类型的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程可以变化。
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 是弱类型的</title>
<!-- 案例演示 -->
<!--
解释
1. js 代码可以写在 script 标签中
2. type="text/javascript" 表示这个脚本(script)类型是 javascript
3. type="text/javascript" 可以不写，但是建议写上
4. js 语句可以不写 ; 建议写上
5. var -->
<script type="text/javascript">
// 弱类型
// var name = "haha";
// 输出 alert() 使用弹框方式
// 输出 console.log() 在调试输出
// alert("name=" + name);
// 输出变量的类型 typeof, 输出变量的类型
// alert(typeof name);
// name = 100; //给 name 重新赋值
// alert(typeof(name)); // 类型 number
var age = 10; // 数值
console.log("age=" + age);
console.log(typeof age);
age = "北京";
console.log("age=" + age);
console.log(typeof age);
// 那如果输出字符串 + 数字的话会把数字转成 string 吗
var n = 123 + "abc";
console.log(n);
console.log(typeof n);
</script>
</head>
<body>
</body>
</html>

在这里插入图片描述

跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）

两种使用方式

在script中写

代码示例：

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>script 标签中写 JS 代码</title><!-- 解读1. 可以在 head 和 body 嵌入 script2. 执行顺序从上到下3. 建议放在 head --><script type="text/javascript">// 在 head 内使用 script 写 jsconsole.log("ok");</script></head><body><script type="text/javascript">// 在 body 内使用 script 写 jsconsole.log("hi");</script></body></html>

在这里插入图片描述

使用script标签引入JS文件

代码示例：

创建两个文件：test.js和js-use.html

test.js：
---------------------------------------------------------------------------------------------------------------------
alert("我是test.js文件");

js-use.html：
--------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 script 标签引入 JS 文件</title>
<!--
<script type="text/javascript" src="引入的js文件"></script>
-->
<script type="text/javascript" src="./.idea/test.js"></script>
</head>
<body>
</body>
</html>

在这里插入图片描述

数据类型

介绍
1. 数值类型 number
2. 字符串类型 string
3. 对象类型 object
4. 布尔类型 boolean
5. 函数类型 function

特殊值

undefined 变量未赋初始值时，默认undefined
null 控制
NAN Not a Number 非数值

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型-特殊值</title>
</head>
<body>
<script type="text/javascript">
// 说明：
// 1. typeof() 是 JavaScript 语言提供的一个函数。
// 2. 返回变量的数据类型
// 3. 3 个特殊值：undefined（没有赋值就使用）、null、NaN（当不能识别类型）
var email; // 特殊值 undefined
console.log("email=" + email); // undefined
var address = null; // 特殊值 null
console.log("address=" + address); // null
console.log(10 * "abc"); // NaN (Not a Number)
</script>
</body>
</html>

在这里插入图片描述

运算符

算数运算符

在这里插入图片描述

赋值运算符

在这里插入图片描述

注意事项

等于： == 是简单的做字面值的比较
全等于：===除了做字面值的比较之外，还会比较两个变量的数据类型

逻辑运算符：

注意事项
在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用
0 、null、 undefined、“”(空串) 都认为是 false
遵守短路与的机制

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逻辑运算符注意事项和使用细节</title>
<script type="text/javascript">
// 1. 在 JavaScript 语言中，所有的变量，都可以作为一个 boolean 类型的变量去使用。
// 体会：js 语法是比较松散的。
var name = "cong";
var age = 800;
var n1 = null;
if (!n1) {alert("hi~");
}
// 2. 0、null、undefined、""(空串)、NaN 都认为是 false
var address; // undefined
if (!(100 * "hello")) {alert("ok~~");
}
// 3. && 且运算，有两种情况 => 解读(即 && 返回值是遵守短路与的机制)
var res1 = null && 800;
alert("res1=" + res1);
var res2 = "cong" || 800;
// 4. || 或运算，有两种情况 => 解读(即 || 返回值是遵守短路或的机制)
alert("res2=" + res2);
// 小练习
var res3 = (10 + 1) || (6 < 0);
alert("res3=" + res3); // 11
// 5. && 运算和 || 运算有短路现象
var n1 = 1;
var n2 = 3;
var res4 = (n1++ > 100) || n2++;
alert("n1=" + n1 + " n2=" + n2);
</script>
</head>
<body>
</body>
</html>

在这里插入图片描述

条件运算符

代码示例：

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>条件运算符</title><script type="text/javascript">// 1. 规则：如果 (10 > 1) 条件表达式为 T，返回第一个表达式的值//    条件表达式为 F，返回第 2 个表达式的值// 2. 看出 js 使用比较灵活var n1 = 90;var n2 = 1;var res = n2 > 9 ? "cong" + "你好" : 800 + n1;alert("res=" + res);</script></head><body></body></html>

在这里插入图片描述

数组的定义

基本使用

代码示例：

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>数组定义</title><script type="text/javascript">// "Audi", "BMW", "Volvo";// 数组定义方式1var cars1 = ["Audi", "BMW", "Volvo"];console.log("cars1=" + cars1);console.log(cars1[1]); // 表示访问 cars1 数组的第 2 个元素, 1 表示下标/索引，从 0 开始编号// 数组定义方式2var cars2 = []; // 空数组// 添加元素cars2[0] = "奥迪";cars2[1] = "宝马";cars2[2] = "奔驰";console.log("cars2=" + cars2);console.log("cars2[2]=" + cars2[2]); // 奔驰console.log("cars2[10]=" + cars2[10]); // 如果该元素不存在，返回的就是 undefined// 数组定义方式3var cars3 = new Array("Audi", "BMW", "Volvo");console.log("cars3=" + cars3);console.log("cars3[0]=" + cars3[0]); // Audi// 数组定义方式4var cars4 = new Array(); // 空数组console.log(typeof cars4);cars4[0] = "法拉利";cars4[1] = "保时捷";cars4[2] = "yy"; // 相当于是给数组扩容cars4[0] = "zz"; // 替换cars4[8] = "红旗"; // 扩容, 如果是跳过了下标给赋值，那么中间没有赋值的元素为 undefined或逗号console.log("cars4[3]=" + cars4[3]); // undefinedconsole.log("cars4=" + cars4);</script></head><body></body></html>

在这里插入图片描述

数组的遍历

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组使用和遍历</title>
<script type="text/javascript">
var cars = ["Audi", "BMW", "Volvo", 100, 1.1, true];
// 遍历
console.log("数组的长度= " + cars.length); // 6
for (var i = 0; i < cars.length; i++) {console.log(cars[i]); // log 方法会自动换行
}
</script>
</head>
<body>
</body>
</html>

在这里插入图片描述

函数

含义

函数是由事件驱动的，或者当它被调用时，执行的可重复使用的代码块

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数快速入门</title>
<script type="text/javascript">
// 定义一个简单的函数
// 解读：如果不调用函数，那么该函数是不会执行的
function hi() {// 在 js 中如果要执行函数，有两种方式 1. 主动调用 hi(); 2. 通过事件去触发该函数alert("hi cong~");
}
</script>
</head>
<body>
<!-- 这里表示给 button 绑定了 onclick 事件 -->
<!-- 当用户点击了该 button，就会触发 hi() 函数 -->
<button onclick="hi()">点击这里</button>
</body>
</html>

在这里插入图片描述

函数定义方式

基本语法
1. function 函数名（形参列表）{
  函数体
  return 表达式
  
  }//调用函数名（实参列表）；

代码示例

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>使用函数方式1</title><script type="text/javascript">// 定义没有返回值的函数function f1() {alert("f1() 被调用...");}f1();// 定义有形参的函数// 这里的形参不需要指定类型，name 的数据类型是由实参决定function f2(name) {alert("hi " + name);}f2("cong");// 定义有形参和返回值的函数，不需要指定返回类型，返回类型由返回的数据来决定// js 的函数调用机制和 java 一样function f3(n1, n2) {return n1 + n2;}alert("f3(10, 20)=" + f3(10, 20));</script></head><body></body></html>

在这里插入图片描述

细节和注意事项

JS中函数的重载会覆盖掉上一次的定义
函数的arguments隐形参数（作用域在function函数内）
1. 隐形参数:在function函数中不需要定义，可以直接用来获取所有参数的变量。
2. 隐形参数特别像java的可变参数一样。publicvoidfun(int…args)
3. js中的隐形参数跟java的可变参数一样。操作类似数组

应用示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数使用注意事项和细节</title>
<script type="text/javascript">
// 1. JS 中函数的重载会覆盖掉上一次的定义
// 解读
// 1. JS 中函数的重载会覆盖掉上一次的定义
// 2. 当你调用 f1() 时候其实调用的是 f1(name)
// 3. 调用 f1(name) 如果你没有传入实参, 那么这个 name 就是 undefined// function f1() {
// }// alert("ok jack~")// function f1(name) {
// }// f1();
// alert("hi " + name);// 2. 函数的 arguments 隐形参数（作用域在 function 函数内）
// (1) 隐形参数: 在 function 函数中不需要定义，可以直接用来获取所有参数
// (2) 隐形参数特别像 java 的可变参数一样。 public void fun(int ... args)
// (3) js 中的隐形参数跟 java 的可变参数一样，操作类似数组function f2() {// 遍历函数的 arguments 隐形参数// arguments 是数组// 提示：如果我们希望通过 console.log 输出对象的数据，使用 , 连接而不是 +console.log("arguments= ", arguments);console.log("arguments 长度= " + arguments.length);alert("f2()...");
}
f2(10, 20, 30, "cong");// 3. (1) 如果我们的函数有形参，在传入实参的时候，仍然按照顺序匹配
//    (2) 如果有匹配上，就赋给它，如果没有匹配上，也无所谓
//    (3) 仍然会把所有的实参，赋给 arguments
//    (4) 如果形参个数大于了实参个数，则该形参的值为 undefinedfunction f3(n) {console.log("n=" + n); // 100console.log("arguments= ", arguments); // [100, 90, 20]
}
f3(100, 90, 20);</script>
</head>
<body>
</body>
</html>

在这里插入图片描述

自定义对象

Object形式

定义
1. var对象名=newObject();//对象实例（空对象）
  对象名.属性名=值;//定义一个属性
  对象名.函数名=function(){}//定义一个函数
对象的访问
1. 对象名.属性
2. 对象名.函数名()；

应用示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义对象</title>
<script type="text/javascript">
// 自定义对象的方式1
// person 是一个空对象，没有自定义的函数和属性
var person = new Object();
// 增加一个属性 name
console.log("person 类型=" + typeof(person)); // object
person.name = "cong";
// 增加一个属性 age
person.age = 20;
// 增加函数
person.say = function() {// 这里的 this 就是 personconsole.log("person 的信息 " + this.name + " " + this.age + " " + this.job);
}
// 调用
// 访问属性
console.log("name= " + person.name + " " + person.email);
// 访问方法
person.say();
console.log("address= " + person.address);
</script>
<!-- 小细节, 如果没有定义属性，直接使用，就会出现变量提升，显示 undefined -->
</head>
<body>
</body>
</html>

在这里插入图片描述

{} 形式

定义
var对象名={ 属性名：值,//定义属性
属性名：值,//定义属性,注意有,号
函数名：function(){}//定义函数
};
对象访问
1. 对象名.属性
2. 对象名.函数名（）；

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自定义对象方式2：{} 形式</title><script type="text/javascript">// 演示自定义对象方式2：{} 形式var person = {name: "cong", // 说明多个属性和函数之间，使用 , 隔开age: 20,hi: function() {console.log("person 信息= " + this.name + " " + this.age);},sum: function(n1, n2) {return n1 + n2;}}// 使用console.log("外部访问 name=" + person.name + " age=" + person.age);person.hi();console.log("sum=" + person.sum(10, 30));</script>
</head>
<body>
</body>
</html>

在这里插入图片描述

事件

学习文档：JavaScript 事件 (w3school.com.cn)

介绍
1. 事件是电脑输入设备与页面进行交互的响应
2. 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行

事件一览表

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

事件分类

事件的注册
1. 事件注册(绑定)：当事件响应(触发)后要浏览器执行哪些操作代码，叫事件注册或事件绑定
静态注册事件
1. 通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式叫静态注册

动态注册事件

通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 =function(){} 这种形式叫动态注册

动态事件注册的步骤

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload 加载完成事件</title>
<script type="text/javascript">
// 定义了一个函数
function sayOK() {alert('静态注册 onload 事件 sayOK');
}
// 1. 在 js 中，将页面窗口映射成 window 对象
// 2. window 对象有很多的函数和属性，可以使用
// 3. window.onload 表示页面被加载完毕
// 4. 后面的 function (){} 表示加载完毕后，要执行的函数/代码
// 5. 多说一句
window.onload = function () {alert("动态注册 onload 事件");
}
</script>
</head>
<!-- 静态注册 -->
<body>
hello~
<input type="text" value="测试"/>
</body>
</html>

在这里插入图片描述

onload加载完成事件

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload 加载完成事件</title>
<script type="text/javascript">
// 定义了一个函数
function sayOK() {alert('静态注册 onload 事件 sayOK');
}
// 1. 在 js 中，将页面窗口映射成 window 对象
// 2. window 对象有很多的函数和属性，可以使用
// 3. window.onload 表示页面被加载完毕
// 4. 后面的 function (){} 表示加载完毕后，要执行的函数/代码
// 5. 多说一句
window.onload = function () {alert("动态注册 onload 事件");
}
</script>
</head>
<!-- 静态注册 -->
<body>
hello~
<input type="text" value="测试"/>
</body>
</html>

在这里插入图片描述

onclick单击事件

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onclick 单击事件</title>
<script type="text/javascript">
function sayOK() {alert("你点击了 sayOK 按钮");
}
//当页面加载完毕后，我们再进行动态绑定
//基本概念和机制一定要清楚
window.onload = function () {// 动态注册 onclick 事件//1. 先拿到 id=btn01 的 button 对应dom对象//2. 通过 dom对象动态的绑定onclick事件//3. 通过document 的 getElementById 获取对应的dom对象// 挖坑~填坑var btn01 = document.getElementById("btn01");btn01.onclick = function () {alert("你点击了 sayHi 按钮");}
}
</script>
</head>
<body>
<!--静态注册 onClick 事件-->
<button onclick="sayOK()">sayOK 按钮</button>
<button id="btn01">sayHi 按钮</button>
</body>
</html>

在这里插入图片描述

onblur失去焦点事件

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onblur 失去焦点事件</title>
<script type="text/javascript">
//静态绑定
function upperCase() {//1. 先得到fname 输入框的value -> 得到对应dom对象//toUpperCase()是将字符串大写var fname = document.getElementById("fname");fname.value = fname.value.toUpperCase();//将其之后返回原来的变量
}
//在页面加载完毕，完成动态绑定
window.onload = function () {//1.得到 fname2 的 dom对象var fname2 = document.getElementById("fname2");fname2.onblur = function () {fname2.value = fname2.value.toUpperCase();}
}
</script>
</head>
<body>
输入英文单词：
<input type="text" id="fname" onblur="upperCase()" /><br />
输入英文单词：
<input type="text" id="fname2" />
</body>
</html>

在这里插入图片描述

onchange 内容改变事件

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onchange 内容发生改变事件</title><script type="text/javascript">function mySal() {alert("工资范围变化了~");}//动态注册window.onload = function () {//获取到 sel01 的 dom 对象var sel01 = document.getElementById("sel01");//给 sel01 绑定 onchange 事件sel01.onchange = function () {alert("你换女友了~");}}</script>
</head>
<body>
你当前工资水平： <!--静态注册 onchange 事件-->
<select onchange="mySal()"><option>--工资范围--</option><option>10k 以下</option><option>10k-30k</option><option>30k 以上</option>
</select><br/>
你当前女友是谁：
<select id="sel01"><!--动态绑定 onchange--><option>---女友---</option><option>艳红</option><option>春桃</option><option>春花</option>
</select>
</body>
</html>

在这里插入图片描述

onsubmit事件

onsubmit：注册按钮被点击，提交表单

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onsubmit 表单提交事件</title>
<script type="text/javascript">
//静态注册表单提交事件
function register() {//先得到输入的用户名和密码var username = document.getElementById("username");var pwd = document.getElementById("pwd");//判断是否为空""if ("" == username.value || "" == pwd.value) {alert("用户名和密码不能为空, 不能提交");return false; //不提交}//表示要提交return true;
}
//动态注册表单提交事件
window.onload = function () {//使用折半法, 观察原页面是否真的是最新的, 是不是修改的页面和访问的页面一致//得到 form2 表单 dom 对象var form2 = document.getElementById("form2");//给 form2 绑定 onsubmit 事件//解释 onsubmit 绑定的函数，会直接将结果(f,t)返回给onsubmitform2.onsubmit = function () {if(form2.username.value == "" || form2.pwd.value == "") {alert("用户名和密码不能为空, 不能提交");return false; //不提交}return true;}
}
</script>
</head>
<body>
<h1>注册用户1</h1> <!-- 静态注册表单提交事件-->
<form action="1.txt" onsubmit="return register()">u: <input type="text" id="username" name="username"/><br/>p: <input type="password" id="pwd" name="pwd"/><br/><input type="submit" value="注册用户"/>
</form>
<h1>注册用户2</h1> <!-- 动态注册表单提交事件-->
<form action="1.txt" id="form2">u: <input type="text" name="username"/><br/>p: <input type="password" name="pwd"/><br/><input type="submit" value="注册用户"/>
</form>
</body>
</html>

在这里插入图片描述

dom

参考文档：JavaScript HTML DOM (w3school.com.cn)

介绍及其分类
1. dom是全称是文档对象模型，就把文档中的标签，属性，文本转化为对象来管理
2. dom
  1. html dom（重点）
  2. css dom
  3. xml dom

HTML DOM

介绍
1. 当网页被加载时，浏览器会创建页面的文档对象模型（DocumentObjectModel）。
2. HTML DOM 树对象[属性，方法/函数]

document 对象

说明
1. document 它管理了所有的 HTML 文档内容
2. document 它是一种树结构的文档
3. 有层级关系在dom 中把所有的标签都对象化（得到这个html标签的<—>对象–> 操作）
4. 通过 document 可以访问所有的标签对象

对象方法一览

代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>getElementById 的使用</title><!--1.先得到h1的dom对象，通过id获取2.对h1对应的dom对象操作即可--><script type="text/javascript">// function getValue() {// myHeader 就是 dom对象var myHeader = document.getElementById("myHeader");// alert(myHeader);//HTMLHeadingElement// 解读 myHeader.innerText 获取到 myHeader的包含的文本// 看看 innerText , innerHTML// alert(myHeader.innerText); // 文本 cong// alert(myHeader.innerHTML); // html <div>cong</div>// }// 动态绑定，讲过老师，前面老师讲的 js 事件章节// 为了让小伙伴，听得明白一点，快速演示->回去看 js 事件window.onload = function () {// 1. 获取 myHeader 的 dom 对象var myHeader = document.getElementById("myHeader");// 2. 给 myHeader 绑定 onclick 的事件myHeader.onclick = function () {alert("动态绑定 内容是=" + myHeader.innerText);}}// 理解了基本原理，其它的问题就是 API 层级</script>
</head>
<body><!-- 静态绑定一个点击事件 --><h1 id="myHeader"><div>cong</div></h1><p>Click on the header to alert its value</p>
</body>
</html>

在这里插入图片描述

HTML DOM结点

介绍

在 HTMLDOM中，每个部分都是节点：
1. 文档本身是文档节点
2. 所有 HTML 元素是元素节点
3. 所有 HTML 属性是属性节点
4. HTML 元素内的文本是文本节点
5. 注释是注释节点
节点常用方法
1. 通过具体的元素节点调用 getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
2. appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点
节点常用属性
1. childNodes 属性，获取当前节点的所有子节点
2. firstChild 属性，获取当前节点的第一个子节点
3. lastChild 属性，获取当前节点的最后一个子节点
4. parentNode 属性，获取当前节点的父节点
5. nextSibling 属性，获取当前节点的下一个节点 (后一个)
6. previousSibling 属性，获取当前节点的上一个节点 (前一个)
7. className 用于获取或设置标签的 class 属性值
8. innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
9. innerText 属性，表示获取/设置起始标签和结束标签中的文本

代码示例：

css.css文件
---------------------------------------------------------------------------------
@CHARSET"UTF-8";
body {width: 800px;margin-left: auto;margin-right: auto;
}
button {width: 200px;margin-bottom: 10px;text-align: left;
}
#btnList {float: left;
}
#total {width: 450px;float: left;
}
ul {list-style-type: none;margin: 0px;padding: 0px;
}
.inner li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;float: left;
}
.inner {width: 400px;border-width: 1px;margin-bottom: 10px;padding: 10px;float: left;
}
主页面
------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>演示 HTML DOM 相关方法</title><link rel="stylesheet" type="text/css" href="./css.css"/><script type="text/javascript">//使用动态注册/绑定来演示window.onload = function () {// 先获取btn01的domvar btn01 = document.getElementById("btn01");btn01.onclick = function () {// 查找id=java 节点var java = document.getElementById("java");alert("java 节点文本=" + java.innerText);};var btn02 = document.getElementById("btn02");btn02.onclick = function () {//查找所有option 节点// 梳理(id-->getElementById name-->getElementsByName 元素标签名->getElementsByTagName()var options = document.getElementsByTagName("option");alert(options); // object HtmlCollectionfor (var i = 0; i < options.length; i++) {alert("值= " + options[i].innerText);}};//查找 name=sport 的节点var btn03 = document.getElementById("btn03");btn03.onclick = function () {var sports = document.getElementsByName("sport");//NodeListfor (var i = 0; i < sports.length; i++) {//过滤if (sports[i].checked) {alert("运动是= " + sports[i].value);}}};//查找 id=language 下所有li 节点var btn04 = document.getElementById("btn04");btn04.onclick = function () {var lis = document.getElementById("language").getElementsByTagName("li");for (var i = 0; i < lis.length; i++) {alert(lis[i].innerText);//<li>xxx</li> <input value="xx"/>}};//返回 id=sel01 的所有子节点[3种方法]var btn05 = document.getElementById("btn05");btn05.onclick = function () {//var options = document.getElementById("sel01").getElementsByTagName("option");//alert(document.getElementById("sel01").childNodes.length);//11=>object text//解读//1. 如果使用 document.getElementById("sel01").childNodes 获取的是object text 和 object htmloptionelement//2. 如果不希望得到text 对象，需要将所有的内容放在一行var childNodes = document.getElementById("sel01").childNodes;for (var i = 0; i < childNodes.length; i++) {if (childNodes[i].selected) {alert(i + " " + childNodes[i].innerText);}}alert("======================================================");//还有一个以前方法//解读//1. sel01 是 HtmlSelectElement => 本身就有集合特点var sel01 = document.getElementById("sel01");for (var i = 0; i < sel01.length; i++) {alert(sel01[i].innerText);}};//返回 id=sel01 的第一个子节点var btn06 = document.getElementById("btn06");btn06.onclick = function () {//除了上面的方法外，还可以直接使用属性firstChildvar sel01 = document.getElementById("sel01");alert("xx=" + sel01.firstChild);//解读是按照 .childNodes 得到第一个子节点 //object textalert("yy=" + sel01[0]);// 直接是得到第一个 option 节点 object htmloptionelement};//返回 id=java 的父节点var btn07 = document.getElementById("btn07");btn07.onclick = function () {var java = document.getElementById("java");//alert(java.parentNode);// object HtmlUListElement.//alert(java.parentNode.innerHTML);////alert(java.parentNode.childNodes.length);//4var childNodes = java.parentNode.childNodes;for (var i = 0; i < childNodes.length; i++) {alert("语言= " + childNodes[i].innerText);//java php,c++ py,}};//返回 id=ct 的前后兄弟节点var btn08 = document.getElementById("btn08");btn08.onclick = function () {//yydsvar ct = document.getElementById("ct");alert(ct.previousSibling.innerText);//object text , 输出 undefinedalert(ct.previousSibling.previousSibling.innerText);//object htmloptionelement, 艳红alert(ct.nextSibling.nextSibling.innerText);//object HtmlOptionElement, 输出春花alert(ct.nextSibling.innerText);//object text, 输出 undefined};//设置#person 的文本域var btn10 = document.getElementById("btn10");btn10.onclick = function () {var person = document.getElementById("person");person.innerText = "这是我们最新的介绍";};};</script>
</head>
<body>
<div id="total"><div class="inner"><p>你会的运动项目：</p><input type="checkbox" name="sport" value="tq">台球<hr/><input type="checkbox" name="sport" value="zq" checked="checked">足球<input type="checkbox" name="sport" value="ppq">乒乓球 <br/><p>你当前女友是谁：</p><select id="sel01"><option>---女友---</option><option>艳红</option><option id="ct" value="春桃菇凉">春桃</option><option>春花</option><option>桃红</option></select><hr/><p>你的编程语言?</p><ul id="language"><li id="java">Java~~~</li><li>PHP</li><li>C++</li><li>Python</li></ul><br><br><hr/><p>个人介绍:</p><textarea name="person" id="person">个人介绍</textarea></div>
</div>
<div id="btnList"><div><button id="btn01">查找 id=java 节点</button></div><div><button id="btn02">查找所有 option 节点</button></div><div><button id="btn03">查找 name=sport 的节点</button></div><div><button id="btn04">查找 id=language 下所有 li 节点</button></div><div><button id="btn05">返回 id=sel01 的所有子节点</button></div><div><button id="btn06">返回 id=sel01 的第一个子节点</button></div><div><button id="btn07">返回 id=java 的父节点</button></div><div><button id="btn08">返回 id=ct 的前后兄弟节点</button></div><div><button id="btn09">读取 id=ct 的 value 属性值</button></div><div><button id="btn10">设置#person 的文本域</button></div>
</div>
</body>
</html>

在这里插入图片描述

通过本文的学习，你已经掌握了JavaScript与DOM的核心知识和实用技巧。从基础的DOM操作到高级的事件处理和动画效果，你现在具备了将静态网页转变为动态、互动用户体验的能力。希望这篇笔记能成为你前端开发旅程中的一块基石，不仅提升你的技术水平，更激发你在实际项目中不断创新和挑战的热情。继续探索，编写更出色的代码，创造令人惊叹的Web应用吧！

文本来源：韩顺平java课程笔记