JavaScript中window和document用法詳解
一、驗(yàn)證表單
封裝一個函數(shù)用于驗(yàn)證手機(jī)號
/**
* @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" //白色
}
}
}
//驗(yàn)證手機(jī)號
checkInput("phone",/^13[0-9]\d{8]$/)
二、WebsAPI
- JavaScript包含ECMAScript和WebAPIs
- WebAPIs包含BOM和DOMB
- OM:瀏覽對象模型
- DOM：文檔對象模型：（1）一套操作頁面元素的API（2）DOM可以把HTML看作文檔樹，通過DOM提供的API可以對樹上的節(jié)點(diǎn)進(jìn)行操作。
1.DOM
基本概念：文檔對象模型（Document Object Model），是W3C組織推薦的處理可擴(kuò)展標(biāo)記用語言的編程接口
他是一種與平臺和語言無關(guān)的應(yīng)用程序接口，它可以動態(tài)地訪問程序和腳本，更新其內(nèi)容、結(jié)構(gòu)和文檔風(fēng)格。
DOM又稱為文檔樹模型
- 文檔：一個網(wǎng)頁可以成為文檔
- 節(jié)點(diǎn)：網(wǎng)頁中所有的內(nèi)容都是節(jié)點(diǎn)（標(biāo)簽、屬性、文本、注釋等）
- 元素：網(wǎng)頁中地標(biāo)簽，例如：<html>,<head>,<div>
- 屬性：標(biāo)簽的屬性。例如：href,width,length
DOM常用操作：
- 獲取文檔元素
- 對文檔元素進(jìn)行增刪改查操作
- 事件操作
2.window對象
- 所有地瀏覽器都支持window對象，它支持瀏覽器窗口。
- 所有的js全局對象，函數(shù)以及變量都能自動成為window對象地成員。全
- 局變量是window對象的屬性，全局函數(shù)是window對象的方法。
3.document對象
- document也是window對象地屬性之一；
- document對象是documentHTML的一個實(shí)例，也是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>
運(yùn)行結(jié)果：
三、源碼：
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
腳本之家：http://chabaoo.cn/article/191890.htm
到此這篇關(guān)于JavaScript中window和document用法詳解的文章就介紹到這了,更多相關(guān)JavaScript window document內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript運(yùn)動框架 解決速度正負(fù)取整問題(一)
這篇文章主要為大家詳細(xì)介紹了JavaScript運(yùn)動框架的第一部分，解決速度正負(fù)取整問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
前端date.locale?is?not?a?function錯誤的簡單解決辦法
這篇文章主要給大家介紹了關(guān)于前端date.locale?is?not?a?function錯誤的簡單解決辦法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
Flexigrid在IE下不顯示數(shù)據(jù)的有效處理方法
Flexigrid在IE下不顯示數(shù)據(jù)的處理方法是：指定一下Ajax請求數(shù)據(jù)的方式為Get方式,遇到此問題的朋友可以參考下2014-09-09
這篇文章主要介紹了JS簡單計(jì)算器的實(shí)現(xiàn)方法,以加法實(shí)例分析了js實(shí)現(xiàn)計(jì)算功能的技巧,需要的朋友可以參考下2015-01-01
JavaScript精煉之構(gòu)造函數(shù) Constructor及Constructor屬性詳解
對象的constructor屬性用于返回創(chuàng)建該對象的函數(shù)，也就是我們常說的構(gòu)造函數(shù)，除了創(chuàng)建對象，構(gòu)造函數(shù)(constructor) 還做了另一件有用的事情—自動為創(chuàng)建的新對象設(shè)置了原型對象(prototype object)2015-11-11
本文主要是為了讓大家更好的理解js的面向?qū)ο螅ㄟ^實(shí)現(xiàn)拖拽效果向大家展示js面向?qū)ο?，非常不錯，這里推薦給大家。2015-02-02
基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【六】對話框及提示框的處理和優(yōu)化
這篇文章主要介紹了基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【六】對話框及提示框的處理和優(yōu)化的相關(guān)知識，主要對比說明在Bootstrap開發(fā)中用到的這些技術(shù)要點(diǎn)，對此文感興趣的朋友一起學(xué)習(xí)吧2016-05-05
js實(shí)現(xiàn)數(shù)組去重方法及效率對比