JavaScript中window和document用法詳解
一、驗證表單
封裝一個函數(shù)用于驗證手機(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' //白色 } } } //驗證手機(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,lengthDOM常用操作:
獲取文檔元素 對文檔元素進(jìn)行增刪改查操作 事件操作2.window對象
所有地瀏覽器都支持window對象,它支持瀏覽器窗口。 所有的js全局對象,函數(shù)以及變量都能自動成為window對象地成員。全 局變量是window對象的屬性,全局函數(shù)是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>
運(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
好吧啦網(wǎng):https://www.jb51.net/article/191890.htm
到此這篇關(guān)于JavaScript中window和document用法詳解的文章就介紹到這了,更多相關(guān)JavaScript window document內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. 得到XML文檔大小的方法2. JSP+Servlet實現(xiàn)文件上傳到服務(wù)器功能3. XML入門的常見問題(二)4. 在JSP中使用formatNumber控制要顯示的小數(shù)位數(shù)方法5. 如何在jsp界面中插入圖片6. ASP常用日期格式化函數(shù) FormatDate()7. jsp實現(xiàn)textarea中的文字保存換行空格存到數(shù)據(jù)庫的方法8. chat.asp聊天程序的編寫方法9. CSS3實例分享之多重背景的實現(xiàn)(Multiple backgrounds)10. Jsp中request的3個基礎(chǔ)實踐
