JavaScript中window和document用法详解

所属分类: 网络编程 / JavaScript 阅读数: 1991
收藏 0 赞 0 分享

一、验证表单

封装一个函数用于验证手机号

 /**
 * @param {String}eleId
 * @param {Object}reg
 */
 function checkInput(eleId,reg) {
 var ele = document.getElementById(eleId);
 ele.onblur = function (ev) {
 if(!reg.test(this.value)){ //不匹配
 this.style.borderColor = "#ff0000" //红色
 }else{ //匹配
 this.style.borderColor = "#cccccc" //白色
 }
 }
 }
 //验证手机号
 checkInput("phone",/^13[0-9]\d{8]$/)

二、WebsAPI

  • JavaScript包含ECMAScript和WebAPIs
  • WebAPIs包含BOM和DOMB
  • OM:浏览对象模型
  • DOM:文档对象模型:(1)一套操作页面元素的API(2)DOM可以把HTML看作文档树,通过DOM提供的API可以对树上的节点进行操作。

1.DOM

基本概念:文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展标记用语言的编程接口

他是一种与平台和语言无关的应用程序接口,它可以动态地访问程序和脚本,更新其内容、结构和文档风格。

DOM又称为文档树模型

  1. 文档:一个网页可以成为文档
  2. 节点:网页中所有的内容都是节点(标签、属性、文本、注释等)
  3. 元素:网页中地标签,例如:<html>,<head>,<div>
  4. 属性:标签的属性。例如:href,width,length

DOM常用操作:

  1. 获取文档元素
  2. 对文档元素进行增删改查操作
  3. 事件操作

2.window对象

  • 所有地浏览器都支持window对象,它支持浏览器窗口。
  • 所有的js全局对象,函数以及变量都能自动成为window对象地成员。全
  • 局变量是window对象的属性,全局函数是window对象的方法。

3.document对象

  • document也是window对象地属性之一;
  • document对象是documentHTML的一个实例,也是window对象的一个属性,因此可以将document对象作为一个全局对象来访问。
<div id = "testDiv">测试一个div</div>
<script>
 var str = "jdi";
 console.log(window.str);
 console.log(document);
 console.log(document === window.document);
 console.log(document.childNodes);
 console.log(document.head);
 console.log(document.body);
 console.log(document.title);

 var box = document.getElementById("testDiv");
 console.log(box);
 console.log(box.innerText);
</script>

运行结果:

三、源码:

D26_1_FormVerification.html

地址:https://github.com/ruigege66/JavaScript/blob/master/D26_1_FormVerification.html

博客园:https://www.cnblogs.com/ruigege0000/

CSDN:https://blog.csdn.net/weixin_44630050?t=1 

脚本之家:https://www.jb51.net/article/191890.htm

更多精彩内容其他人还在看

js单独获取一个checkbox看其是否被选中

这篇文章主要与大家分享js获取一个checkbox看其是否被选中的具体实现,很简单,但很实用,需要的朋友可以参考下
收藏 0 赞 0 分享

js变量、作用域及内存详解

本文主要详细分析了JS变量,作用域以及内存问题,同时附上非常多的实例,方便大家理解这3个概念,是篇不可多得的文章,希望对大家有所帮助
收藏 0 赞 0 分享

深入理解javascript作用域和闭包

作用域和作用域链是javascript中非常重要的特性,对于他们的理解直接关系到对于整个javascript体系的理解,而闭包又是对作用域的延伸,也是在实际开发中经常使用的一个特性,实际上,不仅仅是javascript,在很多语言中都提供了闭包的特性。
收藏 0 赞 0 分享

IE6 hack for js 集锦

本文主要讲诉了使用js实现网站功能兼容IE6,非常的实用的小技巧,有需要的朋友可以参考下
收藏 0 赞 0 分享

Javascript的setTimeout()使用闭包特性时需要注意的问题

这篇文章主要介绍了Javascript的setTimeout(0)使用闭包特性时需要注意的问题,需要的朋友可以参考下
收藏 0 赞 0 分享

常用的jquery模板插件——jQuery Boilerplate介绍

Query Boilerplate是一个不错的jQuery插件开发工具,使用这个工具可以帮助你快速的构建一个jQuery框架。这个工具提供你很多评论用以帮助你使得开发变得简单和直接,它是个真正的面对对象的工具,你可以实现公开或者私有的方法或者公开或者私有的属性。
收藏 0 赞 0 分享

深入理解javascript构造函数和原型对象

对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅。。(哔!)。
收藏 0 赞 0 分享

深入理解javascript原型链和继承

这篇文章主要介绍了javascript原型链和继承的概念,以及使用原型链实现继承、经典继承、组合式继承、寄生组合式继承。非常实用,是篇非常不错的文章,这里推荐给大家。
收藏 0 赞 0 分享

再探JavaScript作用域

这篇文章主要介绍了再探JavaScript作用域,本文用简洁的语言和直观的测试结果图片给大家讲解JavaScript的作用域,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript获取图片真实大小代码实例

这篇文章主要介绍了JavaScript获取图片真实大小代码实例,本文使用onload事件来获取图片的真实大小,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多