Javaweb开发了解前端知识二、JavaScript

JavaWeb开发入门 JavaWeb开发入门,目录:JavaScript,XML解析器,JavaWeb开发入门,Http协议,Servlet技术,请求和响应,Cookie和Session,MySQL数据库,用JDBC操作数据库,JDBC之数据库连接池,JDBC之事务,上传下载文件,酷炫的文件上传技术,JavaMail邮件 阅读详情

1、JavaScript介绍

2、JavaScript和html代码的结合方式

2.1、第一种方式

2.2、第二种方式

3、变量

3.1、关系(比较)运算

3.2、逻辑运算

4、数组

4.1、数组定义方式

5、函数

5.1、函数的二种定义方式

5.2、函数的 arguments 隐形参数(只在function函数内)

6、JS中的自定义对象 

6.1、Object形式的自定义对象

6.2、{}花括号形式的自定义对象

7、js中的事件

8、DOM 模型

8.1、Document对象

8.2、Document对象中的方法介绍

8.3、节点的常用属性和方法

1、JavaScript介绍

Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行JavaScript代码。

JS是Netscape网景公司的产品,最早取名为LiveScript;为了吸引更多java程序员。更名为javascript。

JS是弱类型,Java是强类型。

其特点:

1. 交互性(它可以做的就是信息的动态交互)

2. 安全性(不允许直接访问本地硬盘)

3. 跨平台性(只要是可以解释Js的浏览器都可以执行,和平台无关)

2、JavaScript和html代码的结合方式

2.1、第一种方式

只需要在head 标签中,或者在body标签中, 使用script 标签 来书写JavaScript代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			// alert是js的警告框函数
			// 你给它传什么,它就给你弹出什么信息
			alert("帅!");
		</script>
	</head>
	<body>
	</body>
</html>

2.2、第二种方式

使用Script 标签引入 单独的JavaScript代码文件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<!-- script 标签 可以用来定义js代码,
			 script 标签 还可以用来引入单独的js文件
			 	src 属性,设置需要引入的js文件的路径
		 -->
		<script type="text/javascript" src="1.js"></script>
	</head>
	<body>
	</body>
</html>

3、变量

什么是变量?变量是可以存放某些值的内存的命名。

javaScript的变量类型:

数值类型: number

字符串类型: string

对象类型: object

布尔类型: boolean

函数类型: function

javascript里特殊的值:

undefined未定义所有js的变量,在赋未初始化的时候。默认值都是undefined。

        null 表示空值。

        NAN   not a number 非数字,非数值。

JS中的定义变量格式:

var 变量名;

var 变量名 = 值;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			var i;
// 			alert(i);// undefined;
			i = 12;
// 			alert( i );// 12
// 			alert( typeof(i) );//number
			i = "abc";
			alert( typeof(i) );//string
			
			var a = 12;
			var b = "asdf";
			
			var c = a - b;
			alert(c);//NAN  
		</script>
	</head>
	<body>
	</body>
</html>

3.1、关系(比较)运算

等于: ==只是简单的做字面值的比较

全等于: ===除了做字面值的比较之外,还会检查两个数字的类型

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			var i = 12;
			var b = "12";
			//在js中的等于比较。只是简单的做字面值的比较
// 			alert( i == b );	//true
			// 全等于 除了做字面值的比较之外,还会检查两个数字的类型
			alert( i === b );	//false
		</script>
	</head>
	<body>
	</body>
</html>

3.2、逻辑运算

且运算: &&

或运算: ||

取反运算: !

0 、null、 undefined、””(空串) 都认为是 false;

&& 与运算。

有两种情况:

第一种:当表达式全为真的时候。返回最后一个表达式的值。

第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值

|| 或运算

第一种情况:当表达式全为假时,返回最后一个表达式的值

第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值

并且 && 与运算  和 ||或运算 有短路。

短路就是说,当这个&&或||运算有结果了之后 。后面的表达式不再执行

<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
// 		0 、null、 undefined、””(空串) 都认为是 false;
// 		var i = 0;
// 		if (i) {
// 			alert("零为真");
// 		} else {
// 			alert("零为假");
// 		}
// 		var b = null;
// 		if (b) {
// 			alert("null为真");
// 		} else {
// 			alert("null为假");
// 		}
// 		var a = undefined;
// 		if (a) {
// 			alert("undefined为真");
// 		} else {
// 			alert("undefined为假");
// 		}
// 		var c = "";
// 		if (c) {
// 			alert("空串为真");
// 		} else {
// 			alert("空串为假");
// 		}

		var a = "abc";
		var b = true;
		var d = false;
		var c = null;
// 		&& 与运算。
// 		有两种情况:
// 		第一种:当表达式全为真的时候。返回最后一个表达式的值。
// 		alert( b && a ); // abc
// 		alert( a && b ); // true
// 		第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值
// 		alert( c && b ); // null
// 		alert( b && d ); // false

// 		|| 或运算
// 		第一种情况:当表达式全为假时,返回最后一个表达式的值
// 		alert( d || c ); // null
// 		第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值
// 		alert( a || c ); // abc
		</script>
	</head>

4、数组

4.1、数组定义方式

Js 中 数组的定义:

格式:

var 数组名 = []; // 定义一个空的数组

var 数组名 = [12,”abc”,true]; // 定义数组的同时做初始化

	<script type="text/javascript">
			var arr = [];//定义一个空数组
// 			alert(arr.length); // 0
			
			arr[0] = 12;
// 			alert( arr[0] ); // 12
// 			alert( arr.length );//1
			// 在js的数组中,只要我们通过元素的下标给数组赋值,js就可以根据赋值的最大下标自动的做扩容操作。
			arr[2] = "abc";
// 			alert( arr[2] ); // abc
// 			alert( arr[1] ); // undefined
// 			alert( arr.length );//3
			
// 			for (var i = 0; i < arr.length; i++) {
// 				alert(arr[i]);
// 			}
			
			var arr2 = [12,"监考官!",true];
// 			alert(arr2.length);
			
			arr2[9] = 12;
			alert( arr2.length );
		</script>

5.1、函数的二种定义方式

在js中定义一个函数的第一种方法,使用function关键字进行定义。

function 函数名(参数列表){

函数体

}

函数的调用:函数名( 参数 );

如何定义一个带有返回值的函数。只需要在函数体内直接使用return语句返回需要的值即可。

<script type="text/javascript">
			// 定义一个无参函数
			function fun1(){
				alert("fun1无参函数被调用了");				
			}
			// 调用函数
// 			fun1();
// 			定义一个有参函数
			function fun2(a , b){
				alert("有参函数fun2被调用了 a->" + a + ",b->" + b);
			}
// 			fun2(12,"abc");
			
			function fun3(num1,num2){
				var sum = num1 + num2;
				return sum;
			} 
			var result = fun3(100,200);
			alert(result);
		</script>

函数的第二种定义方式:

var 变量名(函数名) = function(参数列表){

函数体

}

	<script type="text/javascript">
			
……			var fun = function(){
				alert("无参函数被调用了!");
			};
			
// 			fun();
			
			var sum = function(num1,num2){
				return num1+num2;
			}
			
			alert( sum(100,150) );
			
		</script>

注:在Java中函数允许重载。但是在Js中函数的重载会直接覆盖掉上一次的定义

<script type="text/javascript">
			function fun(){
				alert("这是fun无参函数");
			}
// 			注:在Java中函数允许重载。但是在Js中函数的重载会直接覆盖掉上一次的定义
			function fun(num1,num2){
				alert(num1);
				alert("这是fun有参函数");
			}
			fun();
		</script>

5.2、函数的 arguments 隐形参数(只在function函数内)

arguments 它跟java中的可变长参数非常接近。

操作arguments 也跟操作数组一样。

它也是用来接收传递的参数值。

<script type="text/javascript">
// 			function fun(num1,num2){
// // 				alert(num1);
// // 				alert(num2);
// 				 // 取得参数的数量
// // 				alert( arguments.length );
// // 				alert( arguments[0] );
// // 				alert( arguments[1] );
// // 				alert( arguments[2] );
// // 				alert( arguments[3] );
// 			}
			
// 			fun(12,24,"abc",true);

//			:需要一个函数。这个函数可以计算所有传递进来的参数相加的和,并返回。
				function sum(){
					var result = 0;
					for (var i = 0; i < arguments.length; i++ ) {
						if ( typeof(arguments[i]) == "number" ){
							result += arguments[i];
						}
					}
					return result;
				}
				alert( sum(100,"abc",200,300) );
		</script>

Typeof()判断数据类型

6、JS中的自定义对象 

6.1、Object形式的自定义对象

var 变量名 = new Object(); // 创建一个空的对象实例

变量名.属性名 = 值; // 给对象实例添加一个属性。

变量名.函数名 = function(){} // 给对象实例添加一个方法。

如何访问对象:

变量名.属性名/方法名();

<script type="text/javascript">
// 		Object形式的自定义对象
// 			var 变量名 = new Object();		// 创建一个空的对象实例
// 			变量名.属性名 = 值;			// 给对象实例添加一个属性。
// 			变量名.函数名 = function(){}	// 给对象实例添加一个方法。
			var obj = new Object();
			obj.name = "华仔";
			obj.age = 18;
			obj.fun = function(){
				alert("姓名:" + this.name + ",年龄:" + this.age);
			}
// 		如何访问对象:
// 			变量名.属性名/方法名();
// 			alert( obj.name );
			obj.fun();
		</script>

6.2、{}花括号形式的自定义对象

var 变量名 = { 定义一个空对象。

属性名:值, 给对象实例添加一个属性

函数名:function(){} 给对象实例添加一个方法

};

如何访问对象:

变量名.属性名/方法名();

	<script type="text/javascript">
// 		{}花括号形式的自定义对象
// 			var 变量名 = {			定义一个空对象。
// 				属性名:值,			给对象实例添加一个属性
// 				函数名:function(){}		给对象实例添加一个方法
// 			};		
			var obj = {
					name : "木木很帅!",
					age : 18,
					fun : function(){
						alert("姓名:" + this.name + ",年龄:" + this.age);
					}
			};

// 		如何访问对象:
// 			变量名.属性名/方法名();
			alert(obj.name);
			obj.fun();
		</script>

7、js中的事件

什么是事件?事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件:

onload加载完成事件 常用于页面加载完成之后做一些功能。

onclick单击事件 常用于用户点击的时候触发功能

onblur失去焦点事件 常用于失去焦点的时候触发的功能

onchange内容发生改变事件 常用于下拉列表,和文本输入框内容发生改变。

onsubmit表单提交事件 常用于表单提交事件的时候。做一些表单验证工作

 

事件的注册又分为静态注册和动态注册两种:

静态注册事件:通过标签的事件属性上。直接赋于事件响应后的js代码。这种方式我们称之为静态注册。

动态注册事件:指的是先通过js代码查找到标签对象。然后通过标签对象.事件名=function(){} (变量名.函数名 = function(){} // 给对象实例添加一个方法。)这种形式,我们称之为动态注册。

window.onload = function(){ //页面加载完成之后

1、查找标签对象

2、通过标签对象.事件名 = function(){}

}

onload事件示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			function onloadFun(){
				alert("这是静态注册的onload事件");
			}
			// 这是动态注册onload事件的写法
			window.onload = function(){
				alert("这是动态注册的onload事件");
			}
		</script>
	</head>
	<!-- onload静态注册
		onload是在浏览器内核解析完页面标签,并加载数据完成之后。自动调用。
	<body onload="onloadFun();">
	 -->
	 <body>
	</body>
</html>

onclick事件示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			function onclickFun(){
				alert("onclick静态注册");
			}
			
			// 动态绑定第二个按钮的单击事件
			window.onload = function(){
// 				1、查找标签对象
				// .getElementById("");	通过id属性获取标签对象
				// get 获取
				// Element 元素,就是标签
				// by 是由 .. 经过,,, 通过
				// id	表示id属性
				var btnObj = document.getElementById("btn01");
// 				alert(btnObj);
// 				2、通过标签对象.事件名 = function(){}
				btnObj.onclick = function(){
					alert("这是动态注册onclick");
				}
			}
		</script>
	</head>
	<body>
		<!-- 静态注册onclick -->
		<button onclick="onclickFun()">按钮1(静态)</button>
		<button id="btn01">按钮2(动态)</button>
	</body>
</html>

onblur事件示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			function onblurFun(){
				// js 提供了一个专门用来调试输出的对象console
				// log 是输出的方法--它可以输出任意数据
				console.log("静态注册的onblur事件");
			}
			//动态注册
			window.onload = function(){
				//1 获取标签对象
				var passObj = document.getElementById("pass");
// 				alert( passObj );
				//2 通过标签对象.事件名 = function(){}
				passObj.onblur = function(){
					console.log("动态注册的onblur事件");
				}
			}
			
		</script>
	</head>
	<body>
		<!-- 静态注册onblur事件 -->
		用户名:<input type="text" onblur="onblurFun()"/><br/>
		密码:<input id="pass" type="password" /><br/>
	</body>
</html>

onchange事件示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			function onchangeFun(){
				alert("静态注册onchange事件");
			}
			
			window.onload = function(){
				//1 获取标签
				var selObj = document.getElementById("sel01");
// 				alert(selObj);
				//2 通过标签对象.事件名 = function(){}
				selObj.onchange = function(){
					alert("动态注册onchange事件");
				}
			}
			
		</script>
	</head>
	<body>
		请选择你心中的女神:
		<select onchange="onchangeFun()">
			<option>老师</option>
			<option>小老师</option>
			<option>宁姐</option>
			<option>飞哥</option>
		</select><br/>
		请选择你心中的男神:
		<select id="sel01">
			<option>华仔</option>
			<option>陈道明</option>
			<option>天哥</option>
			<option>厄尔哥</option>
			<option>和哥</option>
		</select>
	</body>
</html>

onsubmit事件示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			function onsubmitFun(){
				alert("验证表单项是否合法");
				alert("发现不合法的表单项--阻止提交");
				
				return false;
			}
			// 动态注册
			window.onload = function(){
				// 获取标签对象
				var formObj = document.getElementById("form01");
// 				alert(formObj);
				// 通过标签对象.事件名=function(){}
				formObj.onsubmit = function(){
					alert("动态注册");
					alert("验证表单项,发现不合法,阻止 提交");
					return false;
				}
			}
			
		</script>
	</head>
	<body>
		<!-- 静态注册onsubmit事件
				onsubmit事件常用于验证表单项是否合法。如果有一个不合法,就要阻止表单提交。提醒用户哪里不合法
				如果需要阻止表单提交。只需要在标签上使用return返回false
				静态注册return不能省,动态可以省略
		 -->
		<form action="http://www.baidu.com" onsubmit="return onsubmitFun();">
			<input type="submit" value="静态onsubmit" />
		</form>
		<form action="http://www.baidu.com" id="form01">
			<input type="submit" value="动态onsubmit" />
		</form>
	</body>
</html>

8、DOM 模型

DOM 全称是Document Object Model 文档对象模型

大白话,就是把html(xml)文档中的标签,属性,文本,转换成为对象来管理。

那么 它们是如何实现把标签,属性,文本转换成为对象来管理呢

8.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; // 起始标签和结束标签中间的内容

}

8.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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			// 需求,当用户点击【验证】按钮之后。验证用户名输入框中的内容是否合法。
			// 验证规则是,用户名必须由数字。字母,下划线组成,并且长度是5-12位。
			window.onload = function(){
				//1 获取按钮的标签对象
				var btnObj = document.getElementById("btn01");
				//2 通过标签对象.onclick=function(){}
				btnObj.onclick = function(){
					//1 获取用户名输入框中的内容--当我们想操作某个标签的时候,一定要先获取到这个标签对象。
					var usernameObj = document.getElementById("username");
					var usenrameTextValue = usernameObj.value;
					//2 验证是用户名是否合法。---用户名必须由数字。字母,下划线组成,并且长度是5-12位
					// 如果要验证这个规则,就必须要使用正则表达式去验证
					var patt = /^\w{5,12}$/;
					// test方法就是专门用来验证字符串是否匹配正则表达式
					// 匹配就返回true
					// 不匹配就返回false
					var spanObj = document.getElementById("usernameSpan");
					// .innerHTML 表示起始标签和结束标签中的内容
					// 它可读可写*********
					if (patt.test(usenrameTextValue)) {
					//3 提示用户验证的结果。
						spanObj.innerHTML = "<img alt=\"\" src='right.png' width='20' height='20'/>";
					} else {
// 						spanObj.innerHTML = "用户名不合法!";
						spanObj.innerHTML = "<img alt=\"\" src='wrong.png' width='20' height='20'/>";
					}
				}
			}
		</script>
	</head>
	<body>
		用户名:<input id="username" type="text" name="username" value="1234"/> 
		<span id="usernameSpan">
		</span>
		<button id="btn01">验证</button>
	</body>
</html>


getElementsByName方法示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			//全选
			function checkAll(){
				// getElementsByName是通过name属性进行查找
				// 返回的是对象集合
				// 这个集合的操作跟数组一样
				// 这个集合中的元素顺序,是这些标签在html页面中,从上到下的顺序
				var hobbyObjs = document.getElementsByName("hobby");
				// 元素个数
				// 复选框标签对象checked属性表示选中的状态
				for (var i = 0; i < hobbyObjs.length; i++) {
					hobbyObjs[i].checked = true;
				}
			}
			//全不选
			function checkNo(){
				var hobbyObjs = document.getElementsByName("hobby");
				// 元素个数
				// 复选框标签对象checked属性表示选中的状态
				for (var i = 0; i < hobbyObjs.length; i++) {
					hobbyObjs[i].checked = false;
				}
			}
			// 反选
			function checkReverse(){
				// 先获取全部的标签对象
				var hobbyObjs = document.getElementsByName("hobby");
				for (var i = 0; i < hobbyObjs.length; i++) {
				// 遍历判断原来的状态,如果是true,设置false
					if (hobbyObjs[i].checked) {
						hobbyObjs[i].checked = false;
					} else {
						// 如果是false,设置true
						hobbyObjs[i].checked = true;
					}
				}
			}
		</script>
	</head>
	<body>
		兴趣爱好:
		<input name="hobby" type="checkbox" value="cpp" checked="checked"/>c++
		<input name="hobby" type="checkbox" value="java"/>java
		<input name="hobby" type="checkbox" value="js"/>js
		<br/>
		<button onclick="checkAll()">全选</button>
		<button onclick="checkNo()">全不选</button>
		<button onclick="checkReverse()">反选</button>
	</body>
</html>


getElementsByTagName方法示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			//全选
			function checkAll(){
				// getElementsByTagName 是根据标签名进行查找
				var inputObjs = document.getElementsByTagName("input");
				// 遍历设置每一个标签对象的checked属性,让复选框为选中状态
				for (var i = 0; i < inputObjs.length; i++) {
					inputObjs[i].checked = true;
				}
			}
		</script>
	</head>
	<body>
		兴趣爱好:
		<input type="checkbox" value="cpp" checked="checked"/>c++
		<input type="checkbox" value="java"/>java
		<input type="checkbox" value="js"/>js
		<br/>
		<button onclick="checkAll()">全选</button>
	</body>
</html>


的使用顺序 是先使用id查找。如果没有id的情况下,优化使用name进行查找。

如果id,和name属性都没有,最后使用标签名查找。

8.3、节点的常用属性和方法

节点 = 标签对象

方法:

通过具体的元素节点调用

getElementsByTagName()

方法,获取当前节点的指定标签名孩子节点

appendChild( oChildNode )

方法,可以添加一个子节点,oChildNode是要添加的孩子节点

属性:

childNodes

属性,获取当前节点的所有子节点

firstChild

属性,获取当前节点的第一个子节点

lastChild

属性,获取当前节点的最后一个子节点

parentNode

属性,获取当前节点的父节点

nextSibling

属性,获取当前节点的下一个节点

previousSibling

属性,获取当前节点的上一个节点

className

用于获取或设置标签的class属性值

innerHTML

属性,表示获取/设置起始标签和结束标签中的内容

innerText

属性,表示获取、设置起始标签和结束标签中的文本

DOM查询示例

<!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节点
		document.getElementById("btn01").onclick = function(){
			alert( document.getElementById("bj").innerHTML );
		};
		
		//2.查找所有li节点
		var btn02Ele = document.getElementById("btn02");
		btn02Ele.onclick = function(){
			var liObjs = document.getElementsByTagName("li");
			alert( liObjs.length );
		};
		//3.查找name=gender的所有节点
		var btn03Ele = document.getElementById("btn03");
		btn03Ele.onclick = function(){
			var inputObjs = document.getElementsByName("gender");
			alert( inputObjs.length );
		};
		//4.查找#city下所有li节点
		var btn04Ele = document.getElementById("btn04");
		btn04Ele.onclick = function(){
			//1先查找city节点
			var cityObj = document.getElementById("city");
			//2通过city.getElementsByTagName()
			var lis = cityObj.getElementsByTagName("li");
			alert(lis.length);
		};
		//5.返回#city的所有子节点
		var btn05Ele = document.getElementById("btn05");
		btn05Ele.onclick = function(){
			//1先查找city
			var cityObj = document.getElementById("city");
			//2通过city对象.childNodes
			alert( cityObj.childNodes.length );
		};
		//6.返回#phone的第一个子节点
		var btn06Ele = document.getElementById("btn06");
		btn06Ele.onclick = function(){
			//1 先查找id为phone的节点
			var city = document.getElementById("phone");
			//2通过phone节点对象.firstChild获取第一个子节点
			alert( city.firstChild.innerHTML );
		};
		//7.返回#bj的父节点
		var btn07Ele = document.getElementById("btn07");
		btn07Ele.onclick = function(){
			//1 先查找bj节点
			var bj = document.getElementById("bj");
			//2 通过bj节点.parentNode
			alert( bj.parentNode.innerHTML );
		};
		//8.返回#android的前一个兄弟节点
		var btn08Ele = document.getElementById("btn08");
		btn08Ele.onclick = function(){
			//1 先查找id为android的节点
			var androidObj = document.getElementById("android");
			//2 通过android节点.previousSibling上一个节点
			alert( androidObj.previousSibling.innerHTML );
		};
		//9.读取#username的value属性值
		var btn09Ele = document.getElementById("btn09");
		btn09Ele.onclick = function(){
			alert(document.getElementById("username").value);
		};
		//10.设置#username的value属性值
		var btn10Ele = document.getElementById("btn10");
		btn10Ele.onclick = function(){
			// .value属性可读可写
			document.getElementById("username").value = "xxx";
		};
		//11.返回#bj的文本值
		var btn11Ele = document.getElementById("btn11");
		btn11Ele.onclick = function(){
// 			alert( document.getElementById("bj").innerHTML ); 
			alert( document.getElementById("city").innerText ); 
		};
	};
</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>



Javaweb开发了解前端知识一、html&&css

黑马程序员JavaWeb开发教程(前端部分) ---笔记分享 此篇文章记录的内容是不全的,我觉得基础的部分没有记录,我想主要学的是此课程的后端部分,前端部分学校有学习过,我就开倍速一带而过啦,还有就是学校学的是Vue3和此视频讲的Vue2还是有一定区别的。目录总结一、HTML、CSS—Day01~03-131、VS Code (下载网址:Visual Studio Code - Code Editing. Redefined)?编辑2、盒子模型二、JS—Day02~01-141、引入方式2、变量3、数据类型、运算符4、函数?编辑5、对象1)数组(Array对象) 阅读详情

相关推荐

Multisim14安装失败?手把手教你彻底清理残留文件(附专用卸载工具)

本文针对Multisim14安装失败问题,提供了一套从根源解决的完整方案。文章详细分析了安装失败的三大元凶——文件残留、注册表残留和隐藏组件,并手把手指导用户使用专用卸载工具进行标准化清理,再结合手动深度清理文件系统和注册表,最终实现彻底卸载和完美重装,有效解决Multisim14安装问题。

weixin_29179311的博客 317

DOM 模型(文档对象模型)重点

DOM 模型 DOM 全称是Document Object Model 文档对象模型 大白话,就是把文档中的标签,属性,文本,转换成为对象来管理。那么它们是如何实现把标签,属性,文本转换成为对象来管理呢。这就是我们马上要学习的重点。 Document 对象(*****重点) Document 对象的理解: 第一点:Document 它管理了所有的HTML 文档内容。 第二点:document 它是一种树结构的文档。有层级关系。 第三点:它让我们把所有的标签都对象化 第四点:我们可以通过document 访

笔记别偷看 270

一文读懂GPU通信互联技术:GPUDirect、NVLink与RDMA

GPUDirect是NVIDIA开发的一项技术,旨在实现GPU与其他设备(如网络接口卡NIC和存储设备)之间的直接通信和数据传输,而无需CPU的参与。传统上,数据在GPU和另一个设备之间传输时,必须通过CPU,这导致潜在的性能瓶颈和延迟增加。GPUDirect技术则通过绕过CPU,直接访问和传输数据,显著提高系统性能。NVLink是NVIDIA开发的一种高速、高带宽的互连技术,用于连接多个GPU之间或GPU与其他设备(如CPU、内存等)之间的通信。

异构算力老群群(在读985计算机博士生)的技术博客 7770

JavaWeb JavaScript

Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行 JavaScript 代码。 JS 是 Netscape 网景公司的产品,最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript。 JavaScript 是属于网络的脚本语言! JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。 ......

weixin_65637841的博客 6757

网络虚拟化介绍(OVS、DVS)

网络虚拟化概念网络虚拟化就是把网络层的一些功能从硬件中剥离出来,建立新的网络虚拟层;该虚拟层可以接管网络服务和配置,实现网络服务与物理层的解耦,打破物理资源限制;通过网络虚拟层能够在一个物理网络上模拟出多个逻辑网络,并且多用户在逻辑网络上相互隔离,保证网络安全网络虚拟化的特点隔离性:不同租户的流量相互之间不能互访;但是IP/MAC地址都可以独立规划可移动性:虚拟机可以跨二层/三层迁移,甚至可以跨广域网迁移(迁移前后虚拟机Vlan和IP地址都不会发生变化)可扩展性:逻辑网络的规模和数量可扩展。

m0_49864110的博客 1万+

ESP32—C3实现网页跳转

用户点击HTML页面中的按钮。浏览器根据按钮的href属性向服务器发送HTTP GET请求。服务器根据请求的URL调用相应的回调函数。服务器发送包含新页面HTML内容的HTTP响应。浏览器解析并显示新的HTML页面。这个过程对于用户来说是无缝的,看起来就像是直接从一个页面跳转到另一个页面。实际上,背后发生了HTTP请求和响应的过程。

qq_59527512的博客 1022

获取HTML元素3个方法:document.getElementsByName()、document.getElementById()、document.getElementsByTagName()

获取HTML元素3个方法比较:document.getElementsByName()、document.getElementById()、document.getElementsByTagName() document.getElementsByName() 是根据控件名称获取这个控件对象,因为控件名称可以相同,返回的是一个对象数组。 document.getElementBy...

小哥骑单车 6万+

手把手实战:RK3588上YOLOv8模型从训练到部署全流程解析

本文详细解析了在RK3588开发板上部署YOLOv8目标检测模型的全流程。从模型训练、正确导出适配的ONNX格式,到使用RKNN-Toolkit2进行模型转换与量化,最后在板卡上完成部署与性能测试。文章提供了完整的代码示例和关键避坑指南,帮助开发者高效实现嵌入式AI应用落地。

weixin_28224217的博客 402

Java、Javascript、Javaweb三者的区别

首先,我们来说一下java 与 javaweb之间的关系 : 我们平常说的Java一般指Java SE,也就是Java Standard Edition,Java的标准版,一般用来开发桌面应用程序,但是在开发桌面应用程序上相对VB,Delphi,VC++并没有什么优势。 JavaWeb则到了Java EE领域了,也就是Java Enterprise Edition,Java的企业版,看那

MAC--芳 5万+

从TI官方手册里挖细节:TPS5430负压电路那个不起眼却救命的Cd电容

本文深入解析TPS5430负压电路中关键Cd电容的作用与设计要点,揭示其在DC-DC电源设计中的重要性。通过对比TI手册和实战案例,详细阐述Cd电容在高频电流回路、能量缓冲和噪声抑制中的核心功能,并提供选型与布局指南,帮助工程师避免芯片烧毁风险,提升电路稳定性。

weixin_27102543的博客 355

Allegro172版本DFM功能介绍

Allegro172版本提供了实时DFM检查的功能,让违反要求的地方实时以DRC的形式报出来,让加工不可加工因素在设计的时候同步避免。打开Constraint,选择Manufacturing, 所有DFM相关DRC都在这。把所有下面DRC开关(DFM,DFA,DFT)都选择on,选择OK。这个规则和物理和间距规则等等都没有关系,单独的一个加工规则。这些DRC大部分是正常的,正常的可以去修改规则来消除。等待DRC刷新,板子上会出现很多DRC,类似下图。下面介绍如何调用和产生DFM规则。一直往下点击next。

weixin_54787054的博客 1337

Java与JavaScript的区别

Java与JavaScript的区别

lino_yao的博客 601

风电功率预测项目技术白皮书:短期、超短期、中长期全尺度算法详解与工程落地

聚焦风电功率预测的时间尺度与算法:短期(0~72h)以XGBoost/LightGBM/CatBoost及深度学习为主,超短期(0~4h)采用ARMA+LSTM,中长期用LightGBM等,并涵盖概率预测、多气象源融合、AI大模型+物理模型混合策略、极端天气应对及工程运维要点。

算法工程师 323

Javaweb第一章:Web前端的入门理论

本文适合刚刚接触前端,更加趋向于扫盲,全是干货,包含HTML、JavaScript和vue的简要讲解

tq02的博客 4374

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

黑马JavaWeb开发跟学(二)Web前端开发JavaScript、Vue基础

黑马JavaWeb开发跟学(二)Web前端开发JavaScript基础

心向阳光的天域的博客 1529

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

JavaWeb开发(前端Web开发)

课程特色前后端分离开发,基于接口交互(接口文档)。前端-基于Vue脚手架,构建工程化的前端项目。通过案例贯穿整个课程体系,学以致用。参照企业开发模式,需求分析-表结构设计-接口文档-功能实现-测试。什么是web?Web:全球广域网,也称为万维网(www World wide Web),能够通过浏览器访问的网站。JavaScript(简称:JS)是一门跨平台、面向对象的脚本语言。是用来控制网页行为的,它能使网页可交互。JavaScript 和Java 是完全不同的语言,不论是概念还是设计。

又菜又爱玩的小熊 4741

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

JavaWeb笔记整理——HTML、CSS、JavaScript

Java程序员必备前端技术栈——Html、css、JavaScript以及应用笔记详细整理

i_Water_boy的博客 1513

Javaweb开发了解前端知识一、html&&css

01-html和CSS1、html2、CSS1、B/S 软件的结构 2、前端的开发流程 3、网页的组成部分页面由三部分内容组成!分别是内容(结构)、表现、行为。内容(结构),是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用html技术来展示。表现,指的是这些内容在页面上的展示形式。比如说。布局,颜色,大小等等。一般使用CSS技术实现行为,指的是页面中元素与输入设备交互的响应。一般使...

mxcsdn的博客 1万+

JAVAWEB-前端HTML、CSS、JavaScript期末复习知识点总结

为了考试复习方便 下面内容摘自前端HTML、CSS、JavaScript知识点总结_敐的博客-优快云博客 前端HTML、CSS、JavaScript知识点总结 一、HTML 1.前端组成 (1)前端的组成:内容(HTML)+样式(CSS)+页面交互特效(javascript); (2)前端编译(解析)器:浏览器 浏览没有统一,所以每个浏览内核不同,导致同一个页面用不同,浏览器 解析出效果不同(兼容性)。 (3)前端开发工具: 记事本,...

m0_57006708的博客 2504

JavaWeb前端与Vue.js

1.背景介绍 JavaWeb前端与Vue.js是一篇深度探讨JavaWeb前端技术和Vue.js框架的专业技术博客文章。在这篇文章中,我们将从以下几个方面进行探讨: 背景介绍 核心概念与联系 核心算法原理和具体操作步骤以及数学模型公式详细讲解 具体代码实例和详细解释说明 未来发展趋势与挑战 附录常见问题与解答 1.1 JavaWeb前端背景 JavaWeb前端技术是指在JavaWeb应...

AI天才研究院 1605

java web开发需要学习哪些知识_具备JavaWeb开发能力需要掌握哪些知识?

具备JavaWeb开发能力需要掌握哪些知识?首先Java基础语法是基础,另外大家对于MySQL、JDBC、HTML和CSS、JavaScript、BootStrap、XML、Tomcat、Servlet和HTTP请求协议、Request和Response、Cookie和Session、JSP,EL和JSTL等等知识必须要熟练掌握,这样才能基本具备JavaWeb开发能力。现在我们来讲讲JavaWeb...

weixin_42297446的博客 3156

javaweb与web前端的区别

一,什么是javaweb? 1、java的发展方向有安卓开发,web开发,嵌入式,服务器等, 2、javaweb主要是做web方向,分两块一块是服务器端 叫后端,另一块叫前端,也就是web前端。 3、javaweb主要侧重后端,运用jsp,servelt以及一些框架比如spring,structs以及与数据库交互的知识,也会涉及html,css,javascript。 二.什么是web前端 1、就...

weixin_44325885的博客 1万+

【JavaWeb】前端三剑客—JavaScript基础知识

目录 一、JavaScript 是什么 JavaScript (简称 JS) JavaScript 和 HTML 和 CSS 之间的关系 JavaScript 运行过程 二、前置知识 第一个程序 JavaScript 的书写形式 行内式 内嵌式 外部式 输入输出 三、语法概览 变量的使用 基本数据类型 number 数字类型 string 字符串类型 boolean 布尔类型 undefined 未定义数据类型 四、数组 创建数组 获取数组元素 新增数组元素 删

耀的博客 3642

【JavaWeb】前端基础(HTML+CSS+JavaScript)

Web标准也称为网页标准,由一系列的标准组成,大部分由W3C ( World wide web Consortium,万维网联盟)负责制定。HTML:负责网页的结构(页面元素和内容)。CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。JavaScript:负责网页的行为(交互效果)。HTML ( HyperText Markup Language) :超文本标记语言。超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。

qq_44544908的博客 4620

【javaweb】实验二

总之,基于 jQuery 的表单验证是一个既有挑战又有收获的过程。通过不断学习和实践,我们可以逐渐掌握其中的技巧和方法,我还学会了如何使用正则表达式和输入过滤技术来解决常见的验证问题。Java Web的表单验证是一个需要细心和耐心处理的过程,还有很多需要完善的地方,代码多敲多练才是硬道理,通过不断的学习和实践,我相信我会更好地掌握这一技能,为未来的Web开发打下坚实的基础。2、软件要求:Chrome浏览器、IE11浏览器、Firefox浏览器。图 1-2 错误输入的提示。图 1-1 页面基础结构。

m0_73996189的博客 848

JavaWeb 前端开发

HTML是由标签构成的标签可以是大写,也可以是小写,也可以是大小写混用。属性值也可以使用单引号,但一般使用双引号。HTML的语法结构比较松散,不严谨。

2401_89561082的博客 1056
上一篇: Javaweb开发了解前端知识一、html&&css
下一篇: Javaweb开发了解前端知识三、Jquery(一)
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值