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 相关文章推荐
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 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代码
2012/07/14 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
Python with用法实例
2015/04/14 Python
Python中http请求方法库汇总
2016/01/06 Python
python list元素为tuple时的排序方法
2018/04/18 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
Python3实现定时任务的四种方式
2019/06/03 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
个人对照检查材料思想汇报
2014/09/26 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
党员进社区活动总结
2015/05/07 职场文书
入党申请书怎么写?
2019/06/11 职场文书