JavaScriptにおけるドキュメントオブジェクトの使い方を詳しく解説_基礎知識

オブジェクトのプロパティ

コードをコピーします コードは次のとおりです:

document.title // HTML の
タグに相当するドキュメントのタイトルを設定します。 document.bgColor //ページの背景色を設定します
document.fgColor //前景色(文字色)を設定します
document.linkColor //クリックされていないリンクの色
document.alinkColor //アクティブなリンクの色 (このリンクにフォーカスがあります)
document.vlinkColor //クリックされたリンクの色
document.URL //同じウィンドウで別の Web ページを開くための URL 属性を設定します
document.fileCreatedDate //ファイル作成日、読み取り専用属性
document.fileModifiedDate //ファイルの変更日、読み取り専用属性
document.fileSize //ファイルサイズ、読み取り専用属性
document.cookie //Cookie の設定と読み取り
document.charset //文字セットを設定します 簡体字中国語: gb2312

=========================================== === =======================
body-body サブオブジェクト

コードをコピーします コードは次のとおりです:

document.body // ドキュメント本文の開始と終了が
と同等であることを指定します。 document.body.bgColor //オブジェクトの背後の背景色を設定または取得します
document.body.link //クリックされていないリンクの色
document.body.alink //アクティブなリンクの色 (このリンクにフォーカスがあります)
document.body.vlink //クリックされたリンクの色
document.body.text //文字の色
document.body.innerText //...
の間にテキストを設定します document.body.innerHTML //...
の間にHTMLコードを設定します document.body.topMargin //ページ上部の余白
document.body.leftMargin //ページの左マージン
document.body.rightMargin //ページの右マージン
document.body.bottomMargin //ページ下マージン
document.body.background //背景画像
document.body.appendChild(oTag) //HTML オブジェクトを動的に生成します

共通オブジェクト イベント

コードをコピーします コードは次のとおりです:

document.body.onclick="func()" //マウスポインターでオブジェクトをクリックするとトリガーされます
document.body.onmouseover="func()" //マウスポインターがオブジェクトに移動するとトリガーされます
document.body.onmouseout="func()" //マウス ポインターがオブジェクトの外に移動するとトリガーされます

=========================================== === =======================
場所-場所サブオブジェクト

コードをコピー コードは次のとおりです:

document.location.hash // #
以降の部分 document.location.host //ドメイン名 ポート番号
document.location.hostname // ドメイン名
document.location.href // 完全な URL
document.location.pathname // ディレクトリ部分
document.location.port // ポート番号
document.location.protocol // ネットワークプロトコル (http:)
document.location.search // ?
以降の部分

共通オブジェクト イベント

コードをコピーします コードは次のとおりです:

documenty.location.reload() //Web ページを更新します
document.location.reload(URL) //新しいウェブページを開きます
document.location.assign(URL) //新しい Web ページを開きます
document.location.replace(URL) //新しいウェブページを開きます

=========================================== === =======================
画像コレクション (ページ上の画像)
a) コレクションによる参照

コードをコピーします コードは次のとおりです:

document.images document.images.length //対応するページの タグの数
document.images[0] //最初の タグ
document.images //i-1 番目の タグ

b) name 属性を通じて

を直接参照する

コードをコピーします コードは次のとおりです:

document.images.oImage //document.images.name 属性

c) 画像の src 属性を参照します

コードをコピーします コードは次のとおりです:

document.images.oImage.src //document.images.name 属性.src

d) 画像を作成します

コードをコピーします コードは次のとおりです:

var oImage
oImage = new Image()
document.images.oImage.src="1.jpg"

同時に、ページに タグを作成して、それに応じて表示します

サンプルコード (画像の動的作成):

コードをコピーします コードは次のとおりです:

<スクリプト言語="javascript">
var oImage
oImage = new Image()
document.images.oImage.src="1.jpg"



<スクリプト言語="javascript">
oImage=document.caeateElement("IMG")
oImage.src="1.jpg"
document.body.appendChild(oImage)

=========================================== === ======================

フォームコレクション (ページ内のフォーム)
a) コレクションによる参照

コードをコピー コードは次のとおりです:

document.forms // 対応するページの

document.forms.length //対応するページの タグの数
document.forms[0] //最初の タグ document.forms //i-1番目のタグ
document.forms.length //i-1 番目の

内のコントロールの数 document.forms.elements[j] //i-1 番目の

内の j-1 番目のコントロール

--------------------------------- b) タグ名属性を通じて

を直接参照する

コードをコピーします コードは次のとおりです:

<フォーム名="Myform"><入力名="myctrl">

document.Myform.myctrl //ドキュメント.フォーム名.コントロール名

--------------------------------- c) フォーム属性にアクセス

コードをコピーします コードは次のとおりです:

document.forms.name // 属性に対応します。 document.forms.action // 属性

に対応します。 document.forms.encoding //

属性
に対応 document.forms.target // 属性に対応します。 document.forms.appendChild(oTag) //コントロールを動的に挿入します



---------------------------------
サンプルコード (フォーム):

コードをコピーします

コードは次のとおりです:

<フォーム名="Myform">

<フォーム>
<スクリプト言語="javascript">
//テキストパスワードボックスの値を取得します
document.write(document.Myform.oText.value)
document.write(document.Myform.oPswd.value)





---------------------------------
サンプルコード (チェックボックス):

コードをコピー

コードは次のとおりです:

<フォーム名="Myform">
1
2

<スクリプト言語="javascript"> 関数 fun(){
//チェックボックス コントロールの値を調べて、それが選択されているかどうかを判断します
var の長さ
length=document.forms[0].chk.length
for(i=0;i v=document.forms[0].chk.value
b=document.forms[0].chk.checked
もし(b)
アラート(v=v "選択")
                                                                                alert(v=v "選択されていません")
                                                                                                                                     
ddd



---------------------------------
サンプルコード (選択):

コードをコピーします

コードは次のとおりです: <フォーム名="Myform">

<名前を選択="oSelect">

<オプション値="1">1
<オプション値="2">2
<オプション値="3">3


<スクリプト言語="javascript">
//選択コントロールのオプション項目を走査します
変数の長さ
length=document.Myform.oSelect.length
for(i=0;i document.write(document.Myform.oSelect.value)

<スクリプト言語="javascript">
// オプション項目を調べて、オプションが選択されているかどうかを判断します
for(i=0;i If(document.Myform.oSelect.selected!=true)
document.write(document.Myform.oSelect.value)
その他
document.write("" document.Myform.oSelect.value "")
}

<スクリプト言語="javascript">
//SelectedIndex に基づいて選択されたオプション
を出力します //(0 ～ document.Myform.oSelect.length-1)
i=document.Myform.oSelect.selectedIndex
document.write(document.Myform.oSelect.value)

<スクリプト言語="javascript">
//選択コントロールにオプションを動的に追加します
var oOption = document.createElement("OPTION");
oOption.text="4";
oOption.value="4";
Document.Myform.oSelect.add(oOption);





=========================================== === =======================
Div コレクション (ページ内のレイヤー)

コードをコピー

コードは次のとおりです:

Text

document.all.oDiv                                                                                                                                                                                                                                                  document.all.oDiv.style.display="" //Set the layer to visible
document.all.oDiv.style.display="none" //Set the layer to hidden
document.getElementId("oDiv") //Reference the object through getElementId
document.getElementId("oDiv").
document.getElementId("oDiv").display="none"
/*document.all represents the collection of all objects in the document
Only IE supports this attribute, so it is also used to determine the type of browser*/

4 properties of layer object

Copy code The code is as follows:

document.getElementById("ID").innerText //Dynamic output text
document.getElementById("ID").innerHTML //Dynamic output HTML
document.getElementById("ID").outerText //Same as innerText
document.getElementById("ID").outerHTML //Same as innerHTML

-------------------------------

Sample code:

Copy code The code is as follows:

Text

Text