ケース1 - ノード操作と最後の子の最初の子ノード

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
  < メタのcharset = "UTF-8" > 
  < タイトル>ドキュメント</ タイトル> 
</ ヘッド> 
< 身体> 
  < DIV ID = "ボックス" > 
    < DIV >これは、広告写真である。</ divの> 
    < UL > 
      < 李>これはリストである</ 李>
    </ UL >
    < スパン>の説明文</ スパン> 
  </ divの> 

  < スクリプト> 
    // box.firstChild得る最初の子ノード
    // box.firstElementChildは、互換性の問題はサポートIE9以降、ありますが、最初の子を取得
    / /  
    // box.lastChild取得最後の子
    // box.lastElementChildは最後の子を取得し、互換性の問題があり、サポートIE9の以来
    のvar ボックス= のdocument.getElementById（「ボックス」）;
     // はconsole.log（ボックス.firstChild）; 

    // はconsole.log（box.firstElementChild）; 


    VARのELE = getFirstElementChild（ボックス）。
    console.log（ELE）。

    //处理浏览器兼容性
    機能getFirstElementChild（要素）{
         VARのノード、ノード= element.childNodes、I =  0 。
        一方（ノード= ノード[I ++ ]）{
             場合（node.nodeType ===  1 ）{
                 戻りノード。
            } 
        } 
        戻り ヌル。
    } 
  </ スクリプト> 
</ ボディ> 
</ HTML >