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 相关文章推荐
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
vue项目中导入swiper插件的方法
Jan 30 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
vue组件创建的三种方式小结
Feb 03 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单链表实现代码分享
2016/07/04 PHP
实例解析php的数据类型
2018/10/24 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
Python中atexit模块的基本使用示例
2015/07/08 Python
改进Django中的表单的简单方法
2015/07/17 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
详解python做UI界面的方法
2019/02/27 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
Python序列化pickle模块使用详解
2020/03/05 Python
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
工程师求职简历的自我评价分享
2013/10/10 职场文书
迎接领导欢迎词
2014/01/11 职场文书
学校社会实践活动总结
2014/07/03 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
小学母亲节活动总结
2015/02/10 职场文书
自主招生专家推荐信
2015/03/26 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android