DOM基本操作一

1.domオブジェクトのinnerTextとinnerHTMLの違いは何ですか?

innerTest:オブジェクト内のテキスト内容を表示innerHTML:要素を返すHTML構造で、書き込み時にも自動的にDOMが構築されます

2.elem.子供とelemchildNodesの違いは?

elem.children:非標準で、指定した要素のサブ要素の集合を返します.テストにより、HTMLノードのみが返され、テキストノードは返されません.
elem.childNodes:標準的で、HTMLノード、すべての属性、テキストを含む指定された要素のサブ要素の集合を返します.NodeTypeによってどのタイプのノードであるかを判断することができ,nodeType=1の場合のみ要素ノード,2は属性ノード,3はテキストノードである.

3.クエリー要素にはいくつかの一般的な方法がありますか?

getElementById:メソッドは、指定したID属性に一致する要素ノードを返します.一致するノードが見つからない場合はnullを返します.これも要素を取得する最も速い方法です
getElementsByClassName:メソッドは、指定された条件に合致するすべてのclass名の要素(検索範囲はそれ自体を含む)を含む類似配列のオブジェクト(HTML Collectionタイプのオブジェクト)を返します.要素の変化は、戻り結果にリアルタイムで反映されます.このメソッドはdocumentオブジェクトだけでなく、任意の要素ノードで呼び出すこともできます.
getElementsByTagName:メソッドは、指定したラベルのすべての要素を返します(検索範囲にはそれ自体が含まれます).戻り値はHTML Collectionオブジェクトであり、検索結果はダイナミックな集合であり、どの要素の変化も戻りの集合にリアルタイムで反映されます.この方法はdocumentオブジェクトだけでなく、任意の要素ノードでも呼び出すことができます.
getElementsByName:form、img、frame、embed、objectなどのname属性を持つHTML要素を選択するには、NodeList形式のオブジェクトを返し、要素の変化をリアルタイムで反映しません.互換性のないIEブラウザ
querySelectorメソッドは、指定したCSSセレクタに一致する要素ノードを返します.複数のノードが一致条件を満たす場合、最初の一致するノードが返されます.一致するノードが見つからない場合はnullを返します
querySelectorAllメソッドは、指定したCSSセレクタに一致するすべてのノードを返し、NodeListタイプのオブジェクトを返します.NodeListオブジェクトは動的集合ではないため,要素ノードの変化は戻り結果にリアルタイムで反映されない.

4.要素を作成する方法エレメントのプロパティを設定するにはどうすればいいですか?

createElementメソッドは、HTML要素ノードを生成するために使用されます.

var newDiv = document.createElement("div");

createTextNodeメソッドは、生成するテキストノードの内容のパラメータを持つテキストノードを生成するために使用されます.

var newDiv = document.createTextNode("your")

createDocumentFragmentメソッドは、メモリに存在するDOMクリップであるDocumentFragmentオブジェクトを生成しますが、現在のドキュメントには属しません.複雑なDOM構造を生成し、現在のドキュメントを挿入するためによく使用されます.DocumentFragmentは現在のドキュメントに属していないため、変更されてもWebページの再レンダリングは発生しません.現在のドキュメントを直接変更するDOMよりもパフォーマンスが向上します.

var docFragment = document.createDocumentFragment()

属性の設定:

  var node=document.getElementById("test");
  node.setAttribute("myAttrib","new-value");

5.要素の追加、削除？

appendChild(),在元素末尾添加元素
insertBefore(),在某个元素之前插入元素
删除元素使用removeChild()方法即可或replaceChild( )替换节点

6.DOM 0イベントとDOM 2レベルは、イベントリスニングの使用方法にどのような違いがありますか?

a.DOM0 级事件处理程序不能添加多个事件处理程序，前面的会被后面的覆盖,一共有2种

  var btn=document.getElementById("btn");
  btn.onclick=function show(){
      alert("hello everyone")
  }
  btn.onclick=function showmessage(){
      alert("hello two")
  };// onclick onclick 
  btn.onclick=null;//onclick  

b.DOM 2レベルのイベントは、addEventListener()とremoveEventListener()の2つのメソッドを追加および削除するために定義されています.addEventListener():要素に複数のイベントハンドラを追加できます.また、同じイベントタイプでも、異なる効果が重なり、トリガーされると、追加順に順番に呼び出されて実行されます.removeEventListener():addEventListener()メソッドで追加されたイベントハンドルを削除するために使用され、匿名で追加された関数は削除できません.すべてのDOMノードはこの2つの方法を含み、3つのパラメータ:1を受け入れる.イベントタイプ2.イベント処理方法3.ブールパラメータ、trueがキャプチャフェーズでイベントハンドラを呼び出すことを示す場合、falseの場合、イベントバブルフェーズで処理されます.

7.attachEventとaddEventListenerの違いは?

a.パラメータの個数が異なり、この最も直感的で、addEventListenerには3つのパラメータがあり、attachEventは2つしかなく、attachEventが追加したイベントハンドラはバブルフェーズでしか発生しない.addEventListenerの3番目のパラメータは、追加したイベントハンドラがキャプチャフェーズであるかバブルフェーズであるか(一般的にブラウザ互換性のためにバブルフェーズに設定されている)b.最初のパラメータの意味が異なることを決定することができる.addEventListenerの最初のパラメータはclick,loadなどのイベントタイプであり、attachEventの最初のパラメータはイベント処理関数名(onclick,onload)を示す
c.イベントハンドラの役割ドメインは異なり、addEventListenerの役割ドメインは要素そのものであり、thisはトリガ要素を指し、attachEventイベントハンドラはグローバル変数内で実行されるので、thisはwindowであるため、さっきの例はundefinedを返し、要素idではない
d.1つのイベントに複数のイベントハンドラを追加する場合、実行順が異なりaddEventListener追加は追加順に実行されるが、attachEventが複数のイベントハンドラを追加する場合は順序が不規則である(追加方法が少ない場合は追加順の逆順に実行されることが多いが、追加が多いと不規則になることが多い)ため、複数追加する場合は、実行順に依存しないほうがよい、関数の実行順序に依存する場合は、ブラウザを期待しないで自分で処理したほうがいいです.

8.IEイベントの泡立ちとDOM 2イベントの伝播メカニズムを説明しますか?

IEのイベントバブル:イベントの開始時に最も具体的な要素によって受信され、それから段階的に上へ伝播して比較的具体的ではない要素DOM 2級イベントに規定されたイベントフローは3段階を含み、イベントキャプチャ段階、目標段階にあり、イベントバブル段階、まず発生したのはイベントキャプチャであり、イベントキャプチャのために機会を提供し、それから実際の目標受信イベントであり、最後にバブル段階である

9.どのようにして事件の泡を阻止しますか?デフォルトのイベントをブロックするにはどうすればいいですか?

事件の泡を止める

function stop(e){
      if(e.stopPropagation){
          e.stopPropagation()// 
      }else{
          e.cancelBubble=true;//IE
      }
  }

イベントのデフォルトの動作をブロック

function preDafault(e){
      if(e.preventDefault){
          e.preventDefault();// ， cancelable true
      }else{
          e.returnValue=false;//IE
      }
  }