快捷導(dǎo)航

JavaScript中window和document用法詳解

更新時間：2020年07月28日 09:48:04 作者：心悅君兮君不知-睿

這篇文章主要介紹了JavaScript中window和document用法詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、驗(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é)果：