脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript window和document用法

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript实现网页截屏的5种方法小结

    JavaScript实现网页截屏的5种方法小结

    本文主要介绍了JavaScript实现网页截屏的5种方法小结,感兴趣的可以了解一下
    2009-10-10
  • JavaScript JSON.stringify()的使用总结

    JavaScript JSON.stringify()的使用总结

    JSON是一种轻量级数据格式，可以方便地表示复杂数据结构。JSON对象有两个方法：stringify()和parse()。在简单的情况下，这两个方法分别可以将JavaScript序列化为JSON字符串，以及将JSON解析为原生JavaScript值。本文着重介绍JSON.stringify()的使用方法和注意事项。
    2021-05-05
  • JavaScript正则表达式中g标志详解

    JavaScript正则表达式中g标志详解

    正则的思想都是一样的,但是具体的写法会有所不同,下面这篇文章主要给大家介绍了关于JavaScript正则表达式中g标志的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • 老生常谈Bootstrap媒体对象

    老生常谈Bootstrap媒体对象

    下面小编就为大家带来一篇老生常谈Bootstrap媒体对象。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • webpack常用配置项配置文件介绍

    webpack常用配置项配置文件介绍

    这篇文章主要为大家详细介绍了webpack常用配置项配置文件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 利用Print.js实现打印pdf、HTML及图片(可设置样式可分页)

    利用Print.js实现打印pdf、HTML及图片(可设置样式可分页)

    在我们需要在页面中打印某个区域的内容或者生成pdf的时候,我们可以直接用printJs库,这篇文章主要给大家介绍了关于利用Print.js实现打印pdf、HTML及图片的相关资料,可设置样式可分页,需要的朋友可以参考下
    2024-05-05
  • 使用javascript做时间倒数读秒功能的实例

    使用javascript做时间倒数读秒功能的实例

    今天小编就为大家分享一篇关于使用javascript做时间倒数读秒功能的实例，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01
  • JavaScript实现99乘法表及隔行变色实例代码

    JavaScript实现99乘法表及隔行变色实例代码

    最近做了个项目是要求实现99乘法表隔行变色，本文给大家分享通过多种方式实现js 99 乘法表，感兴趣的朋友一起看看吧
    2016-02-02
  • js模仿hover的具体实现代码

    js模仿hover的具体实现代码

    hover效果，想必大家并不陌生吧，接下来为大家介绍下使用js模仿hover，感兴趣的朋友可以参考下
    2013-12-12
  • javascript学习小结之prototype

    javascript学习小结之prototype

    本系列博文主要谈一些在 javascript 使用中经常会混淆的高级应用，包括: prototype, closure, scope, this关键字. 对于一个需要提高自己javascript水平的程序员,这些都是必须要掌握的，本节主要介绍prototype.
    2015-12-12

最新评论