Affirmative Way (オフライン版で公開はされてないよ)

2008-12-18

webjs4

12:34

ツリー構造

htmlの表現
<html>
  <head>
    <title>オレページ</title>
  </head>

  <body>
    <p>ほげ</p>
  </body>
</html>
木構造

html ─┬─ head ─── title ─── オレページ

└─ body ─── p ─── ほげ

オブジェクトリテラル風味
var html = {
  head:{title:オレページ},           
  body:{p:ほげ}
}

dinoのページを改編

1. #news 直下のUL要素を取得
var newslist = document.getElementById("news").getElementsByTagName('ul')[0];

○ 中身でやってることの手順 (それぞれhttp://dino.co.jpを開いて、Firebug上のコンソールで試して出力されるたものを確認してみましょう)

1.1 div#newsのエレメントが取得できる

  console.log( document.getElementById("news"));

1.2 div#newsの中のulすべてのエレメントを配列で取得する

  console.log( document.getElementById("news").getElementsByTagName('ul'));

1.3 一つ目のulを取得する

  console.log( document.getElementById("news").getElementsByTagName('ul')[0]);


2. 先頭のLI要素が持つ、二番目のP要素を取得
var news = newslist.getElementsByTagName('li')[0].getElementsByTagName('p')[1]

○ 中身でやってることの手順 (それぞれFirebug上のコンソールで(ry)

2.1 newslistの先頭のLIを取得 

  var news = newslist.getElementsByTagName('li')[0].getElementsByTagName('p')[1]
  console.log( newslist.getElementsByTagName('li')[0]);

2.2 LIの中の二番目のpを取得

  var news = newslist.getElementsByTagName('li')[0].getElementsByTagName('p')[1]
  console.log( newslist.getElementsByTagName('li')[0].getElementsByTagName('p')[1])


3. P要素の現在の子要素を置き換える
var new_text = document.createTextNode('どうやら、さわーが本気を出し始めたようだ')
news.replaceChild(news_text, news.firstChild);
// ※この辺は、おまじないなので面倒なことやるんだなー程度の認識でOK

最後に、firebugのコンソールで以下を実行してみよう

  // 1.#news直下の UL 要素を取得
  var newslist = document.getElementById("news").getElementsByTagName('ul')[0];

  // 2.先頭のLI要素が持つ、二番目のP要素を取得
  var news = newslist.getElementsByTagName('li')[0].getElementsByTagName('p')[1];

  // 3.P要素の現在の子要素と置き換える
  // 置き換える文字を定義
  var new_text = document.createTextNode('どうやら、さわーが本気を出し始めたようだ')
  news.replaceChild(new_text, news.firstChild);