JavaScript(三):DOM编程

JavaScript(三):DOM编程

1. 概述:javascript共分为三大块:ECMAScript(基础)、DOM、BOM;

  1. ECMAScript:ECMA制定的262标准,是JS的核心语法;

  2. DOM(Document Object Model):文档对象模型,通过JS对HTML的dom结点进行操作。

    • 通俗来讲:DOM是操作网页文档(HTML)的结点,对文档进行增删改就是DOM编程;
  3. BOM(Browser Object Model):浏览器对象模型,对网页的事件、地址、链接都属于BOM编程;

  4. BOM和DOM的关联:

    • BOM*对象:Window

      DOM*对象:Document

    • BOM包括DOM,如下图;

      JavaScript(三):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表单验证(重点)

内置函数、类:

  1. Ayyar(了解)
  2. Date(了解)
  3. setlnterval(设置周期函数,了解)
上一篇:*官方信誉平台正规邀请码如何填写99999930


下一篇:中国*服装市场趋势报告、技术动态创新及市场预测