JavaScript中window和document用法详解


Posted in Javascript onJuly 28, 2020

一、验证表单

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

/**
 * @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>

运行结果:

JavaScript中window和document用法详解

三、源码:

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://3water.com/article/191890.htm

到此这篇关于JavaScript中window和document用法详解的文章就介绍到这了,更多相关JavaScript window document内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
vue中echarts引入中国地图的案例
Jul 28 #Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 #Javascript
JavaScript文档加载模式以及元素获取
Jul 28 #Javascript
javascript实现贪吃蛇小游戏
Jul 28 #Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 #Javascript
Js图片点击切换轮播实现代码
Jul 27 #Javascript
在vue中实现echarts随窗体变化
Jul 27 #Javascript
You might like
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
Javascript 强制类型转换函数
2009/05/17 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
Angular2实现组件交互的方法分析
2017/12/19 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
常见的python正则用法实例讲解
2016/06/21 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
应届生污水处理求职信
2013/11/06 职场文书
开业庆典策划方案
2014/02/18 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
2019 入党申请书范文
2019/07/10 职场文书