BOM编程与DOM编程以及表单校验

用于操作浏览器中的各种对象,不同浏览器定义上是有差别的,实现方式也会有不同。以下是Chrome浏览器各个BOM对象。
BOM编程与DOM编程以及表单校验BOM常用对象
window:浏览器窗体对象
location:浏览器地址栏对象
history:历史记录对象

windows对象:

是BOM的核心,表示浏览器的一个实例。
只要是window的方法和属性,window对象名都可以省略。

window中与对话框有关的方法及作用
alert(“提示信息”): 弹出一个确认按钮的信息框。
string prompt(“提示信息”,"默认值”) :弹出一个输入信息框,返回字符串类型。
boolean confirm(“提示信息”) :弹出一个信息框,有确定和取消按钮。如果点确定,返回true,点取消返回false。

与计时有关的方法

  • setTimeout(函数名, 间隔毫秒数)
    在指定的时间后调用1次函数,只执行1次,单位是毫秒。返回值:返回一个整数类型的计时器
    函数调用有两种写法:
  1. setTimeout(“函数名(参数)”, 1000);
  2. setTimeout(函数名,1000, 参数);
    注意方式二:没有引号,没有括号
  • setInterval(函数名, 间隔毫秒数)
    每过指定的时间调用1次函数,不停的调用函数,单位是毫秒。返回值:返回一个整数类型的计时器。
  • clearInterval(计时器)
    清除setInterval()方法创建的计时器
  • clearTimeout(计时器)
    清除setTimeout创建的计时器

修改元素内容的几种方法和属性:

  • 方法:document.getElementById(“id”)
    通过id得到一个元素,如果有同名的元素则得到第1个
  • 属性:innerHTML
    获得:元素内部的HTML
    设置:修改元素内部的HTML
  • 属性:innerText
    获得:元素内部的文本
    设置:修改元素内部的纯文本,其中的html标签不起作用

location对象

代表浏览器的地址栏。

location常用属性:
href属性:获得当前地址栏访问的地址。
设置href属性:用于页面的跳转,跳到一个新的页面。

location常用方法:
reload():重新加载当前页面,相当于浏览器上的刷新按钮。

history对象
访问浏览器之前已经访问过的页面
forward():类似于浏览器上的前进按钮。
back() 类似于浏览器上后退按钮
go() 正数或负数,go(1)相当于forward(),go(-1)相当于back()

DOM编程

Document Object Model 文档对象模型,用于操作网页中元素。
DOM编程的作用
每个HTML页面在被浏览器解析的时候都会在内存中创建一棵DOM树,我们通过编写JS代码就可以访问这棵树上任何一个节点,并且对节点进行操作。通过 DOM模型,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。新创建的元素对象,要挂到DOM树上才可以在网页上显示出来。

查找节点:
获取元素的方法与作用

  • document.getElementById(“id”) 通过id属性到唯一的元素如果页面上有多个同名的id,则得到第1个元素
  • document.getElementsByName(“name”) 通过name属性得到一组标签,返回一个数组
  • document.getElementsByTagName (“标签名”) 通过标签名字得到一组标签,返回一个数组
  • document.getElementsByClassName(“类名”) 通过类名得到一组标签,返回一个数组

js操作css样式
在js中操作css属性命名上的区别
color color 一个单词的样式写法是相同
font-size fontSize 驼峰命名法,首字母小写,第二个单词以后首字母大写

表单校验

一个表单内容填完之后,我们需要对表单中的信息进行校验,校验通过之后才能提交表单,要做表单校验需要先了解js中的一个内置对象:正则对象。
正则对象:
创建的方式:
一、正则表达式是JS中是一个类:RegExp = Regular Expression 正则表达式var reg=new RegExp(“正则表达式”);
二、以/开头,以/结尾,中间的部分就是正则表达式var reg=/正则表达式/;
两种方式的区别:
在js中,正则表达式的两种声明方式对于“\d,\D”之类的匹配模式中,前者需要转义,后者无需转义。
前者支持字符串拼接,支持变量,更加灵活;后者对于固定的表达式,书写起来更加快捷,更加直观。

常用方法:
boolean test(“字符串”) 如果正则表达式匹配字符串,返回true,否则返回false

Java中也有正则表达式,默认情况下必须要精确匹配 ;而在JS中默认是模糊匹配,只要字符串包含了正则表达式的内
容就返回true
BOM编程与DOM编程以及表单校验
注意:在实际开发中,我们一般不会自己写正则表达式,都是用别人写好的。