1。要素を見つける:
document.getElementById( "id"); IDに従って検索し、せいぜい1つを見つけます。
var a = docunment.getElementById( "id");発見された要素を変数に配置します。
document.getElementsByname( "name");名前に応じて見つけると、配列が見つかります。
document.getElementsByTagname( "name");タグ名に従って配列を見つけます。
document.getElementsByClassName( "name")classNameに従って見つけると、配列が見つかります。
2。操作コンテンツ:
1。非型要素:
(1)コンテンツを取得する:
アラート(a.innerhtml);タグ内のHTMLコードとテキストが取得され、タグ内のすべての内容が取得されます。
例:体内にはそのようなdivがあります:
<div id = "me"> <b>試してみてください</b> </div>
innerhtmlを使用して、スクリプトでdivのコンテンツを取得します。
var a = document.getElementById( "me");
アラート(a.innerhtml);
結果は次のとおりです。
アラート(a.innertext);内部のテキストのみを取ります
アラート(a.outerhtml);タグ自体のコンテンツが含まれています(簡単な理解)
(2)コンテンツの設定:
a.innerhtml = "<font color = red> hello world </font>";
結果が設定コンテンツコードで次のとおりである場合、divのコンテンツが置き換えられます。
A.InnerTextは、コンテンツをそのまま表示します
クリアコンテンツ:空の文字列を割り当てます
2。フォーム要素:
(1)コンテンツを取得するには2つの方法があります。
var t = document.f1.t1;フォームフォームフォームIDは、F1にT1を含む入力です。
var t = document.getElementById( "id"); IDで直接入手してください。
アラート(t.value);入力の値を取得します。
アラート(t.innerhtml);ここで値を取得<Textarea> </textarea>;
(2)コンテンツの設定:t.value = "コンテンツ変更";
3。少しの知識ポイント:
<a href = "http://www.baidu.com" onclick = "return false"> baidu </a>;戻りフレーズが追加された場合、ジャンプしません。デフォルトはreturn trueです。ジャンプします。ボタンにも同じことが言えます。戻りフレーズがボタンに設定されている場合、送信は行われません。これを使用して、提出ジャンプを制御できます。
3。操作プロパティ
まず、要素のIDを使用して要素を見つけ、変数に保存します。
var a = document.getElementById( "id");
次に、要素のプロパティで動作できます。
a.setAttribute( "属性名"、 "属性値");属性を設定し、追加または変更します。
a.getAttribute( "属性名");属性の値を取得します。
A.RemoveAttribute( "属性名");属性を削除します。
例1:質問をします。入力回答が正しい場合、正しくポップアップ表示され、エラーがエラーが発生します。
これは、回答値を含むテキストに書かれたDaan属性です。回答をチェックするためにクリックすると、Cheakによるコンテンツ入力は答えと同じです。
ボディのコード:
<form>中華共和国の設立は何年でしたか? <入力型= "text" daan = "1912" value = "" id = "t1" name = "t1" /> <input type = "button" onclick = "check()" id = "t2" name = "t2" value = "
JSのコード:
function check(){var a = document.getElementById( "T1"); var a1 = a.value; var a2 = a.getattribute( "daan"); if(a1 == a2){alert( "正しく答えてくれて祝福!"); } else {alert( "Idiot!"); }}答えが正しい場合の結果:
例2:同意ボタン、カウントダウン10秒、同意ボタンは提出可能になります。ここでは、操作属性:無効を使用してボタンの状態を変更します。 disabled = "disabled"は利用できません。
ボディのコード:
<form> <入力タイプ= "submit" id = "b1" name = "b1" value = "aseib =" "disabled =" disabled " /> < /form>
JSのコード:
var n = 10; var a = document.getElementById( "b1"); function bian(){n - ; if(n == 0){a.removeattribute( "disabled"); a.value = "aseib";戻る; } else {a.value = "asem("+n+")"; window.settimeout( "bian()"、1000); }} window.settimeout( "bian()"、1000);実行の結果:
4。操作スタイル
まず、要素のIDを使用して要素を見つけ、変数に保存します。
var a = document.getElementById( "id");
次に、要素のプロパティで動作できます。
a。 ;このIDスタイルのプロパティを操作します。
スタイルはCSSのスタイルであり、すべてのスタイルはコードで操作できます。
document.body.style.backgroundcolor = "color";ウィンドウ全体の背景色。
操作スタイルのクラス:a.classname = "classname in style sheet"はスタイルのバッチを操作します
例1:ディスプレイ写真の自動および手動の切り替え。
身体のコード、両側に背景画像と制御オブジェクトを備えたDIVを作成します。
<div id = "tuijian" style = "background-image:url(imges/tj1.jpg);"> <div id = "p1" onclick = "dodo(-1)"> </div> <div id = "p2" onclick = "dodo(1)"> div> </div> </div>
StyleSheetのコード:
<style type = "text/css"> *{margin:0px auto;パディング:0px;フォントファミリー:「Microsoft Yahei」; } #tuijian {width:760px;高さ:350px;バックグラウンドリピート:ノーリピート。 } .Pages {Top:200px;バックグラウンドカラー:#000;バックグラウンドポジション:センター;バックグラウンドリピート:ノーリピート。不透明:0.4;幅:30px;高さ:60px; }#p1 {background-image:url(imges/prev.png);フロート:左;マージン:150px 0px 0px 10px; }#p2 {background-image:url(imges/next.png);フロート:そうです;マージン:150px 10px 0px; } </style>JSのコードは、主に3秒ごとにHuan()関数を呼び出して、背景画像のスタイルを変更します。左と右のスイッチをクリックすると、手動で切り替えられ、自動スイッチが停止します。
<スクリプト言語= "javascript"> var jpg = new Array(); jpg [0] = "url(imges/tj1.jpg)"; jpg [1] = "url(imges/tj2.jpg)"; jpg [2] = "url(imges/tj3.jpg)"; var tjimg = document.getelementbyid( "tuijian"); var xb = 0; var n = 0; if(xb == jpg.length){xb = 0; } tjimg.style.backgroundimage = jpg [xb]; if(n == 0){var id = window.settimeout( "huan()"、3000); }} function dodo(m){n = 1; xb = xb+m; if(xb <0){xb = jpg.length-1; } else if(xb> = jpg.length){xb = 0; } tjimg.style.backgroundimage = jpg [xb]; } window.settimeout( "huan()"、3000); </script>効果は次のとおりです。
5。関連要素操作:
var a = document.getElementById( "id"); aを見つけます;
var b = a.nextsibling、Aの次のピア要素を見つけて、スペースを含めることに注意してください。
var b = a.previoussibling、aの以前のピア要素を見つけて、スペースを含めることに注意してください。
var b = a.parentnode、aの前の親要素を見つけます。
var b = a.childnodes、配列が見つかり、Aの次のレベルの子要素が見つかります。
var b = a.firstchild、最初の子要素、最後のChild hild、子供のnodes [n]は最初の数を見つけます。
Alert(nodes [i] Instanceof Text);テキストであるかどうかを判断し、フレーズではなく真の返品、その値が誤っているかどうかを判断する場合は使用し、スペースを削除できます。
6。要素の作成、追加、および削除:
var a = document.getElementById( "id"); aを見つけます;
var obj = document.createelement( "タグ名");要素を作成します
obj.innerhtml = "hello world";追加するときは、最初に要素を作成する必要があります。
A.AppendChild(OBJ); aに子要素を追加します。
A.RemoveChild(OBJ);子要素を削除します。
A.SelectedIndexリスト内:選択された数。
//a.options [a.selectindex]インデックスに従ってsubscriptからオプションオブジェクトを削除します。
7。文字列操作:
var s = new String();またはvar s = "aaaa";
var s = "hello world";
alert(s.tolowercase()); Touppercase()を小文字()に大文字にします
アラート(S.Substring(3,8)); 3番目の位置から8番目の位置への傍受
アラート(S.Substr(3,8)); 3番目の位置から傍受し始め、長さ8文字を傍受し、次の数字を最後まで書き込まないでください。
s.split( '');指定された文字に応じて文字を分解し、配列に入れ、自動的にソートする
s.lengthはプロパティです
s.indexof( "world");文字列での世界初の出来事は戻りません-1
s.lastindexof( "o"); oここで、s.lastindexof( "o"); o in stringの最後の出来事
8。日付と時刻の操作
var d = new date();現在の時刻
d.setfulterear(2015,11,6);/*設定する月に1設定*/*/*/*
D.GetClyear:年をとる。
D.GetMonth():月を撮ると、あなたが得るものが少なくなります。
D.GetDate():空を取る;
D.GetDay():曜日を迎えます
d.gethours():時間を取る;
D.GetMinutes():数分かかります。 d.getSeconds():数秒かかります
d.setfulterear():年を設定し、月を設定するときに-1に注意を払ってください。
9。数学機能の操作
math.ceil();現在の小数よりも最小の整数
math.floor();小魚の現在の10進数の最大の整数
math.sqrt();四角を開けます
math.round();ラウンド();ラウンド
Math.random();乱数、0-1の間
10。いくつかのヒント
外側の二重引用符と内部の二重引用符は、単一の引用に変更されます。
DIVの行の高さを設定するとき、設定がどれほど高くても、占有行はデフォルトで中央の位置にあります(Divの上部および下部領域の中央 - [デフォルト]垂直中心)。
テキストボックスから使用される値は文字列であり、parseint()を使用して数値に変換する必要があります。
s.match(reg); sは文字列を表し、regは文字列を表し、2つの一致を表します。 2つの文字列が一致しない場合、nullが返されます。
javascript-dom operation-window.documentオブジェクトの上記の詳細な説明は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。