js表单学习

最新推荐文章于 2024-07-26 20:46:33 发布

帝黎亚

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量151

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_52109865/article/details/122900555

版权

基础部分

首先了解HTML的DOM。那么什么是DOM呢？

HTML DOM（文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为对象树：
在这里插入图片描述
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有能力：
JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

DOM
DOM 是一项 W3C (World Wide Web Consortium) 标准。
DOM 定义了访问文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

那么是么是HTMLDOM呢？
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

HTML DOM方法

HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的值
DOM 编程界面
HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。

在 DOM 中，所有 HTML 元素都被定义为对象。
编程界面是每个对象的属性和方法。
属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。
方法是您能够完成的动作（比如添加或删除 HTML 元素）
如：我要改变html界面中id为demo的p元素的内容

<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

getElementById 方法
访问 HTML 元素最常用的方法是使用元素的 id。
在上面的例子中，getElementById 方法使用 id=“demo” 来查找元素

innerHTML 属性
获取元素内容最简单的方法是使用 innerHTML 属性。
innerHTML 属性可用于获取或替换 HTML 元素的内容。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 html和 body

JavaScript HTML DOM 文档

HTML DOM 文档对象是网页中所有其他对象的拥有者
HTML DOM Document 对象
文档对象代表您的网页。
如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。
下面是一些如何使用 document 对象来访问和操作 HTML 的实例

查找 HTML 元素

方法										描述
document.getElementById(id)				通过元素 id 来查找元素
document.getElementsByTagName(name)		通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

改变 HTML 元素

方法										描述
element.innerHTML = new html content		改变元素的 inner HTML
element.attribute = new value				改变 HTML 元素的属性值
element.setAttribute(attribute, value)		改变 HTML 元素的属性值
element.style.property = new style			改变 HTML 元素的样式

添加和删除元素

方法								描述
document.createElement(element)		创建 HTML 元素
document.removeChild(element)		删除 HTML 元素
document.appendChild(element)		添加 HTML 元素
document.replaceChild(element)		替换 HTML 元素
document.write(text)				写入 HTML 输出流

添加事件处理程序

方法														描述
document.getElementById(id).onclick = function(){code}		向 onclick 事件添加事件处理程序

查找 HTML 对象
首个 HTML DOM Level 1 (1998)，定义了 11 个 HTML 对象、对象集合和属性。它们在 HTML5 中仍然有效。
后来，在 HTML DOM Level 3，加入了更多对象、集合和属性。
属性描述 DOM

属性										描述												DOM
document.anchors					返回拥有 name 属性的所有 <a> 元素。							 1
document.applets					返回所有 <applet> 元素（HTML5 不建议使用）					 1
document.baseURI					返回文档的绝对基准 URI										 3
document.body						返回 <body> 元素												 1
document.cookie						返回文档的 cookie											 1
document.doctype					返回文档的 doctype											 3
document.documentElement			返回 <html> 元素	                                             3
document.documentMode				返回浏览器使用的模式											3
document.documentURI				返回文档的 URI												3
document.domain						返回文档服务器的域名											1
document.domConfig					废弃。返回 DOM 配置											3
document.embeds						返回所有 <embed> 元素										3
document.forms						返回所有 <form> 元素	1
document.head						返回 <head> 元素	3
document.images						返回所有 <img> 元素	1
document.implementation				返回 DOM 实现	3
document.inputEncoding				返回文档的编码（字符集）	3
document.lastModified				返回文档更新的日期和时间	3
document.links						返回拥有 href 属性的所有 <area> 和 <a> 元素	1
document.readyState					返回文档的（加载）状态	3
document.referrer					返回引用的 URI（链接文档）	1
document.scripts					返回所有 <script> 元素	3
document.strictErrorChecking		返回是否强制执行错误检查	3
document.title						返回 <title> 元素	1
document.URL						返回文档的完整 URL	1

代码实例

获取表单元素
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hahaha</title>
	</head>
	<body>
		<form id="land" action="" method="get">
			用户名<input type="text" name="uname" id="uname"/>
			<br/>
		</form>
		<form id="my2" action="" method="get">
			密码<input type="text" name="pass" id="pass"/><br/>
			&nbsp;<span id = "msg" style="color: red"><span>
			<button type="submit" onclick="return get()">提交</button><br/>
		</form>
		
		<script type="text/javascript">
		function get(){
			var name=document.getElementById("uname").value;
			var pass = document.getElementById("pass").value;
			console.log("用户名"+name);
			console.log("密码"+pass);
			if(empty(name)||empty(pass)){
				document.getElementById("msg").innerHTML="用户名或密码不能为空！"
				return;
			}
			else{
				document.getElementById("msg").innerHTML="加载中请稍后"
				return;
			}
		document.getElementById("land").submit();
		}
		function empty(str){
			if(str==null||str.trim()==""){
				return true;
			}
			return false
		}
		</script>
	</body>
</html>

Ajax

原生Ajax的实现流程
		1。得到XMLHttpRequest对象
		var xhr =new XMLHttpRequest();2。打开请求
		xhr.open(method , uri, async);
		method:请求方式，通常是GET | POSTuri:请求地址
		async:是否异步。如果是true表示异步，false表示同步
		3。发送请求
		xhr.send(params);
		params:请求时需要传递的参数
		如果是GET请求,设置null。(GEt请求的参数设置在url后面)
		如果是POST请求,无参数设置为null，有参数则设置参数
		4。接收
		xhci atus响应状态(200=响应成功，404=资源未找到，500=服务器异常)xhr.responseText·得到响应结果

同步请求示例

<script type="text/javascript">
		//得到XMLHttpRequest对象
		var xhr = new XMLHttpRequest();//打开请求
		url = "www.diliya.top"
		xhr.open( "get", url,false);  
		//发送请求
		xhr. send(null);//判断响应状态
		if (xhr. status == 200) {
		console.log(xhr.responseText) ;}
		 else {
		console.log("状态码: "+ xhr.status + "，原因:" + xhr.responseText)}
		//由于我的个人博客网站并没有返回数据，所以查不到
</script>

异步请求实例

*异步请求*/
<script type="text/javascript">
		function yihu(){
		//得到XMLHttpRequest对象
		var xhr = new XMLHttpRequest();//打开请求
		url = "https://api.seniverse.com/v3/weather/now.json?key=WNEUXAAE2G&location=南京&language=zh-Hans&unit=c"
		xhr.open("get", url ,true);//异步请求//发送请求
		xhr. send(null);
		xhr.onreadystatechange=function(){
			//当值为4时，相应成功
			if(xhr.readyState==4){
				//判断响应状态
				if (xhr.status == 200) {
				//获取响应结果
		        console.log(xhr.responseText);
				} 
		         else {
		         console.log("状态码:"+ xhr.status + "，原因:"+ xhr.responseText);
		    }
		        console.log("异步请求... ");
		}
			}
			
		}
		//异步请求test02();
		yibu();
		</script>

输入城市获取天气数据
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取天气</title>
	</head>
	<body>

			城市名<input  type = "text" name="city" id="city"/>
			<button type="submit" onclick="getinfo()">确认</button><br/>
			<p id="msg" style="color: red; font-size: 20px;"> </p>
	</body>
	<script type="text/javascript">
		function getinfo(){
			var city = document.getElementById("city").value;
			console.log("城市"+city);
			if(empty(city)){
				document.getElementById("msg").innerHTML="请输入内容"
			}
			else{
			url = "https://api.seniverse.com/v3/weather/now.json?key=WNEUXAAE2G&language=zh-Hans&unit=c&location="+encodeURI(city)
			console.log(url);
			var xhr = new XMLHttpRequest();
			xhr.open("get",url,false);
			xhr.send(null);
			if(xhr.status == 200 && xhr.readyState == 4){
				var wea = JSON.parse(xhr.responseText)
				document.getElementById("msg").innerHTML=wea.results[0].location.name+" "+wea.results[0].now.text+" "+ wea.results[0].now.temperature;;
				console.log(xhr.responseText);
			}
			else {
				console.log("状态码"+xhr.status+"原因"+xhr.responseText)
			}
					}
			}
		function empty(str){
			if(str==null||str.trim()==""){
				return true;
			}
			return false;
		}
	</script>
</html>

帝黎亚

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js表单学习

基础部分首先了解HTML的DOM。那么什么是DOM呢？HTML DOM（文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被结构化为对象树：通过这个对象模型，JavaScript 获得创建动态 HTML 的所有能力：JavaScript 能改变页面中的所有 HTML 元素JavaScript 能改变页面中的所有 HTML 属性JavaScript 能改变页面中的所有 CSS 样式JavaScript 能删除已
复制链接

扫一扫