JavaScriptのDOM

5322 ワード
DOM
概念
  • DOM:Dockment Object Model文書オブジェクトモデル.
  • DOM役割:操作ページの要素.
  • トップオブジェクトは、documentとはHTMLまたはXMLファイルのことです.
  • HTMLは展示データに重きを置いています.XMLはデータを格納することに重きを置いています.XHTMLはHTMLコードを書いています.XMLの仕様に従います.
  • 各HTMLファイルはドキュメントオブジェクトとして見られ、中のすべてのラベルの階層関係はツリー構造図、ツリー状図として見られます.
  • ページのすべてのコンテンツはノードである.ラベルノード、属性ノード、テキストノード.IE 8において、空白ノード
    • が無視される.
  • ノード属性
  • nodeTypeラベルであれば、値は1です.属性であれば、値は2です.テキストの場合、値は3
    • です.
  • nodeNameラベルであれば、大文字ラベルの名前の値です.属性であれば、小文字属性の名前が設定されます.テキストであれば、钾textの値は
    • です.
  • nodeValueラベルの場合、値はnullです.属性の場合、値は属性値となります.テキストの場合、値はテキスト内容
    • です.
  • ページのラベルは、ラベルが要素であり、要素がオブジェクトとして見られ、ラベルもノードである.
  • ノードは要素より大きい.
  • 本の要素:ページの一番外のラベル
  • 文書要素:ドキュメントの最初の要素、HTML文書要素はです.
    • バインディングと結合
  • 第一の書き方
  • オブジェクト.on+「イベント名」＝イベントハンドラ
  • オブジェクト.on+「イベント名」=null
  • 第二の書き方
  • オブジェクト.addEvent Listener(イベント名、ネーミング関数、false).
  • オブジェクト.revemoevent Listener(「イベント名」、命名関数の名前、false);
    • 事件が勃発する
  • 要素Aには他の要素Bが嵌め込まれています.中の要素Bと外の要素Aは同じイベントを登録しています.中の要素Bのイベントがトリガされると、外の要素Aのイベントも自動的にトリガされます.
  • 事件の泡を防ぐ二つの方法window.event.ccebble=trueまたはe.stopPropagation()
    • 事件の三つの段階
  • 事件の捕獲段階、イベントの目標段階、イベントの発泡段階
  • イベント段階には、イベントパラメータオブジェクト・eventPhiteによって取得する必要がある
    • の属性があります.
  • 属性の値は、1->捕獲フェーズ2->ターゲットフェーズ3->発泡フェーズ
    • である.
  • e.typeは、現在このイベントをトリガするイベントタイプ
    
  var objs=[my$("dv1"),my$("dv2"),my$("dv3")];
  objs.forEach(function(element){
      element.addEventListener("click",function(e){
          console.log(this.id+"==="+e.eventPhase+"==="+e.type);
      },false);
  });
    falseの値は内向的なもので、一般的にはfalse dvd 3==2=click dvd 2==3=click dvd 1=3=3==3=click 
    
  var objs=[my$("dv1"),my$("dv2"),my$("dv3")];
  objs.forEach(function(element){
      element.addEventListener("click",function(e){
          console.log(this.id+"==="+e.eventPhase+"==="+e.type);
      },true);
  });
    trueの値は外向的なdvd 1=1=1=click=
    DOMレベル
  • DOM 0初級段階
  • DOM 1はノードのタイプNodeを規定しており、一般にDOM 1
    • を使用する.
  • DOM 2はいくつかの方法を追加しましたが、多くのブラウザは
    • をサポートしていません.
  • DOM 3ほとんどのブラウザは
    • をサポートしていません.
    グローバル変数と隠しグローバル変数
  • グローバル変数は削除されません.隠しグローバル変数は
    • に削除されます.
    
  var num=10;//    
  number=20;//      
  delete num;//      
  delete number;//        
  console.log(typeof num);//number
  console.log(typeof number);//undefined
    innerTextとinners HTML
  • テキストの内容を設定する場合、2つとも同じ
    • を使用します.
  • タグの内容を設定する場合
  • innerTextはラベルの内容を設定し、表示されているのはラベル＋テキストであり、ラベルは事実上転義語された
    • です.
  • innerHTML設定タグの内容は、効果
    • を示しています.
  • テキストを設定したいなら、誰でもいいです.ラベル効果がほしいなら、innerHTML
    • を使ってください.
  • はラベルのテキスト内容を取得し、innerTextとinnerHTMLを使ってもいいです.取得したのが要素の中のラベルとテキスト内容なら、inners HTML
    • を使うべきです.
    innerTextとtextContent
  • innerText:Googleは支持して、低いバージョンのNARUTOは支持しないで、高いバージョンのNARUTOは支持して、IE 8は
    • を支持します.
  • textContent:Googleは支持して、火狐は支持して、IE 8は
    • を支持しません.
  • ブラウザがある属性をサポートしていない場合、この属性のタイプはundefined
    • です.
    クラスナメ
  • htmlタグの中のクラスの属性は、jsの中でキーワードで、直接使うことができません.ですから、対象.クラス＝「値」です.この書き方は間違っています.対象.クラスName=「値」と書くべきです.
  • オブジェクト.style.属性名=値;div.style.background Color="red"
  • オブジェクト.クラスName="値"div.className="cls"
    • カスタム属性
  • は、ユーザー定義属性の値オブジェクトを取得する.戻り値は、この属性の値
    • です.
  • カスタム属性の値オブジェクトを設定します.setAttribute(「属性の名前」、「値」)
  • removeAttribute、get Attribute、set Attributeの3つの方法は、要素のカスタム属性と値を操作するだけでなく、要素の持つ属性
    • を操作することもできます.
    隠しモード
    
  zy$("btn").onclick=function(){
    zy$("div").style.display="none";//          
    zy$("div").style.visibility="hidden";//   
    zy$("div").style.opacity=0;//   
    zy$("div").style.width=0;//   
    zy$("div").style.height=0;
  }
    スタイルの設定
  • スタイルの属性がスタイル属性に設定されている場合、直接取得できる
    • である.
  • スタイルの属性がスタイルラベルに設定されている場合、直接
    • を取得できません.
    ノード要素12個を取得
    
 console.log(zy$("uu").childNodes);
 console.log(zy$("uu").children);//    
 console.log(zy$("uu").parentNode);//    
 console.log(zy$("uu").parentElement);
 console.log(zy$("uu").firstChild);
 console.log(zy$("uu").firstElementChild);
 console.log(zy$("uu").lastChild);
 console.log(zy$("uu").lastElementChild);
 console.log(zy$("uu").previousSibling);
 console.log(zy$("uu").previousElementSibling);
 console.log(zy$("uu").nextSibling);
 console.log(zy$("uu").nextElementSibling);
    要素を作成する2つの方法
  • 第一のオブジェクト.innerHTML="ラベルコードと内容"
  • 第二種類のdocument.creat Element
    • シリーズ
    オフセットシリーズ
  • offset Left:要素は左側の横軸に対して
    • である.
  • offset Top:上記の縦軸
    • に対する要素
  • offset Width:要素の幅、フレーム
    • があります.
  • offset Height:元素の高さ、フレーム
    • があります.
  • offsetシリーズで取得された値は、すべてデジタルタイプ
    • である.
  • offset Width(offset Height)取得された要素自体の幅(高)＋要素の枠の幅(高)
  • 親レベルの要素が文書ストリームから離れると、サブレベルの要素がこの時点でoffset Leftで取得されるのは、親レベルの要素に対するpading＋自分のmargin
    • である.
  • 要素が自分で文書フローを抜けたら、この時点のoffset Leftは自分のleft+自分のmagin
    • を取得する.
    scrollシリーズ
  • scrollLeft:左に丸めた横軸
  • scrollTop:上に丸めた縦軸
  • scrollWidth:コンテンツの実際の幅、コンテンツがないと要素の幅、フレームがない
  • scrollHeight:内容の実際の高さ、内容がないのは元素の高さで、枠がないのは
    • です.
    Cientシリーズ
  • clientX:可視領域の横座標
  • clientY:可視領域の縦軸
  • clientWidth:可視領域の幅
  • clientHeight:可視領域の高さ
    • 1.Two Sum——JavaScript解法