JavaScript中window和document用法詳解
阿新 • • 發佈：2020-07-28
一、驗證表單
封裝一個函式用於驗證手機號
/**
* @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又稱為文件樹模型
- 文件：一個網頁可以成為文件
- 節點：網頁中所有的內容都是節點（標籤、屬性、文字、註釋等）
- 元素：網頁中地標籤，例如：<html>,<head>,<div>
- 屬性：標籤的屬性。例如：href,width,length
DOM常用操作：
- 獲取文件元素
- 對文件元素進行增刪改查操作
- 事件操作
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內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！