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 Firefox3.5中操作select的问题
Jul 10 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 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下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
用javascript操作xml
2006/11/04 Javascript
iframe实用操作锦集
2014/04/22 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
python爬虫容易学吗
2020/06/02 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
大学生求职简历的自我评价
2013/10/14 职场文书
后进生转化工作制度
2014/01/17 职场文书
服务生自我鉴定
2014/01/22 职场文书
黄河象教学反思
2014/02/10 职场文书
毕业生求职信
2014/06/10 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
2014年店长工作总结
2014/11/17 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书