Microsoft PowerPoint _2b-DOM.pptx

Size: px

Start display at page:

Download "Microsoft PowerPoint - 2016_2b-DOM.pptx"

さあしゃもちやま
7 years ago
Views:

1 < 練習 2-11> DOMの空白ノード 2_nodeVisit の実行結果 ( 前ページ)から,HTML をルート要素とするDOMの木構造を示しなさいただし, 空白ノードは空白,その他のテキストノードはテキストとすること HTML DOMによる文書データの参照と変更 DOMツリー内のノード参照相対位置によるノード参照 (ノード間の親子兄弟関係 ) タグ名による要素リストの取得 id 属性によるノード参照 DOMノードの生成テキストノードの生成要素ノードの生成以下の説明では特に断らない限りDOMツリーの空白ノードは考えないものとする DOMツリーへのノード追加 DOMツリーからのノード削除 JavaScriptのメソッドとプロパティオブジェクト: 文書中に含まれる( 存在する) もの DOMノード(ドキュメント, 要素, 属性,テキストなど) ドキュメントノードは変数 document によっていつでも参照可能メソッド: オブジェクトに対して利用可能な操作 getelementbyid, getelementsbytagname など例 : document.getelementsbytagname('') オブジェクト名.メソッド() プロパティ: オブジェクトが保持するデータ firstchild, lastchild, nextsibng など例 : node.firstchild オブジェクト名.プロパティ相対位置によるノード参照オブジェクト node1 オブジェクト名.プロパティ node1.firstchild ( 先頭の子ノード) D E ( 直前の兄弟ノード) node2.previoussibng node1.parentnode ( 親ノード) A B F node2 G C node1.lastchild ( 末尾の子ノード) ( 直後の兄弟ノード) node2.nextsibng 19 20

17 18 JavaScriptのメソッドとプロパティオブジェクト: 文書中に含まれる( 存在する) もの DOMノード(ドキュメント, 要素, 属性,テキストなど) ドキュメントノードは変数 document によっていつでも参照可能メソッド: オブジェクトに対して利用可能な操作 getelementbyid,

2 < 練習 2-12> 相対位置によるノード参照タグ名による要素リストの取得 [3_getElementsByTagName] ノードF(node1)からノードCを参照する式を (a) (b) 2 通りの経路で示しなさいタグ名に該当する要素ノードの集合を取得 document.getelementsbytagname( タグ名 ) 'Elements' ( 複数形 ) であることに注意 A (b) ul この例では,4つの要素が取得されるオブジェクト名.メソッド() document.getelementsbytagname('') D E B F (a) G C 取得された要素のうち3 番目を選択する(0 から数えるので, itemの引数は2となる) node1 document.getelementsbytagname('').item(2) 21 タグ名で要素を取得すると, 該当する要素が複数存在する場合があるので,itemメソッドで個別の要素を指定する必要がある 22 JavaScriptコンソール: DOM API を実行可能 DOM APIの実行例 (1) Console タブを選択ここに DOM API (JavaScriptの実行文 )を入力すると, 次の行に実行結果が表示される変数 document を入力するとDOM ツリーが出力される 23 <html> <head> </head> <>Webブラウザ</> <ul> <>Firefox</> <>Opera</> <>Safari</> <>Chrome</> </ul> 24

3 id 属性ページ内の要素を一意に識別するページ内の異なる要素のid 属性に対して, 同一の属性値を用いることはできない( 文法的に誤り) id 属性によるノード参照 [4_getElementById] 識別子 (id 属性の値 )から要素を参照 document.getelementbyid( 識別子 ) 'Element'( 単数形 ) であることに注意 document.getelementbyid('sa') 例 : <>Webブラウザ</> <ul> < id= Fi">Firefox</> < id= Op">Opera</> < id= Sa">Safari</> < id= Ch">Chrome</> </ul> id 属性の値によって, 各要素を一意に区別することができる id="fi" Firefox id="op" ul id="sa" id="ch" Opera Safari Chrome 指定されたid 属性の値を持つ要素を取得するテキストノードは先頭の子ノード (firstchild) 25 document.getelementbyid('sa').firstchild 26 DOM APIの実行例 (2) < 練習 2-13> DOMノードの参照 <html> <head> </head> <>Webブラウザ</> <ul> < id= Fi >Firefox</> < id= Op >Opera</> < id= Sa >Safari</> < id= Ch >Chrome</> </ul> 右のHTML 文書中の該当する要素を, 対応するid 属性の値で答えなさい.ただし, 空白ノードは考えないものとする. (a) 深さ5の位置にある要素の親要素 (b) 文書順で走査したとき要素の次に訪問される要素 (c) document.getelementsbytagname('title').item(0) によって参照される要素 (d) document.getelementbyid('7').parentnode によって参照される要素 (e) document.getelementbyid('4').firstchild.lastchild によって参照される要素 <html id="0"> <head id="1"> <title id="2">q2-13</title> </head> < id="3"> <div id="4"> <div id="5"></div> <div id="6"> <div id="7"></div> </div></div> 27 28

getelementbyid('sa') 例 : <>Webブラウザ</> <ul> < id= Fi">Firefox</> < id= Op">Opera</> < id= Sa">Safari</> < id= Ch">Chrome</> </ul> id 属性の値によって, 各要素を一意に区別することができる id="fi" Firefox id="op" ul

4 for 文による繰り返し: 簡単な例継続条件が真 (true)である間, 処理を繰り返す例 : for ( 初期化式 ; 継続条件 ; 再処理式 ) { 繰り返し処理 <script> var sum = 0; for ( var n=1 ; n<=10 ; n++ ) { sum = sum + n; alert( " 結果 : " + sum ); </script> 繰り返し処理および再処理式を実行する初期化式まず n の値を1とする継続条件 n の値が10 以下である間, 次の処理を繰り返す: 繰り返し処理数 sum に n の値を加える再処理式その後 n に 1を加える(n++) 29 相対位置参照による DOMツリーの走査 [5_treeWalk2] node.firstchild child 1 B child.nextsibng A node <script> child 2 child 3 child var count = 0; 4 C D E treewalk2(document); 初期化式まず変数 child の値を nodeの先頭の子ノードとする継続条件変数 child の値がnull でない間, 以下の処理を繰り返す: 繰り返し処理 childに対して treewalk2 を呼び出す再処理式その後 childの直後の兄弟ノードを childとする function treewalk2(node) { count = count + 1; console.log( count + ". " + node.nodename); for( var child = node.firstchild; child!= null; child = child.nextsibng ) { treewalk2(child); </script> 30 DOMノードの生成 DOMツリーへのノード追加要素ノードの生成 document.createelement( タグ名 ) テキストノードの生成 document.createtextnode( テキスト ) 例 : パラグラフ(p) 要素とテキストの生成生成されたノードは DOMツリーに追加されなければブラウザに表示されない新しいノードを末尾の子ノードとして追加 node.appendchild( 新しいノード ) 例 : パラグラフ要素とテキストノードの追加 html p 要素を追加する親ノード( 要素 )を取りだす (3) Node = document.getelementsbytagname('').item(0); <html> <head>... </head> <> 見出し</> <p> 本文 </p> newnode = document.createelement( "p" ); (1) p テキストノードは, 子ノードとして要素ノードに追加さ本文れなければならない textnode = document.createtextnode( " 本文 " ); (2) 31 head Node textnode p 本文 newnode Node.appendChild( newnode ); p 要素を要素の子ノードとして追加 newnode.appendchild( textnode ); テキストノードをp 要素の子ノードとして追加 (4) (5) 32

位置参照による DOMツリーの走査 [5_treeWalk2] node.firstchild child 1 B child.

5 DOMノードの生成追加 [6_appendChild] 開発ツールでの表示 [6_appendChild] <input type="button" value=" 追加 " oncck="add()" /> <> 見出し</> 追加ボタンが <script type="text/javascript"> クリックされたら var count = 1; 関数 add を呼出す function add() { var newnode = document.createelement('p'); var textnode = document.createtextnode( ' 本文 ' + (count++) ); newnode.appendchild(textnode); var Node = document.getelementsbytagname('').item(0); Node.appendChild(newNode); </script> 新たに追加生成された p 要素とテキストノード DOMツリーからのノード削除 [7_removeChild] DOMノードの生成追加削除 [8_createBox] nodeの子ノードから指定されたノードを削除 node.removechild( ノード ) html 追加ボタンを3 回クリック例 : 要素から要素を削除する head html head Node 見出し Node.parentNode (2) (3) Node.parentNode.removeChild( Node ); (1) Node.parentNode ( 要素 )の子ノードから Node を削除する Node = document.getelementsbytagname('').item(0); 35 title input input p id="box" ボックス追加ボックス削除ボタンに対応するinput 要素 div (1) 追加 div (2) 追加 div (3) 追加 script (4) 削除削除ボタンを1 回クリック 36

6 ボックス(div 要素 )の削除 [8_createBox] input input p id="box" script p 要素の子ノードである複数のdiv 要素のうち, 末尾のdiv 要素を削除する targetnode div div div id="box" である要素の末尾の子ノードを取得 var targetnode = document.getelementbyid("box").lastchild; if( targetnode!= null ) { targetnode.parentnode.removechild(targetnode); else { alert( "ボックスがありません" ); 取得したdiv 要素 (targetnode)を親ノードから削除 37

targetnode = document.getelementbyid("box").lastchild; if( targetnode!= null ) { targetnode.

Microsoft PowerPoint _2b-DOM.pptx

Microsoft PowerPoint _2b-DOM.pptx 要素ノードの参照プロパティで参照可能な親子兄弟ノード要素ノードの他に, テキストノード, ノード, コメントノードなど様々なノードが含まれる ( 処理中に判別が必要 ) 要素ノードのみ参照するプロパティプロパティ参照先 parentelement 親要素 firstelementchild 先頭の子要素 lastelementchild 末尾の子要素 nextelementsibng 直後の兄弟要素