JavaScriptを - BOM和DOM - コードワールド

BOMとは何ですか

　　BOM：ブラウザのオブジェクトモデル

DOMとは何ですか

　　DOM：ドキュメントオブジェクトモデル

BOM操作：

　　ブラウザウィンドウのウィンドウを呼び出し

　　ウィンドウオブジェクトがポイントで子オブジェクトを呼び出すことができます

　　windows.navigatorオブジェクトは、ブラウザ関連の情報を得ることができます

　　navigator.appName // Webブラウザフルネーム
　　はnavigator.appVersion // Webブラウザのベンダーと文字列の詳細なバージョン
　　情報のnavigator.userAgentが//ほとんどのクライアント
　　//ブラウザが実行されているオペレーティングシステムのnavigator.platform

　　画面オブジェクト：画面情報を取得します

　　screen.navailWidth可能な画面幅

　　screen.availHeight利用可能な画面の高さ

　　歴史は、ブラウザの履歴が含まれている、歴史は、二つの前後に機能していると言われます

　　history.forward（）を転送し

　　history.back（）戻ります

　　オブジェクトの場所：情報へのアクセス

　　LOCATION.HREF URLを取得

　　特定のページにジャンプするLOCATION.HREF =「URL」

　　場所「リロード（）ページをリロード

　　　ポップアップボックス：プロンプトボックス、警告ボックス、チェックボックス

　　1、警告ボックス：

　　　　ALTER（ 'コンテンツ'）;

　　2、確認ボックス：

　　　　確認（「よろしいですか？」）

　　　　ユーザー認証のためか、いくつかの情報ボックスが表示され、あなたがRonghu確認に必要な受信、trueを返すには、[OK]をクリックし、[キャンセル]をクリックし、戻り値はfalseです　　　　

　　3、プロンプトボックス：

　　　　プロンプト（「ボックスに情報を入力します」）

　　　　ヒントボックスは、あなたの入力を必要とし、[OK]または[キャンセル]をクリックすると、チェックボックスがキャンセルされます。確認された場合は、戻り値がキャンセルした場合、入力され、戻り値はnullです

　　タイミング：（）とsetTimeout

　　タイミングが時間に分かれています。

　　ループタイミング：

　　構文：

　　　　VARトン=のsetTimeout（ "文"、MS）

　　キャンセル：

　　　　技術的な定義は、括弧てclearTimeout（t）を関数で提供され

　　指定された期間を循環：setlntervalを（）

　　構文：

　　　　setInterval（「文」、時間間隔）

　　キャンセル：

　　　　clearInterval（「設定ループ変数名」）

DOM：ドキュメントと抽象概念の内容

NIEわずかDOM固定部品は、HTML文書のノード（ノード）であります

　　ドキュメントノード：文書全体を代表して

　　要素ノードは：要素（タグ）を表します

　　ノードのテキスト（テキストオブジェクト）：テキスト内の代表的要素（タグ）

　　属性ノード：要素（タグ）の特性の代表特性を有します

　　JavaScriptは、DOMによる動的なHTMLを作成することができます。

　　　　JavaScriptはすべての要素のためのHTMLページを変更することができます。

　　　　JavaScriptは、すべてのプロパティページのHTMLを変更することができます

　　　　JavaScriptは、すべてのCSSスタイルのページを変更することができます

　　　　JavaScriptが応答するページのすべての時間を憎むことができます

　　ラベルを探します

　　　　1、ダイレクト検索

　　　　　　document.getElementById IDに従ってラベルを得ます

　　　　　　クラス属性取得document.getELementsByClassName

　　　　　　document.getElementsByTagNameは、ラベルのラベルコレクションの下に入ります

　　　　2.間接検索

　　　　　　親タグ要素parentElement

　　　　　　子供のすべてのサブラベル

　　　　　　最初のサブエレメントタグfirstElementChild

　　　　　　lastElementChild最後の子要素タグ

　　　　　　netxElementSibling次の兄弟要素タグ

　　　　　　previousElementSibling次の兄弟要素タグ

ノードの操作：

　　ノードを作成します。

　　createElement（名札）

　　ノードの追加：

　　構文：

　　子ノードを追加（最後として、子ノード）

　　somenode.appendChild（newnode）。

　　ノードの前面に追加されたノード：

　　somenode.insertBefore（newnode、ノード）　

　　ノードを削除します。

　　構文：

　　呼び出すことにより、親要素を削除し、削除したい要素を取得します

　　somenode.removeChild（削除するノード）

　　ノードを交換してください：

　　構文：

　　somenode.replaceChild（newnode、ノード）。

　　ノード属性：

　　テキスト取得したノードの値を

　　ノードのテキスト値：

　　値を取得します。

　　構文：

　　　　elementNode.value

　　タグを使用します。

　　　　入力

　　　　選択

　　　　TEXTAREA

　　クラスアクション：

　　クラス名は、すべてのスタイルクラス名（文字列）を取得します

　　classList.remove（CLS）は、指定されたクラスを削除します。

　　classList.add（CLS）クラスを追加

　　trueを返しますclassList.contains（CLS）、存在するリターン偽かどうか

　　classList.toggle（CLS）は削除し、存在する、または追加します

　　一般的なイベント：

　　二つの結合のイベントが近づい：

　　　　図1に示すように、タグは直接対応するイベント関数を呼び出し

　　　　2、jsのコードが自動的にイベントタグを見つけると結合しています

<div class="bg-red " id="d1"></div>
<button id='b1' onclick='change();'>开关1</button>
<button id='b2'>开关2</button>
<script>
    // 标签直接绑定事件
    function change(){
        var d1Ele = document.getElementById('d1');
        d1Ele.classLict.toggle('bg-green');
    }
    // 通过JS代码绑定事件
    var b2Ele = document.getElementById('b2');
    b2Ele.onclick = ()=>{
        change();
    }

搜索框案例

<input type="text" value="苹果手机" id="i1">
    var i1Ele = document.getElementById('i1');
    i1Ele.onfocus = function (ev) {
        i1Ele.value = '';
        // 也可以直接用this
        this.value = ''
    };
    i1Ele.onblur = function (ev) {
        i1Ele.value = '苹果电脑';
        // 也可以直接用this
        this.value = '苹果电脑'
    }

计时器案例

// 全局变量
var t;
// 步骤1 
// 将当前时间填写到i1中
var now = new Date();
var i1Ele = document.getElementById('i1');
i1Ele.value = now.toLocalString();

// 步骤2(点开始，时间动起来)>>>(每隔一秒执行一次展示时间操作)
    // 将添加时间的功能封装成一个函数
function showTime(){
    var now = new Date();
    var i1Ele = document.getElementById('i1');
    i1Ele.value = now.toLocalString();
};
    // 页面一刷新先展示当前时间
showTime()
    // 找到开始按钮，绑定事件
var b1Ele = document.getElementById('b1');
b1Ele.onclick = function(){
    // 判断是否已经开启过定时器了
    if (!t){
        // t指代定时器
        t = setInterval(showTime,1000);
    }
}

// 步骤3(给停止按钮绑定事件，点击后清除定时器)
var b2Ele = document.getElementById('b1');
b2Ele.onclik = function(){
    // 问题来了，清除谁呢？需要有一个变量指代定时器
    clearInterval(t)；
}

// 步骤4(如果点击多次开始按钮，发现无法清除定时器)
// 判断定时器是否已开启

省市联动（选择省后可以显示选择对应市）

data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
      // 先提前将两个标签对象查找到
    var pEle = document.getElementById('province');
    var cEle = document.getElementById('city');
    // 先展示省份信息
    for (var province in data){
        var proEle = document.createElement('option');
        proEle.innerText = province;
        pEle.appendChild(proEle)
    }
      // 绑定变化事件
    pEle.onchange = function () {
        // 获取对应的省信息
        var currentProvince = pEle.value;
        // 将之前的省对应的市清除
        cEle.innerHTML = '';
      
        // 添加默认的请选择项
        var newEle = document.createElement('option');
        newEle.innerText = '请选择';
        cEle.appendChild(newEle);
      
        // 获取当前省对应的市
        relCity = data[currentProvince];
        // 循环对应的市，添加到市对应的选择框中
        for(var i=0;i<relCity.length;i++){
            var cityEle = document.createElement('option');
            cityEle.innerText = relCity[i];
            cEle.appendChild(cityEle)
        }
    }

JavaScriptを - BOM和DOM

おすすめ