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 相关文章推荐
JavaScript中出现乱码的处理心得
Dec 24 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
jquery实现手风琴效果
Nov 20 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
vue中template的三种写法示例
Oct 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中iconv函数使用方法
2008/05/24 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
利用PHP实现短域名互转
2013/07/05 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
javascript常见用法总结
2014/05/22 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
JS实现图片切换效果
2018/11/17 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
python将ip地址转换成整数的方法
2015/03/17 Python
python计算两个数的百分比方法
2018/06/29 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
投标担保书范文
2014/04/02 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
银行业务授权委托书
2014/10/10 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技