Domとは何ですか？ DOMは、ブラウザプログラミングに基づいたAPIインターフェイスのセットです（このチュートリアルでは、DHTMLプログラミングと言えます）。 W3Cには、各ブラウザに微妙な違いがあります。その中で、Mozillaのブラウザは標準に最も似ています。 Simple JavaScriptはDOMを組み合わせてDHTMLプログラミングを実行する必要があり、美しい効果を生み出してWebに適用する必要があります。これは、C/C ++がライブラリサポートを必要とするのと同じように、他の言語とほぼ同じです。そうでなければ、それは単なる文法研究です。私たちが最も心配しているのは、DomがWebページをスクリプトやその他のプログラミング言語と接続することです。 DOMは、JavaScript言語仕様で指定されたコアコンテンツではなく、ブラウザに属します。
要素を見つけます
1.直接検索します
| メソッド名 | 説明する |
| getElementById（ID）（document） | 指定された一意のID属性値でドキュメント内の要素を取得する |
| getelementsbytagname_r（name） | 現在の要素に指定されたtagnameを持つ子要素の配列を返します |
| document.getElementsByClassName | 属性に基づいてタグコレクションを取得します |
| getattribute（name） | 要素の属性値を返し、属性は名前で指定されます |
1> document.getElementById（ 'id'）
<body> <div id = "zhang">ハンサムではありません</div> <script type = "text/javascript"> var i = document.getElementById（ 'Zhang'）; //指定されたIDを見つけますi.innertext = '非常にハンサム'; // Innertext指定された文字列</script> </body>を変更します
IEを開くと、エフェクトを表示すると、非常にハンサムに変更されます。
2> GetElementsByTagname_r（名前）
<body> <div name = "zhang">ハンサムではない</div> <スクリプトタイプ= "text/javascript"> var i = document.getElementByTagnmae（ 'Zhang'）; //指定された名前名i.innertext = '非常にハンサム'; // Innertext指定された文字列</script> </body>を変更します
同じディスプレイ効果
3> document.getElementsByClassName
<body> <div>ハンサムではない</div> <スクリプトタイプ= "text/javascript"> var i = document.getElementClassName（ 'Zhang'）; //指定されたクラス名i.innertext = '非常にハンサム'を見つけます。 // Innertext指定された文字列</script> </body>を変更します
2。間接検索
| 属性名 | 説明する |
| チャイルドノード | 現在の要素のすべての子要素の配列を返します |
| チャイルドノード | 現在の要素のすべての子要素を返します |
| FirstChild | 現在の要素の最初の低い子要素を返します |
| ラストチャイルド | 現在の要素の最後の子要素を返します |
| 次のシーブル | 現在の要素の直後に要素を返します |
| 前訪問 | 現在の要素の直前の要素を返します |
| ParentElement | 親ノードラベル要素を返します |
| 子供たち | すべての字幕を返します |
| firstlementChild | 最初のサブタイトル要素を返します |
| lastelementchild | 最後のサブタグ要素を返します |
| nextelementtsibling | 下一个兄弟标签元素戻ります |
| 以前のエレメント | 前の兄弟タグ要素に戻ります |
W3C DOMを使用すると、シンプルなクロスブラウザースクリプトを作成し、XMLのパワーと柔軟性を最大限に活用して、XMLをブラウザとサーバーの間の通信媒体として使用できます。
操作要素
1。W3CDOMプロパティとメソッドは、コンテンツを動的に作成するために使用されます
| プロパティ/メソッド | 説明する |
| document.createelement_x（tagname） | ドキュメントオブジェクトのcreateElement_xメソッドは、tagnameで指定された要素を作成できます。文字列divがメソッドパラメーターとして使用される場合、div要素が生成されます |
| document.createTextNode（テキスト） | ドキュメントオブジェクトのcreateTextNodeメソッドは、静的テキストを含むノードを作成します。 |
| <lement> .AppendChild（ChildNode） | AppendChildメソッドは、指定されたノードを現在の要素の子ノードリストに追加します（新しい子ノードとして）。 |
| <lement> .SetAttribute（名前、値） | これらのメソッドは、それぞれ要素の名前属性の値を取得して設定します |
| <lement> .intertbefore（newNode、TargetNode） | Node NewNodeをターゲットノード要素の前にある現在の要素の子ノードとして挿入 |
| <lement> .removeattribute（name） | このメソッドは、要素から属性名を削除します |
| <lement> .RemoveChild（ChildNode） | この方法は、要素から子要素の子のノードを削除します |
| <要素> .ReplaceChild（NewNode、OldNode） | このメソッドは、ノードの古いノードをノードニューノードに置き換えます |
| <element> .haschildnodes（） | この方法は、要素が子要素を持っているかどうかを示すブール値を返します |
2。タグコンテンツ
InnerText Get Tag Text Content innerhtml get htmlコンテンツ値を取得する値、つまりフォームの送信フォームの値
つまり、以下は次のとおりです。
<div> 1111 </div> <div> 2222 </div> <入力タイプ= "text" value = "zhang yanlin"> <script> document.getelementsbyclassname（ "zhang"）。innertext = 123; //クラス名Zhangでタグを取得し、コンテンツを123 document.getElementsbyclassName（ "yan"）に変更します。 //クラス名yanでタグを取得し、コンテンツを456 document.getElementsbyclassname（ "lin"）に変更します。value = "zhang yanlinはハンサムです"; //クラス名でタグを取得し、コンテンツをZhang Yanlinに変更します</script>
3。属性
属性//すべてのタグ属性を取得setAttribute（key、value）//タグ属性getattribute（key）//指定されたタグ属性を取得します
カスタムプロパティを介して、すべてを選択し、選択解除、および選択解除のケースを作成できます。コードは次のとおりです。
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title> </title> </head> <body> <div> <input type = "button" value " value = "undelect" onclick = "recvall（）;"> </div> <div id = "i1"> <ul> <li> <入力タイプ= "チェックボックス" 1 "1">バスケットボール</li> <li> <入力タイプ= "チェックボックス"値 "value =" 2 ">フットボール</li> <入力=" 3> checkall（）{var b = document.getelementsbyclassname（ "c1"）; for（var i = 0; i <b.length; i ++）{var check = b [i]; check.checked = true}} function cancleall（）{var b = document.getElementsByClassName（ "c1"）; for（var i = 0; i <var i = 0; i <b.length; i ++）{var check = b [i]; check.checked = false}} function recvall（）{var b = document.getelementsbyclassname（ "c1"）; for（var i = 0; i <b.length; i ++）{var check = b [i]; if（check.checked）{check.checked = false} else {check.checked = true}}} </script> </body> </html>すべてを選択、逆、キャンセルケース注：OnClickはクリックイベントで、後で説明します
4。クラス操作
className //すべてのクラス名を取得classlist.remove（cls）//指定されたclasslist.add（cls）// classを追加する
このことはとても便利です。たとえば、JD.comでは、すべての製品にマウスが配置されると、多くの製品が以下に表示されます。製品は隠されており、トリガーイベントがCSS隠された属性を定義する後にのみ表示されます。マウスが配置された後、CSS隠された属性が削除されます。マウスが削除され、隠された属性が追加されます。
<！doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> hide </title> <style> .hide {display：none; } </style> </head> <body> <span onmouseover = "mouover（）;">それから何かを出しますが、それを入れずに消えます</span> <div id = "zhangyanlin" style = "font-size：60px"> zhang yanlinはとてもハンサム</div> <スクリプト> document.getElementById（ "Zhangyanlin"）。classlist.remove（ "hide"）; } function mouout（）{document.getElementById（ "zhangyanlin"）。classlist.add（ "hide"）; } </script> </body> </html>ケースで脳を起こしましょう5。タグ操作
DOMを介してタグを作成し、指定された場所に追加できます。タグを操作する2つの方法を次に示します
// 1つのvar zhang = "<input type = 'text' />";xxx.insertadjacenthtml(" beforeend",zhang); xxx.insertadjacentelement('afterbegin',document.createelement（ 'a'））// tag = document.createelement（ 'div'）xxx.appendchild（tag）// div要素を追加xxx.insertbefore（tag、xxx [1]）//指定された位置に挿入すると、インデックスを使用できます< /> </div> <div style = "position：retary;"> <ul id = "commentlist"> <li> alex </li> <li> eric </li> </ul> </div> </div> <script> function addelement（ths）{//入力値var val = ths.previouselementsibling.value; ths.PreviousElementionSibling.Value = ""; var commentlist = document.getElementById（ 'commentlist'）; //最初のフォーム、文字列メソッド// var str = "<li>" + val + "</li>"; // 'before begin'、 'afterbegin'、 'before end'、 'afterend' // 2番目の方法は要素方法ですvar tag = document.createelement（ 'li'）; tag.innertext = val; var temp = document.createelement（ 'a'）; temp.innertext = 'baidu'; temp.href = "http://etiantian.org"; tag.AppendChild（TEMP）; // commentlist.appendChild（tag）; commentlist.insertbefore（tag、commentlist.children [1]）; } </script> </body> </html>タグ操作ケースを追加します6。スタイル操作
<body> <div id = i1> zhang yanlinはハンサムです</div> <script> var obj = document.getElementbyid（ 'i1'）; obj.style.fontsize = "32px"; obj.style.backgroundcolor = "red"; </script> </body>
効果は次のとおりです。
ケースを取りましょう。知識のポイントを見るだけで退屈です。入力ボックスに暗いフォントがよく表示されるため、何かを入力するようになります。クリックすると、消えます。魔法のような操作です。 DOMを通じて達成されます。ナンセンスをあまり言わずにコードを読むだけです。
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title> </title> <style> .bb {color：＃9a9a9a; } .aa {color：black; } </style> </head> <body> <入力値= "コンテンツを入力してください" onfocus = "inpatu（this）;" onblur = "onbtu（this）;"> <script> function inpatu（ths）{ths.classname = "aa"; var text = ths.value; if（text == "コンテンツを入力してください"）{ths.value = ""; }} function onbtu（ths）{var text = ths.value; if（text == "コンテンツを入力してください" || text.trim（）。length == 0）{ths.classname = "bb"; ths.value = "コンテンツを入力してください"; }} </script> </body> </html>入力ボックスプロンプト7。位置操作
トータルドキュメントの高さドキュメント。DocumentElement.OffseetHeighturringDocumentはスクリーンの高さドキュメントを占有します。DocumentLement.ClientHeightSelf-height Tag.Offseight to Superion Positioning Heightへの距離タグ。
Webページの右下隅にある上部に戻ってから、わずかなポイントで上部に戻ると思いましたか？はい、これらの高さを計算することです。マウスを引き下げると、左側のメニューバーの対応するスタイルが変わります。
<！doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <style> body {margin：0px; } img {border：0; } ul {パディング：0;マージン：0;リストスタイル：なし; } h1 {パディング：0;マージン：0; } .clearfix：after {content： "。";表示：ブロック;高さ：0;クリア：両方;可視性：隠された; } .wrap {width：980px;マージン：0 Auto; } .pg-header {background-color：＃303a40; -webkit-box-shadow：0 2px 5px rgba（0,0,0、.2）; -moz-box-shadow：0 2px 5px rgba（0,0,0、.2）; Box-Shadow：0 2PX 5PX RGBA（0,0,0、.2）; } .pg-header .logo {float：left;パディング：5px 10px 5px 0px; } .pg-header .logo img {vertical-align：middle;幅：110px;高さ：40px; } .pg-header .nav {line-height：50px; } .pg-header .nav ul li {float：left; } .pg-header .nav ul li a {display：block;色：#ccc;パディング：0 20px;テキスト装置：なし;フォントサイズ：14px; } .pg-header .nav ul li a：hover {color：#fff;バックグラウンドカラー：＃425A66; } .pg-body {} .pg-body .catalog {position：absolute;上：60px;幅：200px;バックグラウンドカラー：#fafafa;下：0px; } .pg-body .catalog.fixed {position：sixt;トップ：10px; } .pg-body .catalog .catalog-item.active {color：#fff;バックグラウンドカラー：＃425A66; } .pg-body .content {position：absolute;上：60px;幅：700px;マージン左：210px;バックグラウンドカラー：#fafafa;オーバーフロー：自動; } .pg-body .content .section {height：500px;境界線：1px固体赤; } </style> <body onscroll = "scrollevent（）;"> <div> <div> <div> <a href = "＃"> <img src = "http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">> </> <> <> <> fiv> href = "＃"> home </a> </li> <li> <a href = "＃"> function 1 </a> </li> <li> <a href = "＃"> function 2 </a> </li> </ul> 1 </a> </div> <div auto-to = "function2"> <a> picture 2 </a> </div> <div auto-to = "function3"> <a> picture 3 </a> </div> </div> <div div = "content"> <div menu = "function1"> <h1>第1章</h1> </</</< <div menu = "function3"> <h1>第3章</h1> </div> </div> </div> </script> <script> function scrollevent（）{var bodyscrolltop = document.body.scrolltop; if（bodyscrolltop> 50）{document.getElementsByClassName（ 'catalog'）[0] .classlist.add（ 'sixt'）; } else {document.getElementsByClassName（ 'Catalog'）[0] .classList.Remove（ 'sixt'）; } var content = document.getElementById（ 'content'）; varセクション= content.children; for（var i = 0; i <sections.length; i ++）{var current_section = sections [i]; //上部からの現在のラベルの絶対高さvar scofftop = current_section.offsettop + 60; //上部からの現在のラベル、相対高さvar offtop = scofftop -bodyscrolltop; //現在のラベルの高さvar height = current_section.scrollheight; if（offtop <0 && -offtop <height）{//現在のラベルはアクティブ//アクティブなvar menus = document.getelementbyid（ 'catalog'）のその他の削除を追加します。 var current_menu = menus [i]; current_menu.classlist.add（ 'Active'）; for（var j = 0; j <menus.length; j ++）{if（menus [j] == current_menu）{} else {menus [j] .classlist.remove（ 'active'）; } } 壊す; }}}} </script> </body> </html>スクロールメニュー<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title> </title> <style> .pg-top {position：sixt;バックグラウンドカラー：＃0095bb;高さ：40px;幅：40px;下：50px;右：40px;色：ホワイトスモーク; } .hide {display：none; } </style> </head> <body onscroll = "func（）;"> <div style = "height：3000px;" id = "i1"> <h1> zhang yanlin </h1> </div> <div id = "i2"> <a href = "javascript：void（0）;" onclick = "gotop（）;">トップに戻る</a> </div> <script> function func（）{var scrolltop = document.body.scrolltop; var i1 = document.getElementById（ "i2"）; if（scrolltop> 20）{i1.classlist.remove（ "hide"）} else {i1.classlist.add（ "hide"）}} function gotop（）{document.body.scrolltop = 0; } </script> </body> </html>トップに戻ります8。その他の操作
console.log出力ボックスアラートポップアップボックス確認確認書の確認ボックス// urlおよび更新場所と更新場所.href get urllocation.href = "url" redirect location.reload（）reload // setinterval clear clear clear clear clear clear clear multier timer sitimeout clear timer clear sine
タイマーについて教えてください。タイマーの方が便利です。たとえば、メールを削除すると、会話のポップアップが見つかります。メールは削除されました。これは単一のタイマーです。特定のニーズがある場合は、複数のタイマーを使用できます。
//複数のタイマーケース<入力タイプ= "button" value = "interval" onclick = "interval（）;"> <input = "button" value = "stopinterval" onclick = "stopinterval（）;"> <script> function interval（）{s1 = setinterval（function（）{console.log（123）//連続した出力123}、500）; s1 = setInterval（function（）{console.log（123）}、500）; }関数stopinterval（）{clearinterval（s1）; // 1つの複数のタイマーをクリア} </script>シングルタイマー
<div> <入力タイプ= "button" value = "delete" onclick = "delete（）;"> <入力型= "button" value = "keal" onclick = "undelete（） T1 = setimeout（ClearStatus、1500）; } function clearStatus（）{document.getElementById（ "status"）。innertext = ""; } function undelete（）{cleartimeout（t1）; //タイマーをクリアした後、表示され続けます} </script>イベント
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title> title </head> <body> // normal event <button id = "btn1" onclick = "func（）;"> button </button> <script.getelementbyid（ "btn1"; function func（）{alert（ "rearm time processing"）} </script> // level0処理イベント<ボタンid = "btn2">レベル0処理ボタン</button> <script> var btn = document.getelementbyid（ "btn2"）; btn.onclick = function（）{alert（ "0レベルの処理ボタン"）}; // btn.onclick = null; //イベント処理をクリアすると、複数のイベントが上書きされ、最後のイベントのみが残ります</script> //レベル2処理イベント<button id = "btn3">レベル2処理ボタン</button> <scrip> var btn = document.getelementbyid（ "btn3"）。 var btn1 = document.getElementById（ "btn3"）。addeventlistener（ "click"、function（）{alert（ "secondary processing event 2"）}）; //上書き</script> <button id = "btn4">完全な互換ボタン</button> <scrip> var btn = document.getElementById（ "btn4"）; if（btn.addeventlistener）{btn.addeventlistener（ "click"、demo）; } else if（btn.attachevent）{btn.attachevent（ "onclick"、demo）; } else {btn.onclick = demo; } function demo（）{alert（ "統合互換性イベント処理"）} </script> </body> </html>イベントリスト：
| 財産 | このイベントはいつ発生しますか（いつトリガーされますか） |
| onabort | 画像の読み込みが中断されます |
| onblur | 要素は焦点を失います |
| onchange | エリアの内容が変更されました |
| オンクリック | ユーザーがオブジェクトをクリックしたときに呼び出されるイベントハンドル（入力タグをクリックするときに上記のコード例を実行する） |
| ondblclick | ユーザーがオブジェクトをダブルクリックするときに呼び出されるイベントハンドル |
| onerror | ドキュメントまたは画像のロード中にエラーが発生しました |
| onfocus | 要素は焦点を獲得します |
| OnKeyDown | キーボードキーが押されます |
| Onkeypress | キーボードキーが押されてリリースされます |
| onkeyup | キーボードがリリースされます |
| オンロード | ページまたは画像がロードされています |
| オンマーズダウン | マウスボタンが押されています |
| onmousemove | マウスが移動した後 |
| オンマウスアウト | マウスは要素から除去されます |
| オンマウスオーバー | マウスを要素の上に移動します |
| onmouseup | マウスボタンがリリースされます |
| OnReset | リセットボタンがクリックされます |
| Onresize | ウィンドウまたはフレームはサイズ変更されています |
| onSelect | 選択したテキスト |
| OnSubmit | 確認ボタンがクリックされます |
| sunload | ユーザー終了ページ |
注：タグは複数のイベントをバインドでき、このタグは現在操作中であり、イベントは現在のイベントのコンテンツをカプセル化します。
いくつかのケースを持ってみましょう、そうでなければ私はそれを読んだ後にそれを見たことがないように感じます
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title> </title> <style> ul {list-style：none;パディング：0;マージン：0; } ul li {float：left;バックグラウンドカラー：＃038CAE;色：白;パディング：15px 20px; } .clearfix：after {display：block;コンテンツ： '。';高さ：0;可視性：隠された;クリア：両方; } .hide {display：none; } .tab-menu {border：1px solid #dddddd; } .tab-menu .title {background-color：#dddddd; } .tab-menu .title .active {background-color：white;色：黒;ボーダートップ：2px固体赤。 } .tab-menu .content {border：1px solid #dddddd; Min-Height：150px; } </style> </head> <body> <div> <div> <div> <ul> <liターゲット= "h1" onclick = "show（this）;"> rish target = "h2" onclick = "show（this）;"> market distribution </li> <li target = "h3" onclick = " "content"> <div con = "h1"> content1 </div> <div con = "h2"> content2 </div> <div con = "h3"> content3 </div> </div> </div> </div> </div> </div> </div> <スクリプト> function show（ths）{var target = ths.gettribut（ 'ターゲット（'ターゲット）; ths.classname = 'Active'; var兄弟= ths.parentelement.children; for（var i = 0; i <brother.length; i ++）{if（ths == brother [i]）{} else {brother [i] .removeattribute（ "class"）; }} var content = document.getElementById（ "content"）。子供; for（var j = 0; j <content.length; j ++）{var current_content = content [j]; var con = current_content.getAttribute（ "con"）; if（con ==ターゲット）{current_content.classlist.remove（ "hide"）; } else {current_content.classname = "hide"; }}}} </script> </body> </html>タグメニューケース<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title> title </ittitle> </head> <body> <input type = "button" onclick = "func（）;" value = "Click me"/> <div id = "i1"> <div> 123 </div> <div alex = "sb"> 123 </div> <div> 123 </div> <div alex = "sb"> 123 </div> <div> func（）{// i1 // i1すべての子供、各子供をループし、alex = 'sb' var i1 = document.getElementbyid（ 'i1'）; var divs = i1.children; for（var i = 0; i <divs.length; i ++）{var current_div = divs [i]; var result = current_div.getAttribute（ 'alex'）; // console.log（result）; if（result == "sb"）{current_div.innertext = "456"; }}} </script> </body> </html>カスタム属性を介して要素値を変更します上記の記事には、JavaScript Domオブジェクトを深く理解しています。この記事は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。