JavaScript連載26-window和document

時間 2020-07-23

標籤 javascript 連載 window document 欄目 JavaScript 简体版

原文原文鏈接

1、驗證表單

封裝一個函數用於驗證手機號

/**
     * @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]$/)

2、WebsAPI

JavaScript包含ECMAScript和WebAPIs
WebAPIs包含BOM和DOM
BOM:瀏覽對象模型
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>

運行結果：
javascript

3、源碼：

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
歡迎關注微信公衆號：傅里葉變換，我的帳號，僅用於技術交流，後臺回覆「禮包」獲取Java大數據學習視頻禮包

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。