文章目录
- JavaScript
- 基本说明
- 特点
- 两种使用方式
- 数据类型
- 运算符
- 数组的定义
- 函数
- 自定义对象
-
- Object形式
- [{} 形式](#{} 形式)
- 事件
-
- 介绍
- 事件一览表
- 事件分类
- 事件的注册
- 静态注册事件
- 动态注册事件
- onload加载完成事件
- onclick单击事件
- onblur失去焦点事件
- [onchange 内容改变事件](#onchange 内容改变事件)
- onsubmit事件
- dom
- [HTML DOM](#HTML DOM)
- [HTML DOM结点](#HTML DOM结点)
](#%E9%80%BB%E8%BE%91%E8%BF%90%E7%AE%97%E7%AC%A6%EF%BC%9A!%5B%E5%9C%A8%E8%BF%99%E9%87%8C%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87%E6%8F%8F%E8%BF%B0%5D(https://i-blog.csdnimg.cn/direct/bbf5c150699845af837d3c45c926e941.png)){kind=link}
在现代Web开发中，JavaScript与DOM（文档对象模型）是每个开发者必不可少的工具和技能。无论你是刚踏入前端开发领域的新手，还是希望深入了解并掌握高级技巧的经验丰富者，这篇笔记都会为你提供宝贵的指导。本文将带你全面了解JavaScript与DOM的关键概念、基本操作和高级应用，帮助你在开发过程中游刃有余，创造出更加动态和交互性强的网页。
参考学习：JavaScript 教程 (w3school.com.cn)
JavaScript
基本说明
JavaScript 能改变 HTML 内容，能改变 HTML 属性，能改变 HTML 样式 (CSS)，能完成 页面的数据验证。
特点
-
JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序 的运行过程中逐行进行解释
-
JavaScript是一种基于对象的脚本语言，可以创建对象，也能使用现有的对象(有对象)。
-
JavaScript是弱类型 的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程 可以变化。
代码示例：
python<!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中写
-
代码示例：
python<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>script 标签中写 JS 代码</title> <!-- 解读 1. 可以在 head 和 body 嵌入 script 2. 执行顺序从上到下 3. 建议放在 head --> <script type="text/javascript"> // 在 head 内使用 script 写 js console.log("ok"); </script> </head> <body> <script type="text/javascript"> // 在 body 内使用 script 写 js console.log("hi"); </script> </body> </html>
使用script标签引入JS文件
-
代码示例：
创建两个文件：test.js和js-use.html
pythontest.js： --------------------------------------------------------------------------------------------------------------------- alert("我是test.js文件");pythonjs-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>
数据类型
介绍
- 数值类型 number
- 字符串类型 string
- 对象类型 object
- 布尔类型 boolean
- 函数类型 function
特殊值
-
undefined 变量未赋初始值时，默认undefined
-
null 控制
-
NAN Not a Number 非数值
-
代码示例：
python<!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
-
遵守短路与的机制
-
代码示例：
python<!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>
-
条件运算符
-
代码示例：
python<!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>
数组的定义
基本使用
-
代码示例：
python<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数组定义</title> <script type="text/javascript"> // "Audi", "BMW", "Volvo"; // 数组定义方式1 var cars1 = ["Audi", "BMW", "Volvo"]; console.log("cars1=" + cars1); console.log(cars1[1]); // 表示访问 cars1 数组的第 2 个元素, 1 表示下标/索引，从 0 开始编号 // 数组定义方式2 var cars2 = []; // 空数组 // 添加元素 cars2[0] = "奥迪"; cars2[1] = "宝马"; cars2[2] = "奔驰"; console.log("cars2=" + cars2); console.log("cars2[2]=" + cars2[2]); // 奔驰 console.log("cars2[10]=" + cars2[10]); // 如果该元素不存在，返回的就是 undefined // 数组定义方式3 var cars3 = new Array("Audi", "BMW", "Volvo"); console.log("cars3=" + cars3); console.log("cars3[0]=" + cars3[0]); // Audi // 数组定义方式4 var 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]); // undefined console.log("cars4=" + cars4); </script> </head> <body> </body> </html>
数组的遍历
-
代码示例：
python<!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>
函数
含义
-
函数是由事件驱动的，或者当它被调用时，执行的可重复使用的代码块
-
代码示例：
python<!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 表达式
}//调用 函数名（实参列表）；
#### 代码示例
1.
```python
<!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函数内）
- 隐形参数:在function函数中不需要定义，可以直接用来获取所有参数的变量。
- 隐形参数特别像java的可变参数一样。publicvoidfun(int...args)
- js中的隐形参数跟java的可变参数一样。操作类似数组
-
应用示例：
python<!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) 如果形参个数大于了实参个数，则该形参的值为 undefined function f3(n) { console.log("n=" + n); // 100 console.log("arguments= ", arguments); // [100, 90, 20] } f3(100, 90, 20); </script> </head> <body> </body> </html>
自定义对象
Object形式
-
定义
- var对象名=newObject();//对象实例（空对象）
对象名.属性名=值;//定义一个属性
对象名.函数名=function(){}//定义一个函数
- var对象名=newObject();//对象实例（空对象）
-
对象的访问
- 对象名.属性
- 对象名.函数名()；
-
应用示例：
python<!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 就是 person console.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>
2.
{} 形式
-
定义
var对象名={ 属性名：值,//定义属性
属性名：值,//定义属性,注意有,号
函数名：function(){}//定义函数
};
-
对象访问
- 对象名.属性
- 对象名.函数名（）；
-
代码示例：
python<!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)
介绍
- 事件是电脑输入设备与页面进行交互的响应
- 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行
事件一览表
| 属性 | 当以下情况发生时，出现此事件 |
|-------------|-----------------|
| onabort | 图像加载被中断 |
| onblur | 元素失去焦点 |
| onchange | 用户改变域的内容 |
| onclick | 鼠标点击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onerror | 当加载文档或图像时发生某个错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘的键被按下 |
| onkeypress | 某个键盘的键被按下或按住 |
| onkeyup | 某个键盘的键被松开 |
| onload | 某个页面或图像被完成加载 |
| onmousedown | 某个鼠标按键被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标移到某元素之上 |
| onmouseup | 某个鼠标按键被松开 |
| onreset | 重置按钮被点击 |
| onresize | 窗口或框架被调整尺寸 |
| onselect | 文本被选定 |
| onsubmit | 提交按钮被点击 |
| onunload | 用户退出页面 |
事件分类
### 事件的注册
1. 事件注册(绑定)：当事件响应(触发)后要浏览器执行哪些操作代码，叫事件注册或事件绑定
### 静态注册事件
1. 通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式叫静态注册
### 动态注册事件
1. 通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 =function(){} 这种形 式叫动态注册
1.
###### 动态事件注册的步骤
1. 代码示例：
```python
<!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加载完成事件
1. 代码示例：
```python
<!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单击事件
1. 代码示例：
<!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失去焦点事件
1. 代码示例：
```python
<!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 内容改变事件
1. 代码示例：
```python
<!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事件
1. onsubmit：注册按钮被点击，提交表单
2. 代码示例：
```python
<!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)返回给onsubmit
form2.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)
介绍及其分类
-
dom是全称是文档对象模型，就把文档中的标签，属性，文本转化为对象来管理
-
dom
- html dom（重点）
- css dom
- xml dom
HTML DOM
### 介绍
1. 当网页被加载时，浏览器会创建页面的文档对象模型（DocumentObjectModel）。
2. HTML DOM 树 对象\[属性，方法/函数\]
### document 对象
1.
#### 说明
1. document 它管理了所有的 HTML 文档内容
2. document 它是一种树结构的文档
3. 有层级关系 在dom 中把所有的标签 都 对象化 （得到这个html标签的\<---\>对象--\> 操作）
4. 通过 document 可以访问所有的标签对象
2.
#### 对象方法一览
1. 
2. 代码示例
```python
<!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结点
### 介绍
1.
##### 在 HTMLDOM中，每个部分都是节点：
1. 文档本身是文档节点
2. 所有 HTML 元素是元素节点
3. 所有 HTML 属性是属性节点
4. HTML 元素内的文本是文本节点
5. 注释是注释节点
2.
##### 节点常用方法
1. 通过具体的元素节点调用 getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
2. appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点
3.
##### 节点常用属性
1. childNodes 属性，获取当前节点的所有子节点
2. firstChild 属性，获取当前节点的第一个子节点
3. lastChild 属性，获取当前节点的最后一个子节点
4. parentNode 属性，获取当前节点的父节点
5. nextSibling 属性，获取当前节点的下一个节点 (后一个)
6. previousSibling 属性，获取当前节点的上一个节点 (前一个)
7. className 用于获取或设置标签的 class 属性值
8. innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
9. innerText 属性，表示获取/设置起始标签和结束标签中的文本
4. 代码示例：
```python
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的dom
var 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 HtmlCollection
for (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");//NodeList
for (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 () {
//除了上面的方法外，还可以直接使用属性firstChild
var sel01 = document.getElementById("sel01");
alert("xx=" + sel01.firstChild);//解读是按照 .childNodes 得到第一个子节点 //object text
alert("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);//4
var 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 () {
//yyds
var ct = document.getElementById("ct");
alert(ct.previousSibling.innerText);//object text , 输出 undefined
alert(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课程笔记