巡回DOM

44166 ワード

職場レジャー巡回DOM

   
   
   
   
    
    
    
    html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
    
    
    
        <head> 
    
    
    
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    
    
    
                <title>JavaScript!title> 
    
    
    
        head> 
    
    
    
        <body> 
    
    
    
           
    
    
    
            <p id="intro">My first paragraph...p> 
    
    
    
          
    
    
    
            <ul> 
    
    
    
                <li>List item 1li> 
    
    
    
                <li>List item 1li> 
    
    
    
                <li>List item 1li> 
    
    
    
                <li>List item 1li> 
    
    
    
                <li>List item 1li> 
    
    
    
            ul> 
    
    
    
          
    
    
    
            <script type="text/javascript"> 
    
    
    
            //  
    
    
    
            
    
    
    
           // ]]> 
    
    
    
            script> 
    
    
    
          
    
    
    
        body> 
    
    
    
    html>

最初の例では,’getElementById’というDOM法を用いて,我々の段落にアクセスする.

   
   
   
   
    
    
    
    var introParagraph = document.getElementById('intro');  
    
    
    
    /          DOM  ，  DOM    intro  。

変数’intropraph’は今DOMノードを指しています.私たちは今このノードで多くのことをすることができます.その内容と属性を読み取ることができます.また、その任意の態様を制御することもできます.それを削除したり、クローンしたり、DOMツリーの他の場所に移動したりできます.
JavaScriptとDOMインターフェースを使って、現在のドキュメントの中のいかなるものにもアクセスできます.したがって、私たちは同様の方法でドキュメント内の無秩序リストにアクセスしたいかもしれませんが、唯一の問題はIDがないことです.ID属性を与えて、同じ方法でそれにアクセスしたり、’getElements ByTagName’方法を使ってアクセスしたりすることができます.

   
   
   
   
    
    
    
     var allUnorderedLists = document.getElementsByTagName('ul');  
    
    
    
    // 'getElementsByTagName'            /    
    
    
    
    //                     。

getElements ByTagName
getElementsByTagName法は、現在存在するノードのセット／リストを返します.配列と似ている点は、length属性もあります.注意すべき重要な点は、これらのセットは「即時」であり、もしあなたがDOMに新しい要素を追加したら、このセットは自動的に自己更新される.それは配列と似ているので、インデックスを使用して各ノードにアクセスでき、0からこのセットの全体長(1を減らす).

   
   
   
   
    
    
    
    //         : [0] index  
    
    
    
    var unorderedList = document.getElementsByTagName('ul')[0];  
    
    
    
          
    
    
    
    //  UL            :  
    
    
    
    var allListItems = unorderedList.getElementsByTagName('li');  
    
    
    
         
    
    
    
    //         for       :  
    
    
    
    for (var i = 0, length = allListItems.length; i < length; i++) {  
    
    
    
        //         alert    :  
    
    
    
        alert( allListItems[i].firstChild.data );  
    
    
    
    }

巡回DOM
「巡回」という用語は、DOM全体にわたってノードを探索する動作を記述するために使用される.DOMインターフェースは、ドキュメント内のすべてのノードに自由にアクセスできるように多くのノード属性を提供してくれます.これらのノード属性は、関連する／隣接するノードへのアクセスを容易にすることができる.
Node.childNodes:それを使って、ある要素の直属のすべての要素にアクセスできます.これは同じ配列のオブジェクトを返します.巡回できます.配列中のノードは、テキストノードおよび他のタイプの要素ノードのようなすべての異なるタイプのノードを含むことができる.
◆Node.first Child:この属性は、訪問’childNodes’配列の最初のエントリに相当します.それは近道です
◆Node.lastChild:この属性は、訪問’childNodes’配列の最終項に相当します.それも近道です. ◆Node.parent Node:この属性は、現在のノードの親ノードにアクセスすることができます.唯一の親ノードがあります.祖父のクラスノードにアクセスしたいなら、「Node.parent Node」を使ってもいいです. ◆Node.nextSibling:このプロパティは、DOMツリーの下の次のノードにアクセスすることができます.
◆Node.previous Sibling:この属性は、DOMツリーの同レベルの前のノードにアクセスすることができます.
だから、あなたが見ているように、DOMを遍歴するのはこのように簡単です.彼のノードの属性を熟練に運用している限りです.
リスト項目は彼らの間にスペースがない場合のみ検索できます.文書では、テキストノードとエレメントノードが得られ、'と'

'の間のスペースもノード(テキストノード)として扱われるからです.同様に、無秩序リストは厳密には段落の次の兄弟ノードではなく、彼らの間にスペースがあり、つまり別のノードである.この場合、通常は、「childNodes」配列を巡回して、それらの「nodeType」をテストしてもいいです.「nodeType」の値は1が元素ノードで、2が属性で、3がテキストノードです.
これはJavaScriptの基本的な動作です.ローカルDOMの方法と属性の綺麗なアクセスを使って文書の中の要素を抽出することができます.今は、煩雑な枠組みから離れて、基本的なDOM操作を独立して行うことができます.

js:RazorビューでサーバコードがJavascript変数に割り当てられます.