JavaScript(三):DOM编程
1. 概述:javascript共分为三大块:ECMAScript(基础)、DOM、BOM;
-
ECMAScript:ECMA制定的262标准,是JS的核心语法;
-
DOM(Document Object Model):文档对象模型,通过JS对HTML的dom结点进行操作。
- 通俗来讲:DOM是操作网页文档(HTML)的结点,对文档进行增删改就是DOM编程;
-
BOM(Browser Object Model):浏览器对象模型,对网页的事件、地址、链接都属于BOM编程;
-
BOM和DOM的关联:
-
BOM*对象:Window
DOM*对象:Document
-
BOM包括DOM,如下图;
-
2. innerText和innnerHTML
sam:都是设置元素内部的内容;
diff:innerText会把后面字符串全部输出到页面;
innerHTML会把后面字符串当做HTML代码执行解释并执行;
3. 正则表达式(Regular Expression)
js创建正则表达式对象:
//第一种;
var regExp = /正则表达式/flags;
//第二种,使用内置支持类RegExp
var regExp = new RegExp(“正则表达式”,“flags”);
//关于“flags”:
flags有三个参数:
1. g:全局匹配
2. i :忽略大小写
3. m:多行搜索;当前面字符串不是正则表达式时,禁用m;
js调用正则表达式对象函数:
<body>
<script type="text/javascript">
window.onload = function () {
document.getElementById("btn").onclick = function () {
var values = document.getElementById("textBox").value;//获取到文本框的(values)值
var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;//邮箱正确表示的正则表达式
var ok = reg.test(values);//调用正则表达式的test函数来匹配输入值是否与正则表达式类型匹配;
if (!ok) {
document.getElementById("test_error").innerText = "邮箱错误";
}
}
document.getElementById("textBox").onfocus = function () {
document.getElementById("test_error").innerText = '';
}
}
</script>
<input type="text" id="textBox"/>
<br>
<input type="button" value="验证邮箱" id="btn"/>
<span id="test_error" style="color: red;font-size: 12px;"></span>
</body>
js使用正则表达式扩展函数:
//案例:老版本IE浏览器没有去除空白的函数,我们这里使用prototype关键字扩展一个。
//“/^\s+|\s+$/”:表示前后空白;g:表示全局匹配;
String.prototype.trim = function (){
return this.replace(/^\s+|\s+$/g,"");
}
js扩展函数再强调
js表单验证(重点)
内置函数、类:
- Ayyar(了解)
- Date(了解)
- setlnterval(设置周期函数,了解)