BOM编程与DOM编程以及表单校验
用于操作浏览器中的各种对象,不同浏览器定义上是有差别的,实现方式也会有不同。以下是Chrome浏览器各个BOM对象。
BOM常用对象
window:浏览器窗体对象
location:浏览器地址栏对象
history:历史记录对象
windows对象:
是BOM的核心,表示浏览器的一个实例。
只要是window的方法和属性,window对象名都可以省略。
window中与对话框有关的方法及作用
alert(“提示信息”): 弹出一个确认按钮的信息框。
string prompt(“提示信息”,"默认值”) :弹出一个输入信息框,返回字符串类型。
boolean confirm(“提示信息”) :弹出一个信息框,有确定和取消按钮。如果点确定,返回true,点取消返回false。
与计时有关的方法
- setTimeout(函数名, 间隔毫秒数)
在指定的时间后调用1次函数,只执行1次,单位是毫秒。返回值:返回一个整数类型的计时器
函数调用有两种写法:
- setTimeout(“函数名(参数)”, 1000);
- 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
注意:在实际开发中,我们一般不会自己写正则表达式,都是用别人写好的。