JS事件、Bom对象和Dom对象

4 JS事件、Bom对象和Dom对象

重点:

  • 事件类型
  • BOM对象的window对象方法
  • 表单
  • DOM对象

4.1 事件

  • 事件 (Event) 是 JavaScript 应用跳动的心脏 ,进行交互,使网页动起来。当我们与浏览器中 Web

页面进行某些类型的交互时,事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定

元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完

成,或者是用户滚动窗口或改变窗口大小。

  • 通过使用 JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响

应。

4.1.1 作用
  • 验证用户输入的数据。
  • 增加页面的动感效果。
  • 增强用户的体验度
4.1.2 事件中的名词
  • 事件源: 谁触发的事件 ,车,按钮
  • 事件名: 触发了什么事件 ,闯红灯,单击
  • 事件监听: 谁管这个事情,谁监视? ,交警,窗口
  • 事件处理:发生了怎么办 ,扣分罚款,执行函数
4.1.3 事件类型

JavaScript可以处理的事件类型为:鼠标事件、键盘事件、HTML事件。

http://www.w3school.com.cn/tags/html_ref_eventattributes.asp 用+查

Window 事件属性:针对 window 对象触发的事件(应用到 标签)

Form 事件:由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素,但最常用在

form 元素中)

Keyboard 事件 : 键盘事件

Mouse 事件:由鼠标或类似用户动作触发的事件

Media 事件:由媒介(比如视频、图像和音频)触发的事件(适用于所有 HTML 元素,但常见于

媒介元素中,比如 、、、 以及)

  • 几个常用的事件:

    onclick 、onblur 、onfocus 、onload 、onchange

    onmouseover、onmouseout、onkeyup、onkeydown

onload:当页面或图像加载完后立即触发 
onblur:元素失去焦点
onchange:用户改变域的内容
onfocus:元素获得焦点 
onclick:鼠标点击某个对象  
onmouseover:鼠标移动到某个元素上 
onmouseout:鼠标从某个元素上离开
onkeyup:某个键盘的键被松开 
onkeydown:某个键盘的键被按下
4.1.4 事件流和事件模型
  • 我们的事件最后都有一个特定的事件源,暂且将事件源看做是HTML的某个元素,那么当一个

HTML元素产生一个事件时,该事件会在元素节点与根节点之间按特定的顺序传播,路径所经过的节点

都会受到该事件,这个传播过程称为DOM事件流。

  • 事件顺序有两种类型:事件捕获事件冒泡
  • 冒泡和捕获其实都是事件流的不同表现,这两者的产生是因为IE和Netscape两个大公司完全不同

的事件流概念产生的。(事件流:是指页面接受事件的顺序)IE的事件流是事件冒泡,Netscape的事件

流是事件捕获流。

4.1.4.1 事件冒泡
  • IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接受,然后逐级向上传播到较为不具体 的节点(文档)。
  • 也就是说,click事件首先在div元素上发生,而这个元素就是我们单击的元素。然后,click事件沿 DOM树向上传播,在每一级节点上都会发生,直到传播到document对象。 div,body,html,document。
  • 所有现代浏览器都支持事件冒泡,但在具体实现上还是有一些差别。
4.1.4.2 事件捕获
  • Netscape提出的另一种事件流叫做事件捕获,事件捕获的思想是不太具体的节点应该更早接收到

事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。还

以前面的例子为例。那么单击元素就会按下列顺序触发click事件:document,html,body,div。

  • 虽然事件捕获是Netscape唯一支持的事件流模式,但很多主流浏览器目前也都支持这种事件流模

型。尽管“DOM2级事件”规范要求事件应该从document对象开始时传播,但这些浏览器都是从window

对象开始捕获的。

4.1.4.3 DOM 事件流
  • “DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首

先发生的是事件捕获阶段,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒

泡阶段,可以在这个阶段对事件做出响应。

JS事件、Bom对象和Dom对象_第1张图片

4.1.5 事件处理程序
  • 事件就是用户或浏览器自身执行的某种动作。例如click、load和mouseover都是事件的名字,而

响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以“on”开头,因此

click事件的事件处理程序就是onclick,为事件指定处理程序的方式有好几种。

4.1.5.1 HTML 事件处理程序
  • 某个元素支持的每种事件,都可以用一个与相应事件处理程序同名的HTML特性来指定。

  • 直接绑定在html元素中

  • 特点:
    与元素标签耦合度过高

  • 使用方式:

    注意:alert不点击会阻止下面代码的运行

			function fun1(){
				alert('123');//alert不点击会阻止下面代码的运行
                console.log('456');
			}
		
		<button type="button" onclick="fun1()" onmousemove="console.log('鼠标悬停')">HTML 事件处理程序button>
		<button type="button" onclick="alert('123');">HTML 事件处理程序1button>
4.1.5.2 DOM0 级事件处理程序
  • 通过JavaScript指定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。这

种方式被所有现代浏览器所支持。这种方式首先必须取得一个要操作的对象的引用,每个元素都有自己

的事件处理程序属性,这些属性通常全都小写,例如onclick,然后将这种属性的值设为一个函数,就可

以指定事件处理程序了。

  • 特点:
    不能为同一个元素绑定同一个事件的多个处理程序,会覆盖

    以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理

  • 使用方式

	1.通过id获取元素对象
		var 变量名 = document.getElementById("元素的id属性值");
	2.通过元素对象绑定事件
		变量名.on事件名 = function(){
				//处理程序
		}
  • 通过删除DOM0级方法指定的事件处理程序,只要将属性值 设为null即可

  • 报错Cannot set properties of null (setting ‘onmouseout’)

    解决办法:将DOM的读取部分的script放在body后面。或者在script标签中添加window.onload,等页面加载结束后再执行这一部分代码。

		//DOM0 级事件处理程序
		//1.获取元素对象
		var btn0 = document.getElementById("btn0");
		//绑定事件
		btn0.onmouseout = function(){
			console.log("鼠标移开1");
		}
		btn0.onmousemove = function(){
			console.log("鼠标移动");
		}
		/* btn0.onmouseout = function(){
			console.log("鼠标移开2");
		}//覆盖之前的 */

		//删除DOM0级方法指定的事件处理程序
		btn0.onmousemove = null;
		
		<button type="button" id='btn0'>DOM0 级事件处理程序button>
4.1.5.3 DOM2 级事件处理程序
  • “DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()

和removeEventListener()。所有DOM节点都包含这两个方法,并且他们都接受3个参数:要处理的事件

名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,则表示在捕获阶段调用

事件处理程序;如果是false则表示在冒泡阶段调用事件处理程序。 最后一个可以不写.

  • 使用方式
    1.通过id获取元素对象
    var 变量名 = document.getElementById(“元素的id属性值”);
    2.添加事件的监听
    变量名.addEventListener(‘事件名’,function(){
    //处理程序
    });

    变量名.addEventListener(‘事件名’,函数名);
    3.移除事件监听
    只能移除有函数名的处理程序
    变量名.removeEventListener(‘事件’,函数名);
		
		var btn3 = document.getElementById("btn3");
		var btn4 = document.getElementById("btn4");
		//添加事件的监听
		btn3.addEventListener('click',function(){
			console.log("DOM2 级事件处理程序  点击1");
		},false)
		
		btn3.addEventListener('click',click1,false);
		function click1(){
			console.log("DOM2 级事件处理程序  点击2");
		}
		
		//不写false也可以
		btn3.addEventListener('mouseover',function(){
				console.log("DOM2 级事件处理程序  悬停");
			});
			
		//按钮4点击删除按钮3的处理程序,需要有名字
		btn4.addEventListener('click',function(){
			btn3.removeEventListener('click',click1);
		})
		
		<button type="button" id="btn3">按钮3 DOM2 级事件处理程序button>
		<button type="button" id="btn4">按钮4 删除按钮3的事件button>

4.2 BOM对象

  • BOM的核心对象是window,它表示浏览器的一个实例。window对象有双重角色,它既是通过 JavaScript访

    问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。这意味着在网页中定义的 任何一个对象、变

    量和函数,都以window作为其Global对象,因此有权访问parseInt()等方法。如果页 面中包含框架,则每个

    框架都拥有自己的window对象,并且保存在frames集合中。在frames集合中, 可以通过数值索引(从0开

    始,从左至右,从上到下)或者框架的名称来访问相应的window对象。

4.2.1 Window对象方法
4.2.1.1 系统对话框
  • 浏览器通过(实际是window对象的方法)alert()、confirm()、prompt()方法可以调用系统对话

框向用户显示消息。

消息框:alert, 常用。
	 alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
输入框:prom返回提示框中的值。
	prompt() 方法用于显示可提示用户进行输入的对话框。
		参数(可选):
			第一个参数:要在对话框中显示的纯文本。
			第二个参数:默认的输入文本。
确认框:confirm,返回 true/false.
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
	<body>
		<button type="button" onclick="fun()">按钮button>
		<script type="text/javascript">
			function fun(){
				//消息框
				//alert('欢迎');
				
				//输入框
				//window加不加都可以
				/* var uname = window.prompt('请输入用户名');
				if(uname == 'admin'){
					alert("欢迎超级用户:"+uname);
				}else{
					alert("欢迎普通用户:"+uname);
				} */
				
				// 确认框
				var flag = confirm('确认删除这条记录吗?')
				if(flag){
					alert('删除成功');
				}
			}
		script>
	body>
4.2.1.2 打开窗口
  • window.open()方法既可以导航到一个特定的URL也可以用来打开一个新的窗口
  • window.open(); 打开一个空的窗口
    window.open(url地址); 打开链接
<body>
		<button type="button" onclick="fun()">按钮button>
		<script type="text/javascript">
			function fun(){
				//打开一个空的窗口
				//window.open();
				//打开一个在线地址
				// window.open("http://www.baidu.com");
				//打开一个本地地址
				//window.open("01 弹出框.html");
				// 当前窗口打开在线地址
				window.open("http://www.baidu.com","_self")
			}
				
		script>
	body>
4.2.1.3 关闭窗口
  • window.close():关闭窗口。

		
		
	
4.2.1.4 时间函数

1 setTimeOut

  • setTimeout() : 在指定的毫秒数后调用函数或计算表达式。返回一个唯一的标识;也可以通过返 回的标识clearTimeout(id): 来清除指定函数的执行。
  • 在times毫秒后执行function指定的方法,执行之前也可以取消
		

2 setInteval()

  • setInterval():可按照指定的周期(以毫秒计)来调用函数或计算表达式,也可根据返回的标识用

来结束。该方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

		setInterval(function() {
				console.log("setInteval 2 秒");
			}, 2000)

3 时间例子

		<button type="button" onclick="startTime()">开始button>
		<button type="button" onclick="closeTime()">结束button>
		
		<h2 id="h2">h2> 
		<script type="text/javascript">
			
			//开启时间函数,循环的写出时间
			function startTime(){
				id = setInterval(writeTime,1000);
			}
			
			//时间停止
			function closeTime(){
				//清除时间函数
				clearInterval(id);
			}
			
			//获取时间写出时间到页面中
			function writeTime(){
				//获取到当前时间
				var date = new Date();
				
				//格式化时间
				var str = format(date);
				
				//写出在页面中      设置元素的值/内容:对象.innerHTML = 值;
				/* var h2 = document.getElementById("h2");
				h2.innerHTML = str; */
				//变色
				if(date.getSeconds() == 0){
					//设置样式
					document.getElementById("h2").style.color = "red";
				}else{
					document.getElementById("h2").style.color = "black";
				}
					document.getElementById("h2").innerHTML = str;
				
			}
			
			//格式化时间的函数
			function format(date){
				var year = date.getFullYear();
				var month = date.getMonth()+1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds() < 10 ?  ("0"+date.getSeconds()) : date.getSeconds();
				
				var str = year +"-"+ month +"-"+ day +" "+ hour +":"+ minute +":"+ second;
				return str
			}
		script>
4.2.2 history对象
  • history 对象是历史对象。包含用户(在浏览器窗口中)访问过的 URL。history 对象是 window

对象的一部分,可通过 window.history 属性对其进行访问。

  • history对象的属性:length,返回浏览器历史列表中的 URL 数量。
  • history对象的方法:
    • back():加载 history 列表中的前一个 URL。
    • forward():加载历史列表中的下一个 URL。当页面第一次访问时,还没有下一个url。
    • go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1),到上一个页面
<body>
		head>
		<h2>1号页面h2>
		<a href="04 history2.html">跳转到2号页面a>
		<button type="button" onclick="fun()">forward前进button>
		<script type="text/javascript">
			console.log(window.history.length);
			
			function fun(){
				window.history.forward();
			}
		script>
	body>
<body>
		<h2>2号页面h2>
		<a href="04 history3.html">跳转到3号页面a>
		
		<button type="button" onclick="fun1()">back后退button>
		<button type="button" onclick="fun2()">forward前进button>
		<script type="text/javascript">
			console.log(window.history.length);
			
			function fun1(){
				window.history.back();
			}
			function fun2(){
				window.history.forward();
			}
			script>
	body>
<body>
		<h2>3号页面h2>
		
		<button type="button" onclick="fun1()">go跳转button>
		<button type="button" onclick="fun2()">back后退button>
		<script type="text/javascript">
			console.log(window.history.length);
			
			function fun1(){
				window.history.go(-2);
			}
			
			function fun2(){
				window.history.back();
			}
		script>		
	body>
4.2.3 location对象
  • location 对象是window对象之一,提供了与当前窗口中加载的文档有关的信息,还提供了一些

导航功能。也可通过 window.location 属性来访问。

  • location 对象的属性

    href:设置或返回完整的 URL

    window.location.href 获取当前页面地址

  • location 对象的方法

    reload():重新加载当前文档。

    replace():用新的文档替换当前文档。

<body>
		<button type="button">按钮button>
		<button type="button" onclick="window.location.reload()">重新加载button>
		<button type="button" onclick="location.replace('http://www.baidu.com')">替换button>
		<script type="text/javascript">
			console.log(window.location.href);
			<!-- window.location.href="http://www.baidu.com"; -->
		script>
	body>

4.3 DOM对象

  • DOM:Document Object Model 文档对象模型
  • 要实现页面的动态交互效果,bom 操作远远不够,需要操作 html 才是核心。如何操作 htm,就 是 DOM。简单的说,dom 提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化 的节点树,运行开发人员添加、移除和修改页面的某一部分。dom 处于javascript 的核心地位上。
  • 每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中 对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
4.3.1 节点
  • 加载 HTML 页面时,Web 浏览器生成一个树型结构,用来表示页面内部结构。DOM 将这种树型 结构理解为由节点组成,组成一个节点树。对于页面中的元素,可以解析成以下几种类型的节点:
节点类型 HTML内容 例如
文档节点 文档本身 整个文档 document
元素节点 所有的HTML元素 ,
,

属性节点 HTML元素内的属性 id、href、name、class
文本节点 元素内的文本 hello
注释节点 HTML中的注释
4.3.2 操作元素的节点
  • 当HTML文档在被解析为一颗DOM树以后,里面的每一个节点都可以看做是一个一个的对象,我 们称为DOM对象,对于这些对象,我们可以进行各式各样的操作,查找到某一个或者一类节点对象,可 以创建某种节点对象,可以在某个位置添加节点对象,甚至可以动态地删除节点对象,这些操作可以使 我们的页面看起来有动态的效果,后期结合事件使用,就能让我们的页面在特定时机、特定的事件下执 行特定的变换。
4.3.2.1 获取节点
  • 在进行增、删、改的操作时,都需要指定到一个位置,或者找到一个目标,此时我们就可以通过 Document对象提供的方法,查找、定位某个对象(也就是我们说的节点)。

  • 注意:a标签正常会执行跳转的操作,设置href=“javascript:void(0)” 表示伪协议 将不会跳转

    操作 dom 必须等节点初始化完毕后,才能执行。

​ 处理方式两种:

把 script 调用标签移到html末尾即可; 

使用onload事件来处理JS,等待html 加载完毕再加载 onload 事件里的 JS。
window.onload = function () { //预加载 html 后执行}; 1
  • getElementById() 根据id获取dom对象,如果id重复,那么以第一个为准
  • getElementsByTagName() 根据标签名获取dom对象数组
  • getElementsByClassName() 根据样式名获取dom对象数组
  • getElementsByName() 根据name属性值获取dom对象数组,常用于多选获取值
	<body>
		<p id="p1" class="para">这是一个段落<span>文本span>p>
		<p id="p1" class="para">这又是一个段落p>
		<input type="text" name="txt" />
		<input type="checkbox" name="hobby" value="游泳" />游泳
		<input type="checkbox" name="hobby" value="篮球" />篮球
		<input type="checkbox" name="hobby" value="足球" />足球
		<hr />
		
		<a href="javascript:testById()">按照id获取a>
		<a href="javascript:void(0)" onclick="testByName()">按照name获取a>
		<a href="javascript:void(0)" onclick="testByTagName()">按照标签名获取a>
		<a href="javascript:void(0);" onclick="testByClass();">按照class获取a>
		
		<script type="text/javascript">
			//加载事件
			/* window.onload = function(){
				var p = document.getElementById("p1");
				console.log(p);
			} */
			
			//按照id获取
			function testById(){
				var p1 = document.getElementById("p1");
				console.log(p1);
			}
			
			//按照name获取
			function testByName(){
				var hobby = document.getElementsByName("hobby");
				console.log(hobby);
				
				//确定一个,可以后面加一个[0]
				var txt = document.getElementsByName("txt")[0];
				console.log(txt);
			}
			
			//按照标签名获取
			function testByTagName(){
				var input = document.getElementsByTagName("input");
				console.log(input);
			}
			
			//按照class获取
			function testByClass(){
				var para = document.getElementsByClassName("para");
				console.log(para);
			}
		script>
	body>
4.3.2.2 创建节点和插入节点

很多时候我们想要在某个位置插入一个新的节点,此时我们首先需要有一个节点存在,可以通过

以下几种方式创建新节点。

  • 创建节点

    • createElement() 创建一个新的节点,需要传入节点的标签名称,返回创建的元素对象
    • createTextNode() 创建一个文本节点,可以传入文本内容
    • innerHTML 也能达到创建节点的效果,直接添加到指定位置了,需要的是文本字符串
  • 插入节点

    • write() 将任意的字符串插入到文档中

    • appendChild() 向元素中添加新的子节点,作为最后一个子节点 ,如果追加的元素不存在,则添加新的;如果追加的元素存在,则会将原有的元素添加到新的位置(剪切),需要的是节点

    • insertBefore() 向指定的已有的节点之前插入新的节点,前面写需要插入的节点,后面写被插入节点
      parent.insertBefore(zjl,select);

      ​ newItem:要插入的节点
      ​ exsitingItem:参考节点 需要参考父节点

<body>
		<button onclick="addPara();">添加段落button>
		<button onclick="addImg();">添加图片button>
		<button onclick="addTxt();">添加文本框button>
		<button onclick="addOptions()">添加选项button>
		<select name="music">
			<option value="-1">你心内的一首歌option>
			<option value="0">南山南option>
			<option value="1">喜欢你option>
		select>
		<hr />
		<div id="container">div>
		
		
		<span>周杰伦span>
		<script type="text/javascript">
			
			//获取需要添加节点的位置
			var div = document.getElementById("container");
			//添加段落,设置内容   
			function addPara(){
				//方式一
				//创建元素节点
				/* var p = document.createElement("p");
				//创建文本节点
				var text = document.createTextNode("段落标签");
				//将文本节点追加到元素节点的内部
				p.appendChild(text);
				console.log(p);
				//将元素追加到div的内部
				div.appendChild(p); */
				
				//方式二
				/* var p = document.createElement("p"); 
				p.innerHTML= "段落方式二";
				console.log(p);
				//将元素追加到div的内部
				div.appendChild(p); */
				
				//方式三
				var p = "

段落方式三

"
; //给div设置内容 div.innerHTML += p; } //添加图片,要设置属性 function addImg(){ //方式一 //创建一个图片 /* var img = document.createElement("img"); //设置图片属性 img.src = "img/11.png"; img.width = "100"; img.height = "100"; //将图片追加到指定位置 div.appendChild(img); */ //方式二 //创建一个图片 /* var img = document.createElement("img"); //设置图片属性 img.setAttribute("src","img/11.png"); img.setAttribute("width","100"); img.setAttribute("height","100"); //将图片追加到指定位置 div.appendChild(img); */ //方式三 var str = ""; div.innerHTML += str; } //添加文本框,要设置属性 function addTxt(){ //方式一 var input = document.createElement("input"); input.type = 'text'; input.name = 'uname'; div.appendChild(input); //方式二 // setAttribute设置属性 /* input.setAttribute("type",'text'); div.appendChild(input); */ } //添加选项 function addOptions(){ //用户输入歌曲名称 var sname = prompt("请输入歌曲名称"); //获取下拉框的节点 var select = document.getElementsByName("music")[0]; //方式一 //创建下拉选项 /* var option = document.createElement("option"); //设置下拉选项的内容 option.innerHTML = sname; //设置属性 option.value = 2; //将下拉选项追加到下拉框中 select.appendChild(option); */ /* //方式二 var options = select.options; //下拉框的所有下拉选项 //创建下拉选项 var newOption = document.createElement("option"); newOption.innerHTML = sname; //将选项添加到下拉框数组中 options.add(newOption); */ //方式三 /* var options = select.options; //下拉框的所有下拉选项 //创建下拉选项 var newOption = new Option();//生成了一个标签 console.log(newOption); newOption.innerHTML = sname; //将选项添加到下拉框数组中 options.add(newOption); */ } //将任意的字符串插入到文档中 // document.write("到爱打架欧艾斯"); //insertBefore //获取目标位置 var select = document.getElementsByName("music")[0]; //获取需要移动的元素节点 var zjl = document.getElementsByTagName("span")[0]; //参考父节点 var parent = select.parentElement; //前面写需要插入的节点,后面写被插入节点 parent.insertBefore(zjl,select);
script> body>
4.3.2.3 间接查找节点
  • childNodes 返回元素的一个子节点的数组
  • firstChild 返回元素的第一个子节点
  • lastChild 返回元素的最后一个子节点
  • nextSibling 返回元素的下一个兄弟节点
  • parentNode 返回元素的父节点
  • previousSibling 返回元素的上一个兄弟节点
<body>
		<div id="div1">
			<span>span 1号span><span>span 2号span>
			<div>块级元素div>
		div><span>兄弟节点span>
		
		<script type="text/javascript">
			var div1 = document.getElementById("div1");
			//childNodes
			var childNodes = div1.childNodes;
			console.log(childNodes);//NodeList(6) [text, span, span, text, div, text]
			//firstChild
			console.log(div1.firstChild);//#text
			//lastChild
			console.log(div1.lastChild);//#text
			//nextSibling
			console.log(div1.nextSibling);//span,span下来就是#text
			//parentNode
			console.log(div1.parentNode);//body
			//previousSibling
			console.log(div1.previousSibling);//#text
		script>
	body>
4.3.2.4 删除节点
  • removeChild() 从元素中移除子节点
  • 目标节点.父节点.removeChild(目标节点);
<body>
		<div>div元素div>
		<button type="button" onclick="fun()">删除divbutton>
		<script type="text/javascript">
			function fun(){
				//获取目标节点
				var div = document.getElementsByTagName("div")[0];
				//删除
				div.parentElement.removeChild(div);
			}
		script>
	body>

4.4 表单

表单是我们页面向后台传输数据的一种非常常见的方式,在进行数据发送(请求发出)之前,我

们应该现在页面进行一系列数据合法性的验证,节省不必要的错误数据的传输,以及提高用户的体验

度。

4.4.1 获取表单

会第一个就行

  • document.表单名称
  • document.getElementById(表单 id);
  • document.forms[表单名称]
  • document.forms[索引]; //从 0 开始
<body>
		<form id='myform' name="myform"  action="" method="post">form>
		<form id='myform2' name="myform2" action="" method="post">form>
		
		<script type="text/javascript">
			//document.表单名称
			var myform = document.myform;
			console.log(myform);
			
			//document.getElementById(表单 id);
			var myform2 = document.getElementById("myform2");
			console.log(myform2);
			
			//document.forms[表单名称],不写[]是全部表单
			var myform3 = document.forms["myform"];
			console.log(myform3);
			
			//document.forms[索引]; //从 0 开始
			console.log(document.forms[1]);
		script>
	body>
4.4.2 元素分类
  • 表单元素
    元素节点.value 取值
    元素节点.value = 值 设置值/内容
  • 非表单元素
    元素节点.innerHTML = 值 设置值/内容
    元素节点.innerHTML 取值/内容
4.4.3 获取input元素

如 text password hidden textarea等,前两种常用。

  • 通过 id 获取:document.getElementById(元素 id);
  • 通过 form.名称形式获取: myform.元素名称; name属性值
  • 通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
  • 通过 tagName 数组 :document.getElementsByTagName(‘input’)[索引] // 从0开始
<body>
		<form id='myform' name="myform" action="" method="get">
			姓名:<input type="text" id="uname" name="uname" value="zs" /><br />
			密码:<input type="password" id="upwd" name="upwd" value="1234" /><br />
			<input type="hidden" id="uno" name="uno" value="隐藏域" />
			个人说明:<textarea name="intro">textarea>
			<button type="button" onclick="getTxt();">获取元素内容button>
		form>
		
		<script type="text/javascript">
			//获取元素内容
			function getTxt(){
				//通过 id 获取:document.getElementById(元素 id);
				var name = document.getElementById("uname");
				console.log(name);
				
				//通过 form.名称形式获取: myform.元素名称;    name属性值
				var form = document.myform;
				console.log(form.upwd);
				console.log(form.upwd.value);//1234
				
				//通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
				var uno = document.getElementsByName("uno")[0];
				console.log(uno.value);//隐藏域
				
				//通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始
				var inputs = document.getElementsByTagName("input");
				console.log(inputs[1].value);//1234
			}
		script>
4.4.4 获取单选按钮
  • 前提:将一组单选按钮设置相同的name属性值
  • 属性值为true表示被选中,否则未被选中
    选中状态设定: checked=‘checked’ 或 checked=‘true’ 或 checked
    未选中状态设定: 没有checked属性 或 checked=‘false’
<body>
		<form action="" name="myform">
			<input type="text" name="inputName" value="aaa" />
			<input type="radio" name="rad" value="1" />	1
			<input type="radio" name="rad" value="2"  /> 2
			<button type="button" onclick="getRadio();">获取元素内容button>
		form>
		
		<script type="text/javascript">
			//获取单选按钮选中项
			function getRadio(){
				var radios = document.getElementsByName("rad");
				//必选第一个
				//radios[0].checked = 'checked'
				for(var i = 0; i < radios.length; i++){
					if(radios[i].checked){
						console.log(radios[i].value);
					}
				}
			}
		script>
	body>
4.4.5 获取多选按钮

操作方式与单选同理,不同之处在于可以多选

<body>
		
		<form action="" name="myform">
			<input type="text" name="inputName" value="aaa" />
			<input type="checkbox" name="hobby" value="1" />	1
			<input type="checkbox" name="hobby" value="2"  /> 2
			<input type="checkbox" name="hobby" value="3"  /> 2
			<button type="button" onclick="getCheckbox();">获取多选选中项button>
		form>
		
		
		<script type="text/javascript">
			
			//获取多选按钮选中项
			function getCheckbox(){
				var hobbys = document.getElementsByName("hobby");
				var str = '';
				for(var i = 0; i < hobbys.length; i++){
					if(hobbys[i].checked){
						str += hobbys[i].value + ',';
					}
				}
				console.log(str.substring(0,str.length-1));
			}
			
		script>
	body>
4.4.6 获取下拉选项
  • 获取 select 对象

    var ufrom = document.getElementById("ufrom");
    
  • 获取选中项的索引:

    var idx = ufrom.selectedIndex;
    
  • 获取选中项的索引

    var val = ufrom.options[idx].value;
    

    注意:当通过options获取选中项的value属性值时,

    若没有value属性,则取option标签的内容

    若存在value属性,则取value属性的值

  • 获取选中项

    var txt = ufrom.options[idx].text;
    
  • 选中状态设定:selected=‘selected’、selected=true、selected

    未选中状态设定:不设selected属性

<body>	
		<form id='myform' name="myform" action="" method="">		
			来自:
			<select id="ufrom" name="ufrom">
				<option value="-1" >请选择option>
				<option value="0" selected="selected">北京option>
				<option value="1">上海option>
			select><br />
			<button type="button" id="sub" name="sub">提交button>
		form>
		
		<script type="text/javascript">
			
			//获取下拉选项
			document.getElementById("sub").onclick = function(){
				//获取下拉框
				var select = document.getElementById("ufrom");
				//获取下拉框的选项数组
				var options = select.options;
				//获取选中项的索引
				var index = select.selectedIndex;
				//获取选中项
				var selectedOp1 = options[index].text;//获取值
				var selectedOp2 = select.value;  //通过下拉框对象获取选中项的value
				console.log(selectedOp1);//北京
				console.log(selectedOp2);//0
			}
		script>
	body>
4.4.7 提交表单
  • 使用普通button按钮+onclick事件+事件中编写代码:
    获取表单.submit();
  • 使用submit按钮 + οnclick=“return 函数()” +函数编写代码:
    最后必须返回:return true|false;
  • 使用submit按钮/图片提交按钮 + 表单οnsubmit=“return 函数();” +函数编写代码:
    最后必须返回:return true|false;
<body>
		
		<form id='myform1' name="myform2" action="http://baidu.com" method="get">	
			<input  name="test"  id="uname"/>  <span id="msg">span><br />
			
			<input type="button" onclick="sub();" value="提交表单1" />
		form>
		
		<form id='myform1' name="myform3" action="http://baidu.com" method="get">
			<input  name="test"  id="uname2"/>  <span id="msg2">span><br />
			
			<input type="submit" onclick="return sub2()" value="提交表单2" />
		form>
		
		<form id='myform1' name="myform4" action="http://baidu.com" onsubmit="return sub4()" method="get">
			<input  name="test"  id="uname4"/>  <span id="msg4">span><br />
			
			<input type="submit" value="提交表单3" />
		form>
		
		<script type="text/javascript">
			//使用普通button按钮+onclick事件+事件中编写代码:
			function sub(){
				//获取表单对象
				var myform2 = document.myform2;
				//获取用户输入的数据
				var uname = document.getElementById("uname").value;
				if(uname == undefined || uname.trim() == ""){
					//提醒用户理由
					document.getElementById("msg").innerHTML = "用户名不能为空";
					document.getElementById("msg").style.color = "red";
					//不能提交,阻止代码运行
					return;
				}
				
				//手动提交表单
				myform2.submit();
			}
		
			//使用submit按钮 + οnclick="return 函数()" +函数编写代码: 
			function sub2(){
				//获取表单对象
				var myform3 = document.myform3;
				//获取用户输入的数据
				var uname = document.getElementById("uname2").value;
				if(uname == undefined || uname.trim() == ""){
					//提醒用户理由
					document.getElementById("msg2").innerHTML = "用户名不能为空";
					document.getElementById("msg2").style.color = "red";
					//不能提交,阻止代码运行
					return false;
				}
				return true;
			}
		
			//使用submit按钮 + οnclick="return 函数()" +函数编写代码:
			function sub4(){
				//获取表单对象
				var myform4 = document.myform4;
				//获取用户输入的数据
				var uname = document.getElementById("uname4").value;
				if(uname == undefined || uname.trim() == ""){
					//提醒用户理由
					document.getElementById("msg4").innerHTML = "用户名不能为空";
					document.getElementById("msg4").style.color = "red";
					//不能提交,阻止代码运行
					return false;
				}
				return true;
			}
		script>
	body>

你可能感兴趣的:(java中级,前端)