JS(事件,BOM,DOM,表单)

JS(事件,BOM,DOM,表单)

JS(事件,BOM,DOM,表单)_第1张图片

1. 事件与事件流

事件是 JavaScript 应用跳动的心脏 ,进行交互,使网页动起来。作用上可以验证用户输入的数据,增加页面的动感效果,增强用户的体验度。

几种常见的事件:

  • onload:当页面或图像加载完后立即触发
  • onblur:元素失去焦点
  • onfocus:元素获得焦点
  • onclick:鼠标点击某个对象
  • onchange:用户改变域的内容
  • onmouseover:鼠标移动到某个元素上
  • onmouseout:鼠标从某个元素上离开
  • onkeyup:某个键盘的键被松开
  • onkeydown:某个键盘的键被按下

我们的事件最后都有一个特定的事件源,暂且将事件源看做是HTML的某个元素,那么当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会受到该事件,这个传播过程称为DOM事件流。事件流分为事件冒泡与事件捕获,以下面的代码为例:


<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScripttitle>
	head>
	<body>
		<div id="myDiv">Click mediv>
	body>
html>

事件冒泡,即事件开始时由最具体的元素接受,然后逐级向上传播到较为不具体的节点(文档);事件捕获与之相对应是相反方向,具体见下图:

JS(事件,BOM,DOM,表单)_第2张图片

2. BOM

BOM即浏览器对象模型,核心对象是window,它表示浏览器的一个实例。

2.1 Window对象

Window对象的方法有以下几种:

  • alert() :方法用于显示带有一条指定消息和一个 OK 按钮的警告框
  • prompt() :方法用于显示可提示用户进行输入的对话框
  • confirm() :方法用于显示一个带有指定消息和 OK 及取消按钮的对话框
  • window.open():方法既可以导航到一个特定的URL也可以用来打开一个新的窗口
  • window.close():关闭窗口
  • setTimeout() : 在指定的毫秒数后调用函数或计算表达式。返回一个唯一的标识;也可以通过返回的标识clearTimeout(id)方法 来清除指定函数的执行
  • setInterval():可按照指定的周期(以毫秒计)来调用函数或计算表达式,也可根据返回的标识用来结束。该方法会不停地调用函数,直到 clearInterval(id) 被调用或窗口被关闭

2.2 history对象

history对象的方法有以下几种:

  • back():加载 history 列表中的前一个 URL
  • forward():加载历史列表中的下一个 URL,当页面第一次访问时,还没有下一个url
  • go(number|URL):URL 参数使用的是要访问的 URL,而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置,例如go(-1)是到上一个页面

2.3 local对象

local对象有一个属性为herf,可设置或返回完整的 URL。

local对象的方法:

  • reload():重新加载当前文档
  • replace():用新的文档替换当前文档

3. DOM对象

DOM即文档对象模型,每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

3.1 节点

节点有以下几种类型:

节点类型 HTML内容
文档节点 文档本身 整个文档 document
元素节点 所有的HTML元素

属性节点 HTML元素内的属性 id、href、name、class
文本节点 元素内的文本 hello
注释节点 HTML中的注释

3.2 操作节点的方法

获取节点的方法:

  • getElementById():根据id获取dom对象,如果id重复,那么以第一个为准
  • getElementsByTagName():根据标签名获取dom对象数组
  • getElementsByClassName():根据样式名获取dom对象数组
  • getElementsByName():根据name属性值获取dom对象数组,常用于多选获取值

创建节点的方法:

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

插入节点的方法:

  • appendChild():向元素中添加新的子节点,作为最后一个子节点

根据属性间接查找节点的方法:

方法|属性 描述
childNodes 返回元素的一个子节点的数组
firstChild 返回元素的第一个子节点
lastChild 返回元素的最后一个子节点
nextSibling 返回元素的下一个兄弟节点
parentNode 返回元素的父节点
previousSibling 返回元素的上一个兄弟节点

删除节点的方法:

  • removeChild():从元素中移除子节点

4. 表单

获取表单的方法:

  • document.表单名称
  • document.getElementById(表单 id)
  • document.forms[表单名称]
  • document.forms[索引]

获取input元素的方法:

  • document.getElementById(元素 id)
  • myform.元素名称
  • document.getElementsByName(name属性值)[索引]
  • document.getElementsByTagName(‘input’)[索引]

获取单选按钮的方法:

  • document.getElementsByName(“name属性值”)

获取多选按钮的方法:

  • document.getElementsByName(“name属性值”)

获取下拉选项的方法:

(1)获取 select 对象:

var ufrom = document.getElementById("ufrom");

​ (2)获取选中项的索引:

var idx = ufrom.selectedIndex;

​ (3)获取选中项 options 的 value属性值:

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

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

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

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

​ (4)获取选中项 options 的 text:

var txt = ufrom.options[idx].text;

​ 选中状态设定:selected=‘selected’、selected=true、selected

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

提交表单的方法:

(1)使用普通button按钮+onclick事件+事件中编写代码:

	 获取表单.submit();

(2)使用submit按钮 + οnclick=“return 函数()” +函数编写代码:

​ 最后必须返回:return true|false;

(3)使用submit按钮/图片提交按钮 + 表单οnsubmit=“return 函数();” +函数编写代码:

​ 最后必须返回:return true|false;

你可能感兴趣的:(Java前端,js,javascript)