BOMとDOM操作

目次

BOM

windowオブジェクト

windowサブオブジェクト

location

ポップアップ

計時

history

navigator

DOM

ノードの検索

直接検索

間接検索

ノード操作

ノード

を作成する

追加ノード

削除ノード

置換ノード

属性ノード

ユーザ入力

を取得する.

操作ラベルclass属性

操作ラベルスタイル

イベント

共通イベント

バインドイベント

BOM

Browser Object Modelブラウザオブジェクトモデル

Windowsオブジェクト

window.innerHeightウィンドウ高さ

を取得する.

window.innerWidthウィンドウ幅

を取得する.

window.open()新しいウィンドウ

を開く.

window.close()現在のウィンドウ

を閉じる.

    
    



    window.open("https://www.baidu.com")  
    window.close()

Windowsサブオブジェクト
location

location.href URL

を取得する.

location.href="URL"ジャンプバンド指定ページ

location.reload()ページ

を再ロード
ポップアップボックス

alert(" ")

confirm(" ")

prompt(" ")

時間を計る

var t = setTimeout(func, time)定時実行タスク

clearTimeout(t)タイマオブジェクト

をクリアする.

function func() {
    alert("hahaha")
};
function show() {
    var t = setTimeout(func, 3000)  //           
    function inner() {
        clearTimeout(t)  //        
    }
    setTimeout(inner, 9000)
};

var i = setInterval(func, time)ループ実行タスク

clearInterval(i)ループオブジェクト

をクリアする.

function func() {
    alert()
function show("        ") {
    var i = setInterval(func, 3000)
    function inner() {
        clearInterval(i)
    } 
    setTimeout(inner, 9000)
}
show()

history

history.forward() 1ページ

へ進む

history.back() 1ページ後退

navigator

navigator.userAgentクライアントの情報の大部分

navigator.appNameブラウザフルネーム

navigator.appVersionブラウザベンダーおよびバージョン

navigator.platformブラウザを実行するオペレーティングシステム

DOM

Document Object Modelドキュメントオブジェクトモデル

は、HTML文書の各成分が1つのノード(node)

であることを規定する.

JSはDOMで動的HTML

を作成できる
ノードの検索
直接検索

ラベル名document.getElemenByTagName()

が返す配列[]

クラス名document.GetELementByClassName()

は配列[

]を返します.

id document.GetElementById()

は、ノード自体

を返す.

間接検索

親ラベル .parentElement

を検索

サブタブ .chidren

を検索

第1サブタブ .firstElementChild

最後のサブタブ .lastElementChild

次兄弟ラベル .nextElementSibling

前の兄弟ラベル .previousElementSibling

ノードアクション
ノードの作成

作成ノード:var divEle = document.creatElement("div")

ノードの追加

追加ノード:parentEle.appendChild(childELe)

挿入ノード:parentEle.insertBefore(newELe, someELe)

ノードの削除

parentEle.removeChild(chileELe)

ノードの置換

parentELe.replaceChid(childEle)

属性ノード

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

divEle.innerTextテキスト内容

divEle.innerHTML HTMLコード

テキストの追加/置換

divEle.innerText=" "

divEle.innerHTMl="html "

ノード属性アクション

divEle.setAttribute(name, value)

divEle.getAttribute(name)

divELe.removeAttribute(name)

ユーザー入力の取得

ユーザ入力内容(input,select,textarea)を取得する

iEle.value

複数選択

は適用されません.

アップロードファイルは適用されません(iEle.file[0])

操作ラベルclassプロパティ

クラス属性の表示

divEle.classList

divEle.className

削除クラスdivEle.classLIst.remove()

クラス属性divELe.classlist.add()

を追加

あるクラスdivEle.classList.contains()

があるか否かを判断する.

があれば削除し、なければdivELe.classList.toggle()

を追加する.
操作ラベルのスタイル

pEle.style.

≪イベント｜Events｜ldap≫

ある条件を満たすとき、自動的にトリガされる動作および応答

.
共通イベント

onclickクリック

ondbclickダブルクリック

onfocusフォーカス

を得る.

onblur焦点を失う

onkeydownあるボタンが

押す.
イベントのバインド

直接ラベル内部

    
    


    
click me
    
        function changeColor(ths) {
            ths.style.backgroundColor="green"
        }
    

タグ jsコードにより

をバインドする.

click me

divEle1 = document.getElementById("d1"); divEle1.onclick=function () { this.style.backgroundColor="green"; }