JavaScript
二、JavaScript
1、JavaScript介绍
JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。JS是Netscape网景公司的产品，最早取名为LiveScript；为了吸引更多java程序员，更名为JavaScript。
JS是弱类型，Java是强类型。
弱类型就是类型可变。
强类型，就是定义变量的时候，类型已确定，而且不可变。
特点：
- 交互性（它可以做的就是信息的动态交互）
- 安全性（不允许直接访问本地硬盘）
- 跨平台性（只要是可以解析JS的浏览器都可以执行，和平台无关）
2、JavaScript和html代码的结合方式
2.1、第一种方式
只需要在head标签中或者在body标签中，使用script标签来书写JavaScript代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //alert是JavaScript语言提供的一个警告框函数 //它可以接受任意类型的参数，这个参数就是警告框中显示的内容 alert("Hello JavaScript!"); </script> </head> <body> </body> </html>
2.2、第二种方式
使用script标签引入单独的JavaScript代码文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 现在需要使用script标签来引入js文件来执行， src属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径） script标签可以用来定义js代码，也可以用来引入js文件， 但是不能同时使用两种方式，否则会报错。 --> <script type="text/javascript" src="1.js"> </script> <script> alert("现在可以执行了"); </script> </head> <body> </body> </html>
3、变量
什么是变量？变量是可以存放某些值的内存的命名。
JavaScript的变量类型：
数值类型：number
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function
JavaScript里特殊的值：
undefined 未定义，所有js变量未赋于初始值的时候，默认值都是undefined
null 空值
NAN 全称是：Not a Number。非数字。非数值。
JavaScript的定义变量格式：
var 变量名；
var 变量名 = 值；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var i ; //alert(i);//udefined i=12; //typeof()是JavaScript语言提供的一个函数 //它可以取变量的数据类型返回 //alert(typeof (i));//number i="abc"; alert(typeof (i));//string var a = 12; var b = "abc"; alert(a*b);//NaN是非数字，非数值。 </script> </head> <body> </body> </html>
4、关系（比较）运算
等于：== 等于是简单的数字面值的比较
全等于：=== 除了数字面值的比较之外，还好比较两个变量的数据类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script typeof="text/javascript"> // 关系运算 var a = 10; var b="10"; alert(a == b); // true alert(a === b); // false </script> </head> <body> </body> </html>
5、逻辑运算
且运算：&&
或运算：||
取反运算：！
在JavaScript语言中，所有的变量，都可以作为一个boolean类型的变量去使用。
注意：0、null、undefined、""（空串），都认为是false
/* && 且运算 有两种情况： 第一种：当表达式全为真的时候，返回最后一个表达式的值。 第二种：当表达式中，有一个为假的时候，返回第一个为假的表达式的值 || 或运算 第一种情况：当表达式全为假的时候，返回最后一个表达式的值 第二种情况：只要有一个表达式为真。就会把第一个为真的表达式的值返回 并且&& 与运算 和 ||或运算 有短路。 短路就是说，当这个&&或||运算有结果了之后。后面的表达式不再执行 */ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> /*在JavaScript语言中，所有的变量，都可以作为一个boolean类型的变量去使用。 注意：0、null、undefined、""（空串），都认为是false*/ /*var a = 0; if(a){ alert("a是true"); }else { alert("a是false"); } var b = null; if(b){ alert("b是true"); }else { alert("b是false"); } var c = undefined; if(c){ alert("c是true"); }else { alert("c是false"); } var d = ""; if(d){ alert("d是true"); }else { alert("d是false"); }*/ /* && 且运算 有两种情况： 第一种：当表达式全为真的时候，返回最后一个表达式的值。 第二种：当表达式中，有一个为假的时候，返回第一个为假的表达式的值 || 或运算 第一种情况：当表达式全为假的时候，返回最后一个表达式的值 第二种情况：只要有一个表达式为真。就会把第一个为真的表达式的值返回 并且&& 与运算 和 ||或运算 有短路。 短路就是说，当这个&&或||运算有结果了之后。后面的表达式不再执行 */ var a = "abc"; var b = true; var d = false; var c = null; //alert(a && b);//true //alert(b && a);//abc //alert(a && d);//false //alert(a&&c);//null //alert(a&&d&&c);//false //alert(d||c);//null //alert(c||d);//false //alert(a||c);//abc //alert(b||c);//true </script> </head> <body> </body> </html>
6、数组（重点）
6.1、数组定义方式
js中数组的定义：
格式：
var 数组名 = [];//空数组
var 数组名 = [1,'abc',true];//定义数组的同时赋值给元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var arr = [true,1];//定义一个空数组 //alert(arr.length);//0 arr[0] = 12; //alert(arr[0]);//12 //alert(arr.length);//1 //JavaScript数组的长度是可变的， //只要我们通过数组下标赋值，那么最大的下标值， //就会自动给数组做扩容操作 arr[2] = "abc"; //alert(arr.length);//3 //alert(arr[1]);//undefined for (var i = 0; i < arr.length ; i++) { alert(arr[i]); } </script> </head> <body> </body> </html>
7、函数（重点）
7.1、函数的两种定义方式
第一种，可以使用function关键字来定义函数。
使用的格式如下：
function 函数名(形参列表){ 函数体 } 在JavaScript语言中，如何定义带有返回值的函数？ 只需要在函数体内直接使用return语句返回值即可！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //定义一个无参数的函数 function show(){ alert("这是一个无参数的函数"); } //函数调用才会执行 //show(); function show2(a,b){ alert("这是一个有参数的函数，参数a的值是"+a+"，参数b的值是"+b); } //show2(1,2); //定义一个有返回值的函数 function show3(num1,num2){ var sum=num1+num2; return "这是一个有返回值的函数，参数num1的值是"+num1+"，参数num2的值是"+num2+"，返回值是"+sum; } alert(show3(1,2)); </script> </head> <body> </body> </html>
函数的第二种定义方式，格式如下：
使用格式如下： var 函数名 = function(形参列表){ 函数体 }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var fun = function() { alert("无参数函数"); } //fun(); var fun2 = function(a, b) { alert("有参数函数a=" + a + ",b=" + b); } //fun2(1, 2); var fun3 = function(a, b) { return a + b; } //alert(fun3(1, 2)); </script> </head> <body> </body> </html>
注意：在Java中函数允许重载，但是在js中函数的重载会直接覆盖上一次的定义。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function a() { alert("第一次定义a函数"); } function a(a,b) { alert("第二次定义a函数"); } a(); </script> </head> <body> </body> </html>
7.2、函数的arguments隐形参数（只在funtion函数内）
就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量，我们管它叫做隐形参数。
隐形参数特别像java基础的可变长参数一样。
public void fun(Object...args);
可变长参数其实是一个数组。
那么js中的隐形参数也跟java的可变参数一样，操作类似数组。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function fun(){ //alert(arguments.length); /*alert(arguments[0]); alert(arguments[1]); alert(arguments[2]);*/ alert("无参函数fun()") for(var i=0;i<arguments.length;i++){ alert(arguments[i]); } } //fun(1,"a",true); //需求：编写一个函数，用于计算所有参数相加的和并返回。 function sum(num1,num2) { var result = 0; for(var i=0;i<arguments.length;i++){ if(typeof arguments[i] == "number"){ result += arguments[i]; } } return result; } alert(sum(1,2,3,4,"abc",5,6,7,8,9,10)); </script> </head> <body> </body> </html>
8、JS中的自定义对象（扩展内容）
-
Object形式的自定义对象
var 变量名 = new Object(); //对象实例（空对象）
变量名.属性名=值；//定义一个属性
变量名.函数名=function(){}//定义一个函数
对象的访问：
变量名.属性/函数名();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var obj = new Object(); obj.name = "张三"; obj.age = 18; obj.fun = function(){ alert("姓名："+this.name+"\n年龄："+this.age); } //对象的访问 alert(obj.name); obj.fun(); </script> </head> <body> </body> </html> -
{}花括号形式的自定义对象
对象的定义： var 变量名 = { //空对象 属性名：值， //定义一个属性 属性名：值， //定义一个属性 函数名：function(){} //定义一个函数 }； 对象的访问： 变量名.属性/函数名(); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var obj = { name: "张三", age: 18, fun: function () { alert("我的名字是" + this.name + "，我今年" + this.age + "岁了"); } }; alert(obj.name); obj.fun(); </script> </head> <body> </body> </html>
9、js中的事件
什么是事件？事件是电脑输入设备与页面进行交互的响应，我们称之为事件。
常用事件：
- onload加载完成事件； 页面加载完成之后，常用于做页面js代码初始化操作
- onclick单击事件； 常用于按钮的点击响应事件
- onblur失去焦点事件 常用于输入框失去焦点后验证输入内容是否合法
- onchange内容发生改变事件 常用于下拉列表和输入框内容发生改变后操作
- onsubmit表单提交事件； 常用于表单提交前，验证所有表单项是否合法。
事件的注册又分静态注册和动态注册两种：
什么是事件的注册（绑定）？ 其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
静态注册事件：
通过html标签的事件属性直接赋予事件响应后的代码，这种方式就是静态注册
动态注册事件：
指的是先通过js代码得到标签的dom对象，然后再通过dom 对象.事件名 = function(){}这种形式赋予事件响应后的代码，叫动态注册。
动态注册的基本步骤：
- 获取标签对象
- 标签对象.事件名 = function(){}
9.1、onload事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //onload事件的方法 function onloadFun(){ alert('静态注册onload事件,所有代码'); } //onload事件动态注册，是固定的写法 window.onload = function (){ alert('动态注册onload事件,所有代码'); }; </script> </head> <!--静态注册onload事件 onload事件是浏览器解析完页面之后就会自动触发的事件 <body onload="onloadFun()"> --> <body> </body> </html>
9.2、onclick事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function onclickFun() { alert("静态注册onclick事件"); } //动态注册onclick事件 window.onload = function () { //获取标签对象 /* *document是js语言提供的一个对象（文档） * get 获取 * Element 元素（就是标签） * By 通过。。由。。经。。 * Id id属性 */ var btn = document.getElementById("btn01"); //通过标签对象注册onclick事件 //alert(btn); btn.onclick = function () { alert("动态注册onclick事件"); } } </script> </head> <body> <!-- 静态注册click事件 --> <button onclick="onclickFun()">按钮1</button> <button id="btn01">按钮2</button> </body> </html>
9.3、onblur事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //静态注册onblur事件 function onblurFun(){ //console是控制台对象，是由js语言提供，专门用于来向浏览器的控制台打印输出，用于测试使用 //log()是打印的方法 console.log("静态注册onblur事件"); } //动态注册onblur事件 window.onblur = function(){ //获取标签对象 var obj = document.getElementById("password"); //alert(obj); //通过标签对象.事件名 = function(){}来注册事件 obj.onblur = function(){ console.log("动态注册onblur事件"); } } </script> </head> <body> 用户名：<input type="text" id="username" onblur="onblurFun()"><br/> 密码：<input type="password" id="password" ><br/> <button onclick="check()">登录</button> </body> </html>
9.4、onchange事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function onchangeFun() { alert("女神已经改变了！"); } window.onload = function () { var oSelect = document.getElementById("男神"); //alert(oSelect); oSelect.onchange = function () { alert("男神已经改变了！"); } } </script> </head> <body> 请选择你们心中的女神： <!--静态注册onchange事件--> <select onchange="onchangeFun()"> <option>--女神1--</option> <option>--女神2--</option> <option>--女神3--</option> <option>--女神4--</option> <option>--女神5--</option> </select> 请选择你们心中的男神： <!--动态注册onchange事件--> <select id="男神"> <option>--男神1--</option> <option>--男神2--</option> <option>--男神3--</option> <option>--男神4--</option> <option>--男神5--</option> </select> </body> </html>
9.5、onsubmit表单提交事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //静态注册表单提交请求 function onsubmitFun() { //要验证所有表单项是否合法，如果有一个不合法就要阻止表单提交 alert("静态注册表单提交请求----发现不合法"); return false; } window.onload = function () { //获取标签对象 var form = document.getElementById("form01"); //alert(form); //给表单对象添加onsubmit事件 form.onsubmit = function () { //要验证所有表单项是否合法，如果有一个不合法就要阻止表单提交 alert("动态注册表单提交请求----发现不合法"); return false; } } </script> </head> <body> <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()"> <input type="submit" value="静态提交"/> </form> <form action="http://localhost:8080" id="form01" method="get"> <input type="submit" value="动态提交"/> </form> </body> </html>
10、DOM模型
DOM全称是Document Object Model 文档对象模型
大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。
那么它们是如何实现把标签，属性，文本转换成为对象来管理的呢？这就是下面学习的重点。
10.1、Document对象（重点）
Document对象的理解：
- Document它管理了所有的HTML文档内容。
- Document它是一种树结构的文档，有层级关系。
- 它让我们把所有的标签 都 对象化
- 我们可以通过Document访问所有的标签对象
什么是对象化？ 举例： 有一个人年龄18岁，性别女，名字小李 我们要把这个人的信息对象化怎么办？ class Person{ private int age; private String sex; private String name; }
<!--那么html标签要对象化怎么办--> <body> <div id="div01">div01</div> </body>
模拟对象化。相当于： class Dom{ private String id;//id属性 private String tagName;//表示标签名 private Dom parentNode;//父亲 private List<Dom>children;//孩子结点 private String innerHTML;//起始标签和结束标签中间的内容 }
10.2、Document对象中的方法介绍（重点）
document.getElementById(elementId)
通过标签的id属性查找标签dom对象，elementId是标签的id属性值
document.getElementsByName(elementName)
通过标签的name属性查找标签dom对象，elementName是标签的name属性值
document.getElementsByTagName(tagName)
通过标签名查找标签dom对象，tagName是标签名
document.createElement(tagName)
方法，通过给定的标签名，创建一个标签对象，tagName是要创建的标签名
getElementById方法示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> /** * 需求：当用户点击了校验按钮，要获取输出框中的内容，然后做验证其是否合法。<br/> * 验证的规则是：必须由字母，数字，下划线组成，且长度不能小于6位，不能大于20位。<br/> */ function onclickFun(){ //1.当我们要操作一个标签的时候，我们需要先获取标签的对象。 var usernameObj=document.getElementById("username"); //alert(usernameObj); //[object HTMLInputElement]它就是dom对象 //alert(usernameObj.type); //alert(usernameObj.value);//value值是用户输入的内容 var usernameText=usernameObj.value; //2.验证用户输入的内容是否合法。 //需要用到正则表达式 var reg=/^\w{6,20}$/; /* * test()方法：用于测试一个字符串是否匹配我的规则 * 匹配就返回true，不匹配就返回false。 */ if(reg.test(usernameText)){ alert("用户名合法！"); }else{ alert("用户名不合法！"); } } </script> </head> <body> 用户名：<input type="text" id="username" value="aaa"> <button onclick="onclickFun()">校验</button> </body> </html>
getElementsByName方法示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //全选 function checkAll(){ //让所有复选框都选中 //document.getElementsByName();是根据指定的name属性值查询返回多个标签对象集合 //这个集合的操作跟数组一样 //集合中每一个元素都是dom对象 var hobbies = document.getElementsByName("hobby"); //alert(habbies[2].value); //checked表示是否选中，如果选中，则为true，否则为false //这个属性是读，可写的 for(var i=0;i<hobbies.length;i++){ hobbies[i].checked = true; } } //全不选 function checkNo(){ var hobbies = document.getElementsByName("hobby"); for(var i=0;i<hobbies.length;i++){ hobbies[i].checked = false; } } //反选 function checkReverse(){ var hobbies = document.getElementsByName("hobby"); for(var i=0;i<hobbies.length;i++){ hobbies[i].checked = !hobbies[i].checked; } } </script> </head> <body> 兴趣爱好： <input type="checkbox" name="hobby" value="cpp">C++ <input type="checkbox" name="hobby" value="java">Java <input type="checkbox" name="hobby" value="js">JavaScript <br/> <button onclick="checkAll()">全选</button> <button onclick="checkNo()">全不选</button> <button onclick="checkReverse()">反选</button> </body> </html>
getElementByTagName：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //全选 function checkAll() { //document.getElementsByTagName("input")返回一个数组 //这个集合的操作方法和数组的操作方法一样 //集合中都是dom对象 //集合中元素顺序 是他们在页面中从上到下的顺序 var inputs = document.getElementsByTagName("input"); for(var i = 0; i < inputs.length; i++) { inputs[i].checked = true; } } </script> </head> <body> 兴趣爱好： <input type="checkbox" value="cpp">C++ <input type="checkbox" value="java">Java <input type="checkbox" value="js">JavaScript <br/> <button onclick="checkAll()">全选</button> </body> </html>
注意： document对象的三个查询方法，如果有id属性优先使用getElementId方法来进行查询，如果没有id属性，则优先使用getElementsByName方法来进行查询，如果id属性和name属性都没有，最后再按标签名查getElementsByTagName 以上三个方法，代码一定要在页面加载完成之后执行，才能查询到标签对象
10.3、正则表达式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //表示字符串中是否包含e // var patt = new RegExp("e"); //var patt = /e/;//更简单的写法 //var patt = /[abcd]/;//匹配a或b或c或d //var patt = /[a-z]/;//匹配a-z的任意一个字符 //var patt = /[A-Z]/;//匹配A-Z的任意一个字符 //var patt = /[0-9]/;//匹配0-9的任意一个字符 //var patt = /\w/;//匹配任意一个字符，包括字母、数字、下划线 //var patt = /\W/;//匹配任意一个非字母、数字、下划线的字符 //var patt = /a+/;//匹配a的至少一次 //var patt = /a*/;//匹配a的0次或者多次 //var patt = /a?/;//匹配a的0次或者1次 //var patt = /a{2}/;//匹配a连续2次 //var patt = /a{2,4}/;//匹配a连续2-4次 //var patt = /[^a-z]/;//匹配除a-z以外的任意一个字符 //var patt = /a{2,}/;//匹配a连续2次以上 //var patt = /a$/;//匹配a的最后一个字符 //var patt = /^a/;//匹配a的第一个字符 //alert(patt); var patt = /\w{6,20}/; var str = "bbaaaaa"; alert(patt.test(str)); //问题：var patt = /a{2,4}/;//最多什么时候有用？ //var patt = /^a{2,4}$/; </script> </head> <body> </body> </html>
10.4、两种常见的验证提示效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> /** * 需求：当用户点击了校验按钮，要获取输出框中的内容，然后做验证其是否合法。<br/> * 验证的规则是：必须由字母，数字，下划线组成，且长度不能小于6位，不能大于20位。<br/> */ function onclickFun(){ //1.当我们要操作一个标签的时候，我们需要先获取标签的对象。 var usernameObj=document.getElementById("username"); //alert(usernameObj); //[object HTMLInputElement]它就是dom对象 //alert(usernameObj.type); //alert(usernameObj.value);//value值是用户输入的内容 var usernameText=usernameObj.value; //2.验证用户输入的内容是否合法。 //需要用到正则表达式 var reg=/^\w{6,20}$/; /* * test()方法：用于测试一个字符串是否匹配我的规则 * 匹配就返回true，不匹配就返回false。 */ var usernameSpanObj = document.getElementById("usernameSpan"); //innerHTML起始标签和结束标签之间的内容 //这个属性可读可写 //alert(usernameSpanObj.innerHTML); usernameSpanObj.innerHTML="666"; if(reg.test(usernameText)){ //alert("用户名合法！"); //usernameSpanObj.innerHTML="*用户名合法！"; usernameSpanObj.innerHTML="<img src=\"right.png\" width=\"15px\" height=\"15px\">" }else{ //alert("用户名不合法！"); //usernameSpanObj.innerHTML="*用户名不合法！"; usernameSpanObj.innerHTML="<img src=\"wrong.png\" width=\"15px\" height=\"15px\">" } } </script> </head> <body> 用户名：<input type="text" id="username" value="aaa"> <span id="usernameSpan" style="color: red;"> </span><br/> <button onclick="onclickFun()">校验</button> </body> </html>
10.5、节点的常用属性和方法
节点就是标签对象
方法：
- 通过具体的元素节点调用getElementsByTagName()方法，获取当前节点的指定标签名孩子节点
- appendChild(oChildNode)方法，可以添加啊一个子节点，oChildNode是要添加的孩子节点。
注意：
文本也是一个节点。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> window.onload = function () { //现在需要我们使用js代码来创建html标签，并显示在页面上 //标签的内容就是：<div>666真厉害</div> var divObj=document.createElement("div");//在内存中，<div></div> var textNodeObj = document.createTextNode("666真厉害");//有一个文本节点 divObj.appendChild(textNodeObj);//将文本节点添加到标签中 //divObj.innerHTML="666真厉害";//在内存中，<div>666真厉害</div> //添加子节点 document.body.appendChild(divObj);//将divObj添加到body中 } </script> </head> <body> </body> </html>
属性：
childNodes属性，获取当前节点的所有子节点。
firstChild属性，获取当前节点的第一个子节点。
lastChild属性，获取当前节点的最后一个子节点。
parentNode属性，获取当前节点的父节点。
nextSibling属性，获取当前节点的下一个节点。
previousSibling属性，获取当前节点的是一个节点。
className属性，用于获取或设置标签的class属性值。
innerHTML属性，表示获取/设置起始标签和结束标签之间的内容。
innerText属性，表示获取/设置起始标签和结束标签之间的文本。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>dom查询</title> <link rel="stylesheet" type="text/css" href="style/css.css" /> <script type="text/javascript"> window.onload = function(){ //1.查找#bj节点 var btn01Ele= document.getElementById("btn01"); btn01Ele.onclick = function(){ var bjObj=document.getElementById("bj"); alert(bjObj.innerHTML); } //2.查找所有li节点 var btn02Ele = document.getElementById("btn02"); btn02Ele.onclick = function(){ var lis=document.getElementsByTagName("li"); alert(lis.length); }; //3.查找name=gender的所有节点 var btn03Ele = document.getElementById("btn03"); btn03Ele.onclick = function(){ var genders=document.getElementsByName("gender"); alert(genders.length); }; //4.查找#city下所有li节点 var btn04Ele = document.getElementById("btn04"); btn04Ele.onclick = function(){ //第一获取id为city的节点 //第二通过city节点，getElementsByTagName获取所有的li节点 var cityObj=document.getElementById("city"); var lis=cityObj.getElementsByTagName("li"); alert(lis.length); }; //5.返回#city的所有子节点 var btn05Ele = document.getElementById("btn05"); btn05Ele.onclick = function(){ var cityObj=document.getElementById("city"); var lis=cityObj.childNodes; alert(lis.length); }; //6.返回#phone的第一个子节点 var btn06Ele = document.getElementById("btn06"); btn06Ele.onclick = function(){ var phoneObj=document.getElementById("phone"); var firstChild=phoneObj.firstChild; alert(firstChild.innerHTML); }; //7.返回#bj的父节点 var btn07Ele = document.getElementById("btn07"); btn07Ele.onclick = function(){ var bjObj=document.getElementById("bj"); var parentNode=bjObj.parentNode; alert(parentNode.innerHTML); }; //8.返回#android的前一个兄弟节点 var btn08Ele = document.getElementById("btn08"); btn08Ele.onclick = function(){ var androidObj=document.getElementById("android"); var previousSibling=androidObj.previousSibling; alert(previousSibling.innerHTML); }; //9.读取#username的value属性值 var btn09Ele = document.getElementById("btn09"); btn09Ele.onclick = function(){ var usernameObj=document.getElementById("username"); var value=usernameObj.value; alert(value); }; //10.设置#username的value属性值 var btn10Ele = document.getElementById("btn10"); btn10Ele.onclick = function(){ var usernameObj=document.getElementById("username"); usernameObj.value="小明"; }; //11.返回#bj的文本值 var btn11Ele = document.getElementById("btn11"); btn11Ele.onclick = function(){ var bjObj=document.getElementById("bj"); //var text=bjObj.innerHTML; var text=bjObj.innerText; alert(text); }; }; </script> </head> <body> <div id="total"> <div class="inner"> <p> 你喜欢哪个城市? </p> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br> <br> <p> 你喜欢哪款单机游戏? </p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br /> <br /> <p> 你手机的操作系统是? </p> <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul> </div> <div class="inner"> gender: <input type="radio" name="gender" value="male"/> Male <input type="radio" name="gender" value="female"/> Female <br> <br> name: <input type="text" name="name" id="username" value="abcde"/> </div> </div> <div id="btnList"> <div><button id="btn01">查找#bj节点</button></div> <div><button id="btn02">查找所有li节点</button></div> <div><button id="btn03">查找name=gender的所有节点</button></div> <div><button id="btn04">查找#city下所有li节点</button></div> <div><button id="btn05">返回#city的所有子节点</button></div> <div><button id="btn06">返回#phone的第一个子节点</button></div> <div><button id="btn07">返回#bj的父节点</button></div> <div><button id="btn08">返回#android的前一个兄弟节点</button></div> <div><button id="btn09">返回#username的value属性值</button></div> <div><button id="btn10">设置#username的value属性值</button></div> <div><button id="btn11">返回#bj的文本值</button></div> </div> </body> </html>
本文作者：_xiaolin
本文链接：https://www.cnblogs.com/SilverStar/p/17415180.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步