JavaScript中window和document用法详解

 更新时间:2020年07月28日 09:48:04   作者:心悦君兮君不知-睿  
这篇文章主要介绍了JavaScript中window和document用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、验证表单

封装一个函数用于验证手机号

 /**
 * @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>

运行结果:

三、源码:

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://www.jb51.net/article/191890.htm

到此这篇关于JavaScript中window和document用法详解的文章就介绍到这了,更多相关JavaScript window document内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 简介alert()与console.log()的不同

    简介alert()与console.log()的不同

    alert()和console.log()在程序中经常会用到,大家知道他们的区别吗,接下来,通过本文给大家介绍alert()与console.log()的不同,需要的朋友可以参考下
    2015-08-08
  • 通过js控制时间,一秒一秒自己动的实例

    通过js控制时间,一秒一秒自己动的实例

    下面小编就为大家带来一篇通过js控制时间,一秒一秒自己动的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JavaScript如何把两个数组对象合并过程解析

    JavaScript如何把两个数组对象合并过程解析

    这篇文章主要介绍了JavaScript如何把两个数组对象合并过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • layer.confirm()右边按钮实现href的例子

    layer.confirm()右边按钮实现href的例子

    今天小编就为大家分享一篇layer.confirm()右边按钮实现href的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript实用技巧(一)

    JavaScript实用技巧(一)

    本文从7个方面讲述 JavaScript 中那些你不很熟知但非常实用的技巧。
    2010-08-08
  • JavaScript中按位“异或”运算符使用介绍

    JavaScript中按位“异或”运算符使用介绍

    按位“异或”运算符 (^)是对两个表达式执行按位异或,下面为大家介绍下其具体的使用方法
    2014-03-03
  • JS实现简易图片轮播效果的方法

    JS实现简易图片轮播效果的方法

    这篇文章主要介绍了JS实现简易图片轮播效果的方法,实例分析了javascript操作图片实现轮播特效的技巧,需要的朋友可以参考下
    2015-03-03
  • JS JQuery获取data-*属性值方法解析

    JS JQuery获取data-*属性值方法解析

    这篇文章主要介绍了JS JQuery获取data-*属性值方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • 浅谈js-FCC算法Friendly Date Ranges(详解)

    浅谈js-FCC算法Friendly Date Ranges(详解)

    下面小编就为大家带来一篇浅谈js-FCC算法Friendly Date Ranges(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • javascript批量修改文件编码格式的方法

    javascript批量修改文件编码格式的方法

    这篇文章主要介绍了javascript批量修改文件编码格式的方法,分析了使用javascript第三方包批量修改文件编码的技巧,需要的朋友可以参考下
    2015-01-01

最新评论