JavaScript02(对象，处理表和表单元素事件，DOM节点)

最新推荐文章于 2021-06-03 11:47:47 发布
最新推荐文章于 2021-06-03 11:47:47 发布
阅读量228 收藏
点赞数
文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/serendipity_xr/article/details/113831733
版权

JavaScript

  • JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 Web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。使用js之后可以在页面中实现特效，将页面中的信息实现动态化，比如js轮播图 。

一.js的三种使用方式

1. 行内js

  • 在标签内的绑定事件，编写js脚本代码，实现行内js，但尽量不要使用。
<body>
		<button onclick="javascript:alert('这是第一个按钮')">按钮</button>
		<br />
		<button onclick="alert('这是第二个按钮')">按钮</button>
		<br />
		<button onclick="aa=function aa(){alert('这是用自定义的函数的第三个按钮')}()">按钮</button>
	</body>

2. 内联js

  • 在当前的html页面中,使用<script></script>标签使用,比行内更加的方便。
  • 所有的js操作可以在当前的html页面中使用，如果要在其他的标签中使用，使用html的事件进行绑定。
  • this关键字表示的是当前对象。 谁来调用我的方法，this就表示那个对象。
  • this关键字在函数中调用，属于window对象。
  • this关键字在html标签中使用表示的元素对象。
	<body>
		<h4 onclick="test01()">使用内联函数</h4>
		<!--事件绑定函数调用，传递参数 -->
		<input type="button" value="100" onclick="test02(200)" />
		<br />
		<input type="button" value="300" onclick="test02(this.value)" />
	</body>
	<script>
		function test01(){
			alert("函数1");//测试语
		}
		//test01();//在js页面中直接调用，随着页面的加载，函数自动被调用，但一般不这样调用
		function test02(num){
			alert("test02函数"+num);
			alert(this);
		}
	</script>
  • this的结果
    在这里插入图片描述

3.外部js

  • 使用js后缀的文件，被多个html同时引用，重用性更高。
    在这里插入图片描述
  • 结果
    在这里插入图片描述

4.注意

  • js脚本中一行代码的错误，会导致当前函数错误代码之后的代码全部不能正常执行，使用浏览器的开发者模式，检查错误信息，或者在js 脚本中自己逐行进行测试。(alert()常被作为测试语句)
    在这里插入图片描述
    所有的类型都是对象，都会拥有内置的函数。
  • 运算符，流程控制，循环，都与java使用方式一样。
  • for…in :可以进行对象的属性遍历.

二.Javascript 的对象

1. 浏览器对象window对象

在这里插入图片描述

  • 结构
    在这里插入图片描述

  • 浏览器对象的分层结构(详细结构)在这里插入图片描述

2.window

2.1window属性

在这里插入图片描述

2.2window方法

  • window对象的常用方法， window对象的方法调用 ，其window对象都是可以省略的 。
    在这里插入图片描述
方法参数含义
open(“打开窗口的url”,“窗口名”,“窗口特征”)窗口特征可以任意组合(height：窗口高度;width:窗口宽度；top：窗口距离屏幕上方的像素值；left:窗口距离屏幕左侧的像素值;)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>浏览器对象</title>
	</head>
	<body>
		<p onclick="opennew()">开启一个新的页面</p>
	</body>
	<script>
		//弹框
		window.alert("世界美好与你环环相扣");
		//window可省略
		alert("你是人间四月天");
		//开启其他页面
		function opennew(){
			window.open("轮播图.html","测试","height=300px,width=300px,top=300px,left=200px");
			//window.close();
		}
		
	</script>
</html>

2.3小例子

  • 随机漂浮广告
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">	
		<title>随机广告</title>
		<script>
			setInterval(move,1000);
			var num=50;
			//定义函数
			function move(){
				num=num+50;
				document.getElementById("Layer1").style.left=num+"px";
				document.getElementById("Layer1").style.top=num+"px";
			}
		</script>
	</head>
	<body onload="move()">
		<div id="Layer1" style="position: absolute; left:14px; width:150px; top:44px; height: 102px; z-index: 1 ;">
		<a href="三级联动.html"><img src="img/德云社02.jpg" width="250" height="200" border="0"></a>
		</div>
		<h2>随机漂浮的广告</h2>
	</body>
</html>

3.Document对象

3.1属性

在这里插入图片描述

3.2方法

在这里插入图片描述

4.history对象

4.1方法

在这里插入图片描述

  • one.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		 <a href="two.html">第二页</a>
		 <p onclick="two()">下一页</p>
		 <p onclick="two01()">下一页</p>
	</body>
	
	<script>
		  function two(){
		  	   window.history.forward();
		  }
		  
		   function two01(){
		  	   window.history.go(1);
		  }
		  
		  
	</script>
</html>
  • two.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>  
		 <a href="one.html">第一页</a>
		  <p onclick="one01()">上一页</p>
	</body>
	<script>
	 function one(){
		  	   window.history.back();
	}
	 function one01(){
		  	   window.history.go(-1);
	}
	 </script>
</html>
  • 结果
    在这里插入图片描述

5.Location对象

5.1属性

在这里插入图片描述

5.2方法

在这里插入图片描述

Location对象的方法

  • window.location.assign(url) ： 加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

  • window.location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的

  • 文档对象模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文档对象模型</title>
	</head>
	<body>
		<a id="a01" class="one" name="lj" href="#?name='zs'&pass=123456">第一个链接 </a>
		<a id="a02" class="one1" name="lj" href="document对象.html">第二个链接 </a>
		<a id="a03" class="one" name="lj" href="javascript:void(0)">第三个链接 </a>
		<a id="a03"  class="one1" name="lj" href="document对象.html?name='zs'&pass=123456">第四个链接 </a>
	</body>
	<script>
		// 获取元素对象  
		function getElement(){
			var a01=document.getElementById("a01");//id获取
//			alert(a01);
			//根据元素的name属性来获取   因为name属性值可以相同所以返回值是多个
			var name=document.getElementsByName("lj");
//			alert(name.length);
			var classname=document.getElementsByClassName("one1");
//			alert(classname.length);
            var elementname=document.getElementsByTagName("a");
			alert(elementname.length);
		}
		getElement();
	</script>
</html>

三.处理表和表单元素事件

1.JavaScript事件

在这里插入图片描述

2.文本框对象–事件处理程序

  • 文本框(事件)
事件含义
onBlur文本框失去焦点
onChange文本框的值被修改
onFocus光标进入文本框中
  • 文本框(方法)
方法含义
focus()获取焦点，即获得鼠标光标
select()选中文本内容，突出显示输入区域
  • 文本框(属性)
属性含义
readonly只读，文本框中的内容不能修改

3.按钮–事件处理程序

  • 命令按钮
事件处理程序说明
onSubmit表单提交事件，单击“提交”按钮时产生，此事件属于元素，不属于提交按钮
onClick按钮单击事件

4.复选框–事件处理程序

  • 复选框(事件)
事件含义
onBlur复选框失去焦点
onFocus复选框获得焦点
onClick复选框被选中或取消选定
  • 复选框(属性)
属性含义
checked复选框是否被选中，选中为true，未选中为false。您可以使用此属性查看复选框的状态或设置复选框是否被选中
value设置或获取复选框的值

5.单选按钮–事件和属性

  • 单选按钮(事件)
事件含义
onBlur单选按钮失去焦点
onFocus单选按钮获得焦点
onClick单选按钮被选中或取消选定
  • 单选按钮(属性)
属性含义
checked单选按钮是否被选中，选中为true，未选中为false。您可以使用此属性查看单选按钮的状态或设置单选按钮是否被选中
value设置或获取单选按钮的值

6.下拉列表框–事件和属性

  • 下拉列表框(事件)
事件含义
onBlur下拉列表框失去焦点
onChange当选项发生改变时产生
onFocus下拉列表框获得焦点
  • 下拉列表框(属性)
属性含义
value下拉列表框中，被选选项的值
options所有的选项组成一个数组，options表示整个选项数组，第一个选项即为options[0]，第二个即为options[1]，其他以此类推
selecedIndex返回被选择的选项的索引号，如果选中第一个返回0，第二个返回1，其他类推

四.DOM节点

document文档对象

  • 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档流–所有html资源保存在文档流中。
  • document对象是js是用的最多一个操作.

1.一些常用的HTML DOM方法

1.1获取元素对象

方法描述
getElementById()返回带有指定 ID 的元素。
getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）
getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。
getElementsByName()返回带有指定name的所有元素的节点列表。

1.2更新内容

方法描述
appendChild()把新的子节点添加到指定节点。
removeChild()删除子节点。
replaceChild()替换子节点。
insertBefore()在指定的子节点前面插入新的子节点。
createElement()创建元素节点。
createTextNode()创建文本节点。
createAttribute()创建属性节点。
getAttribute()返回指定的属性值。
setAttribute()把指定属性设置或修改为指定的值。

2.一些常用的 HTML DOM 属性：

  • innerHTML - 节点（元素）的文本值
  • parentNode - 节点（元素）的父节点
  • childNodes - 节点（元素）的子节点
  • attributes - 节点（元素）的属性节点
  • nodeName -节点的名称
  • nodeValue -节点的值
  • nodeType -节点的类型

2.1访问 HTML 元素（节点）

常用的访问 HTML 元素的方法：

  • 通过使用 getElementById() 方法
  • 通过使用 getElementsByTagName() 方法
  • 通过使用 getElementsByClassName() 方法
  • 通过使用 getElementsByName() 方法
方法返回值语法
getElementById()返回带有指定 ID 的元素document.getElementById(“id值”) ；
getElementsByTagName()返回带有指定标签名的所有元素元素.getElementsByTagName(“标签名称”);
getElementsByClassName()返回带有指定class 的元素元素.getElementsByTagName(“class值”)
getElementsByName()返回带有指定name的元素元素.getElementsByTagName(“name值”);

2.2对于元素节点的操作

常用的操作元素节点的增、删、改、及重置所在位置的方法：

  • 通过使用 appendChild()方法
  • 通过使用 removeChild()方法
  • 通过使用 replaceChild()方法
  • 通过使用 insertBefore()方法
方法功能语法
appendChild()把新的子节点添加到指定节点。node.appendChild(node)
removeChild()删除子节点。node.removeChild(node)
replaceChild()替换子节点。node.replaceChild(newnode,oldnode)
insertBefore()在指定的子节点前面插入新的子节点。node.insertBefore(newnode,existingnode)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>节点的操作</title>
	</head>
	<body>
		 <span id="s01">第一个节点</span>
		 
		 <div id="div01">
		 	  <p id="p01">div中的内容</p>
		 </div>
		 
		 <button onclick="appendnode()" >追加节点</button>
		 <button onclick="delnode()" >删除节点</button>
		 <button onclick="updatenode()" >替换节点</button>
		 <button onclick="updatetext()" >获取和更新文字内容</button>
		 <button onclick="selectall()" >获取某节点下的所有节点</button>
	</body>
	<script>
		// 标签还是内容     
		// 追加节点 
		function appendnode(){
			// 获取span节点  
			var s01=document.getElementById("s01");
			var div01=document.getElementById("div01");
			div01.appendChild(s01);
		}
		
		// 移除   指定节点
		function delnode(){
			// 获取span节点  
			var p01=document.getElementById("p01");
			var div01=document.getElementById("div01");
			div01.removeChild(p01);
		}
		//替换节点  
		function updatenode(){
			// 获取节点  
			var p01=document.getElementById("p01");
			var div01=document.getElementById("div01");
			// 新建一个元素节点  
			var h1=document.createElement("h1");
			h1.setAttribute("id","h01");
			//使用innerHtml  
			h1.innerHTML="新替换的内容";
			div01.replaceChild(h1,p01);
			
		}
		
		// 获取 和更新标签内部的文本操作  
		function updatetext(){
			// 获取span 对象
			var span01=document.getElementById("s01");
//			var smess=span01.innerHTML;  //获取的是节点内部的文本及子元素
			var smess=span01.innerText; //获取文本内容
			alert(smess);
//			span01.innerHTML="<h2>我是更新之后的内容</h2>";
			span01.innerText="<h2>我是更新之后的内容</h2>";//将标签当做文本内容输出
		}
		
		// 获取所有节点
		function selectall(){
			  var divs=document.querySelectorAll("div");
			  alert(divs.length);
		}
	</script>
</html>

2.3对于节点属性及内容的操作

常用的创建元素属性、节点、文本及获取、修改属性值方法：

  • 通过使用 createElement()方法
  • 通过使用 createTextNode()方法
  • 通过使用 createAttribute()方法
  • 通过使用 getAttribute()方法
  • 通过使用 setAttribute()方法
方法功能语法
createElement()创建元素节点。createElement(name)
createTextNode()创建文本节点。createTextNode(data)
createAttribute()创建属性节点。document.createAttribute(attributename)
getAttribute()返回指定的属性值。element.getAttribute(attributename)
setAttribute()把指定属性设置或修改为指定的值。element.setAttribute(attributename,attributevalue)

常用的HTML DOM 属性

  • 通过使用 innerHTML 属性
  • 通过使用 parentNode 属性
  • 通过使用 childNodes 属性
  • 通过使用 attributes 属性
  • 通过使用 nodeName 属性
  • 通过使用 nodeValue 属性
  • 通过使用 nodeType 属性
方法功能语法
innerHTML设置或返回表格行的开始和结束标签之间的 HTMLtablerowObject.innerHTML=HTML
parentNode以 Node 对象的形式返回指定节点的父节点;如果指定节点没有父节点，则返回 null。node.parentNode
childNodes返回节点的子节点集合，以 NodeList 对象element.childNodes
attributes返回指定节点的属性集合，即 NamedNodeMapnode.attributes
nodeNamenodeName 属性指定节点的节点名称。如果节点是元素节点，则 nodeName 属性返回标签名。入股节点是属性节点，则 nodeName 属性返回属性的名称。 对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。node.nodeName
nodeValue设置或返回指定节点的节点值设置节点值：node.nodeValue=value；返回节点值：node.nodeValue
nodeTypenodeType 属性返回以数字值返回指定节点的节点类型。 如果节点是元素节点，则 nodeType 属性将返回 1。 如果节点是属性节点，则 nodeType 属性将返回 2。如果节点是元素或属性中的文本内容，则 nodeType 属性将返回 3。node.nodeType
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="http://www.baidu.com" id="a01" >百度连接</a>
		<!--img 的src 是发送一个请求  -->
		<img src="img/德云社06.jpg" id="img" alt="这是一个图片" height="300px" width="300px" />
		<button onclick="geta()">获取属性值</button>
		<button onclick="getChilds()">获取body所有的子节点</button>
		<hr />
		<span id="cs" style="font-size: 18px;">我是用来修改样式的 </span>
		<button onclick="setCss()">修改样式</button>
	</body>
	
	<script>
		
		function geta(){
			 // 获取属性对象 
			 var a =document.getElementById("a01");
			 //根据属性名获取属性的值 
			 alert(a.href);
			 var img =document.getElementById("img");
			 alert(img.src);
			 alert(img.height);
		}
		//获取 指定节点的所有子节点
		function getChilds(){
			var body=document.getElementsByTagName("body");
			alert(body[0]);
			var nodes=body[0].childNodes;
			alert(nodes.length)
		}
		// 修改样式 
		function setCss(){
			//获取目标元素对象 
			var cs=document.getElementById("cs");
			alert(cs.style.fontSize);
			//设置新知
			cs.style.color="red";
		}
	</script>
</html>
serendipity_xr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript DOM事件 和操作元素（附带超详细栗子）
shen_yk的博客
11-19 217
事件概述  JavaScript可以写动态页面，而事件就是可以被JavaScript侦测到行为。比如点击啦 悬停啦 等等 很多很多。简单来说事件就是 触发——响应机制  接下来都是一些事件中的基础所以是 事件基础 事件三要素 1.事件源  被触发的对象   比如我们在网页中加了一个按钮 点击按钮 事件触发 这个按钮就是事件源 2.事件类型   是如何触发的。例如点击 鼠标悬停等等 3.事件处理程序...
JavaScript-表单对象
xmosang的博客
01-26 766
form标签本质上也是一个DOM对象 9.1、获取表单元素 表单的主要目的是提交信息 <form> 用户名：<input type="text" id="username"><br/> 性别：<input type="radio" name="sex" value="男" id="boy">男<input type="radio" name ="sex" value="女" id="girl">女 </form> &l
js学习之操作表单元素
独狼的博客
06-26 246
<html> <head> <title>操作表单元素</title> <meta charset="UTF-8"/> <!-- js操作多选框、单选框 被选中状态下在js中checked属性值为true,未选中状态为false; js操作下拉框： 被选择的option对象在js中selected属性值为true，未选中为false --> <!--声明js代码域-->
文本框单选html,20150512表单、文本框、复选框、单选按钮、滚动文本框、单选框、label...
weixin_39715460的博客
06-03 355
1.1、表单是一个HTML元素，用于包含和组织称为表单控件的对象，如文本框、复选框、按钮等。1.2、表单由两部分组成：①HTML表单本身，它是网页用户界面；②服务器端处理，它处理表单数据，可以发送电子邮件、向文本文件写入、更新数据库或在服务器上执行其他处理。1.3、form元素的表达形式如：，常用属性如下图：2.1、文本框使用独立标记input元素，input用于配置几种表单控件，该元素使用HTM...
JS自定义对象创建与简单使用方法示例
11-28
本文实例讲述了JS自定义对象创建与简单使用方法。分享给大家供大家参考，具体如下： <html> <head> <title>js自定义函数</title> <meta charset="UTF-8"/> [removed] //创建自定义对象 //方法一: // var obj=new Object(); //方法二 var obj={}; obj.name="古河
javascript实现的动态添加表单元素input,button等(appendChild)
10-30
然后，我们可以使用`appendChild`方法将新创建的元素添加到已存在的DOM节点的子元素列表中。假设我们有一个ID为`add`的`div`元素，我们可以这样操作： ```javascript var TemO = document.getElementById("add"); ...
JavaScript实现动态添加Form表单元素的方法示例
10-19
在JavaScript中，动态添加Form表单元素是一种常见的需求，特别是在用户需要输入不确定数量的数据时，如上传文件、填写多条信息等。本文将详细介绍如何利用JavaScript实现动态添加表单元素，并提供一个具体示例，涉及...
【学习笔记】：DOM对象及事件绑定
01-08
DOM通过一系列的节点（包括元素、属性、文本等）构建了一个树形结构，使开发者可以方便地访问和操作文档的各个部分。W3C将DOM分为三个主要部分：核心DOM、XML DOM和HTML DOM，分别针对不同类型的文档。 二、DHTML与...
JavaScript(四)：JavaScript版的DOM总结
01-08
a、找到DOM节点：使用`getElementById`、`getElementsByClassName`、`querySelector`、`querySelectorAll`等方法可以定位到目标节点。 b、DOM修改：可以修改节点的内容、属性和样式，例如更改文本内容、设置元素的...
jQuery中dom元素上绑定的事件详解
10-24
在jQuery中，DOM元素上的事件绑定是实现交互性的重要手段。jQuery提供了多种方式来绑定事件，包括`click`、`change`、`mouseout`等基本事件以及`.bind()`、`.live()`等方法。这些方法允许开发者轻松地为HTML元素添加...
学习Bootstrap（2）—— 表单、按钮、图片等
lb569484787的博客
10-15 279
5.Bootstrap 表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。 创建基本表单的步骤： （1）向父 <form> 元素添加 role="form"。 （2）把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。 （3）向所有的文本元素 <input&g...
javascript 获取最后一个节点和上一个节点
淘淘小窝
01-19 4256
一点点记录
Js封装函数：获取下一个/上一个兄弟元素节点
高先生的猫
12-04 4519
要求： 获得下一个/上一个兄弟元素节点，不包括文本节点等 解决IE兼容性问题 代码实现： 获得下一个兄弟元素节点： function getNextElement(element) { var el = element; while (el = el.nextSibling) { if (el.nodeType === 1) { return el; } } return null; } ...
原生js获取节点
dl2295630178的专栏
04-18 9605
// 1 获取元素节点 // 通过id的方式( 通过id查找元素，大小写敏感，如果有多个id只找到第一个) document.getElementById('div1'); // 通过类名查找元素，多个类名用空格分隔,得到一个HTMLCollection(一个元素集合，有length属性，可以通过索引号访问里面的某一个元素) var cls = document.get
表单元素事件
weixin_43117402的博客
03-19 338
对于表单元素，有两种事件可以监听元素内容变化 — input 和 change。 只要在输入框里面输入值，就会触发input事件。而要等到输入框失去焦点，才会触发change事件。 事件 介绍 案例 change 当用户提交对元素值的更改时触发； change 事件不一定会对元素值的每次更改触发 1. checkbox 值修改以后2. select 选择后 3. input 内容修改并...
js取得当前节点的下一个节点
flamen087的博客
07-12 882
function reSize(){ document.getElementById("dialogArea").nextSibling.style.zIndex="299"; document.getElementById("dialogArea").style.zIndex="300"; window.parent.dyniframesize("bookingSegment"); } ...
JS获取节点的兄弟，父级，子级元素
热门推荐
hellogull
05-14 59万+
先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素。可以用： var a = docuemnt.getElementById("test").getElementsByTagName("div
JS原生 兄弟节点-前一个-后一个-任意一个-所有兄弟节点
MagicWing的博客
10-17 1万+
IE678 和 火狐与谷歌 的兼容问题 获取下一个兄弟节点 获取上一个兄弟节点 获取任意一个兄弟节点 获取所有兄弟节点
JavaScript浏览器文档事件详解：DOM操作与事件处理
在"part2 JS Browser Document Event.pdf"文档中，第二部分主要探讨了JavaScript在浏览器环境中的应用，特别是与文档相关的操作和事件处理。本章节深入讲解了以下几个核心知识点： 1. **浏览器环境与规范**：首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值