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连接access数据库的方法
Nov 17 Javascript
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
用js做一个小游戏平台 (一)
Dec 29 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
window.onload使用指南
Sep 13 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 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 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
基于jquery的图片懒加载js
2010/06/30 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
vue.js todolist实现代码
2017/10/29 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
python实现简单http服务器功能
2018/09/17 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
用python进行视频剪辑
2020/11/02 Python
python 高阶函数简单介绍
2021/02/19 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
EJB的角色和三个对象
2015/12/31 面试题
车间班组长岗位职责
2013/11/13 职场文书
应届生简历中的自我评价
2014/01/13 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
妇联主席先进事迹
2014/05/18 职场文书
三八妇女节慰问信
2015/02/14 职场文书
关于军训的感想
2015/08/07 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫