文章目录
- JavaScript
- 基本说明
- 特点
- 两种使用方式
- 在script中写
- 使用script标签引入JS文件
- 数据类型
- 介绍
- 特殊值
- 运算符
- 算数运算符
- 赋值运算符
- 逻辑运算符：
- 条件运算符
- 数组的定义
- 基本使用
- 数组的遍历
- 函数
- 含义
- 函数定义方式
- 基本语法
- 代码示例
- 细节和注意事项
- 自定义对象
- 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 嵌入 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
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>
-
数据类型
-
介绍
- 数值类型 number
- 字符串类型 string
- 对象类型 object
- 布尔类型 boolean
- 函数类型 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"; // 数组定义方式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>
-
-
-
数组的遍历
-
代码示例：
<!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>
-
-
-
函数定义方式
-
基本语法
-
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函数内）
- 隐形参数:在function函数中不需要定义，可以直接用来获取所有参数的变量。
- 隐形参数特别像java的可变参数一样。publicvoidfun(int…args)
- 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) 如果形参个数大于了实参个数，则该形参的值为 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();//对象实例（空对象）
-
对象的访问
- 对象名.属性
- 对象名.函数名()；
-
应用示例：
<!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>
-
-
{} 形式
-
定义
var对象名={ 属性名：值,//定义属性
属性名：值,//定义属性,注意有,号
函数名：function(){}//定义函数
}; -
对象访问
- 对象名.属性
- 对象名.函数名（）；
-
代码示例：
<!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 用户退出页面
-
-
事件分类
-
事件的注册
- 事件注册(绑定)：当事件响应(触发)后要浏览器执行哪些操作代码，叫事件注册或事件绑定
-
静态注册事件
- 通过 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)返回给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
-
介绍
- 当网页被加载时，浏览器会创建页面的文档对象模型（DocumentObjectModel）。
- HTML DOM 树 对象[属性，方法/函数]
-
document 对象
-
说明
- document 它管理了所有的 HTML 文档内容
- document 它是一种树结构的文档
- 有层级关系 在dom 中把所有的标签 都 对象化 （得到这个html标签的<—>对象–> 操作）
- 通过 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中，每个部分都是节点：
- 文档本身是文档节点
- 所有 HTML 元素是元素节点
- 所有 HTML 属性是属性节点
- HTML 元素内的文本是文本节点
- 注释是注释节点
-
节点常用方法
- 通过具体的元素节点调用 getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
- appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点
-
节点常用属性
- childNodes 属性，获取当前节点的所有子节点
- firstChild 属性，获取当前节点的第一个子节点
- lastChild 属性，获取当前节点的最后一个子节点
- parentNode 属性，获取当前节点的父节点
- nextSibling 属性，获取当前节点的下一个节点 (后一个)
- previousSibling 属性，获取当前节点的上一个节点 (前一个)
- className 用于获取或设置标签的 class 属性值
- innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
- 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的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课程笔记
