ドキュメントの操作

11434 ワード
操作
  • ノードの作成
  • ノードの追加
  • ノードの削除
  • タスクおよび例
  • まとめ

    • DOMの修正は、ダイナミックなWebページを構築する鍵です.次の方法では、新しいWebページを作成し、動的に変更できます.
    詳細なDOM操作方法についてはDOM1を参照してください.
    ノードの作成
    DOMに要素を作成するには、次の方法を使用します.
  • document.createElement(tag):要素ノードの作成
    var div = document.createElement('div')

  • document.createTextNode(text):テキストノードの作成
    var textElem = document.createTextNode('Robin was here')


    • createElementメソッドは最も広く使われていますが、createTextNodeメソッドもよく使われています.テキストノードが作成され、他の要素に追加できます.
    空の要素の場合、テキストノードを作成し、他の要素に追加するのはinnerHTMLよりも効率的です.
    しかしinnerHTMLは比較的簡潔で、ラベルのネストをサポートしているため、両者とも広く使われている.
    1つの要素はクローン化できます.
  • elem.cloneNode(true):深度コピー(サブノードを含む)
  • elem.cloneNode(false):浅いコピー
    • ノードの追加
    parentElem.appendChild(elem):parentElemノードにelemサブノードを追加します.
    次のコードでは、要素を作成してBODYに追加する方法を示します.
    <div>

  ...

</div>

<script>

  var div = document.body.children[0]



  var span = document.createElement('span')

  span.innerHTML = 'A new span!'

  div.appendChild(span)

</script>

    新しい要素は最後のサブノードになります.
    空のコンテンツの要素ノードelemがあり、次の2つの操作方法が異なります.textコンテンツは「tag」です.
  • elem.appendChild(document.createTextNode(text))
  • elem.innerHTML = text

    • リンクの実装
    parentElem.InsertBefore(elem,nextSibling):parentElemのサブノードnextSiblingの前にelemを挿入します.
    プレゼンテーション:
    <div>

  ...

</div>

<script>

  var div = document.body.children[0]



  var span = document.createElement('span')

  span.innerHTML = 'A new span!'

  div.insertBefore(span, div.firstChild)

</script>

    注意insertBeforeの2番目のパラメータがnullの場合、機能はappendChildと同じになります.
    elem.insertBefore(newElem, null) // same as

elem.appendChild(newElem)

    すべての挿入メソッドは、追加されたノードを返します.
    ノードの削除
    DOMからノードを削除するには、主に2つの方法があります.
  • parentElem.removeChild(elem):parentElemサブノードからelem要素
    • を削除する
  • parentElem.replaceChild(elem,currentElem):parentElemからelem要素を置換するcurrentElem
    • 両方のメソッドは削除されたノードを返しますが、DOMに再挿入できます.
    エレメントを移動したい場合は、先に削除する必要はありません.elem.appendChild/insertBefore elem。
    次の例では、最後の要素をサブノードの最初の位置に移動する方法を示します.
    <div>First div</div>

<div>Last div</div>

<script>

  var first = document.body.children[0]

  var last = document.body.children[1]

  

  document.body.insertBefore(last, first)

</script>

    タスクおよび例
    InsertAfter(elem,refElem)メソッドを記述し、elemノードをrefElemノードの後に挿入します.
    <div>Very</div>

<div>Secret</div>



<script>

  var elem = document.createElement('div')；

  elem.innerHTML = 'Child'；



  function insertAfter(elem, refElem) { 
      }
    

  insertAfter(elem, document.body.firstChild) 

  insertAfter(elem, document.body.lastChild)  

  

</script>

     
    参考答案
     
    メソッドremoveChildrenを作成して、要素のすべてのサブノードを削除します.
    <div>Very</div>

<div>Secret</div>

<div>Children</div>



<script>

  function removeChildren(elem) { 

  }



  removeChildren(document.body) //    BODY      

</script>

    参考答案
     
    次の機能を持つプログラムを作成します.
  • ダイアログ・ボックスのプロンプトにより、ユーザはコンテンツを入力する.(promptメソッドポップアップダイアログ)
  • コンテンツに基づいてLIノードを作成し、ULに追加する
    • .
  • ESCが押されたとき、プログラムを停止します.そうでなければ、ずっと実行します.

    • 参考答案
    まとめ
    ノードを作成するには
  • document.createElement(tag)新しいラベル
    • を作成する
  • document.createTextNode(value)指定されたコンテンツのテキストノードを作成する(テキストコンテンツの作成時のinnerHTMLとの違いに注意)
  • elem.cloneNode(deep)クローン要素ノード
  • deep:true深コピー
  • deep:false浅いコピー

    • ノードの挿入と削除:親ノード呼び出しメソッドはelemを返します.
  • parent.appendChild(elem)
  • parent.insertBefore(elem, nextSibling)
  • parent.removeChild(elem)
  • parent.replaceChild(elem, currentElem)
    • PHPは配列の任意の下付きキーの前のprevと次のnext下付き値を取得する
    Lua