中に入っていますので、この値で「こんにちは」を書き替えます。次はHTMLの要素にアクセスする方法の2つ目のgetElementsByTagNameメソッドについて説明します。この例ではgetElementsByTagNameメソッドを使って「input要素を取り出し」、その中から「itemという命令」を使ってインデックス番号が0の要素を取り出しています。getElementsByTagNameはid属性がない要素にアクセスしたい場合に使います。引数にはid名の代りに要素名を指定します。getElementsByTagNameの引数に要素名を書くと、その指定した要素にアクセスすることが出来ます。この例で言いますと以下のinputタグのすべての要素にアクセス出来ます。この中から特定したデータを取り出したい場合は以下のようにitemメソッドを使います。itemメソッドはノードを取得するメソッドです。itemメソッドの引数に数値を指定します。記述することでそのノードの値を取得することが出来ます。このobjにはitemメソッドで指定したノードが入っています。「push」をクリックすると以下のダイアログボックスが表示されます。前の例では特定の値だけを取り出していましたが、すべての値を取り出す方法を以下の例で説明します。inputタグの要素を取得します。変数(sf変数)に入れて、その変数にlengthを付けることによりinputタグの要素数を取得します。ように-1をしている理由は-1を付けないと以下のvalueの値まで取得してしまうからです。「length-1」の数だけfor文でループすると以下のようになります。結果は以下の通りです。次はHTMLの要素にアクセスする方法の3つ目のgetElementsByNameメソッドについて説明します。name属性から要素を取り出すにはgetElementsByNameを使います。name属性からその属性のデータにアクセスしています。aは以下の3か所あります。itemメソッドの引数に数値を指定します。記述することでそのノードの値にアクセスすることが出来ます。このobjにはitemメソッドで指定したノードが入っています。結果は以下の通りです。次はHTMLの要素にアクセスする方法の4つ目のgetElementsByClassNameメソッドについて説明します。クラス名を使って要素にアクセスします。getElementsByClassNameメソッドの引数にclass名を指定しますとそのクラス名を持つ要素を取得できます。ようにアクセスしたいクラス名を引数に書きます。次に以下の箇所の説明をします。itemメソッドの引数に数値を指定します。このobjにはitemメソッドで指定したノードが入っています。結果は以下の通りです。他の例をみてみましょう。この例は先ほどの例を変更したものです。以下の箇所以外は同じプログラムです。以前、「style.color」で色を変えたのを覚えているでしょうか。ここではitemメソッドの0番目の要素のテキストの色を赤に変更しています。次はDOMを使ってHTMLの中身を書き替えます。これまでの例でもinnerHTMLを使って、文章を書き替えていましたが、ここでは他の方法で文章を書き替えたり、新しい要素を作成する方法を紹介します。書くことでテキストノードを作成することが出来ます。この例では「宮本武蔵です」というテキストを作成しています。createTextNodeメソッドだけでは実際には画面上には反映されません。して、追加するノードを記述します。箇所ですが、pにテキストを追加しています。結果は以下の通りです。次は新しいタグをhtmlの中に作る方法について説明します。getElementByIdでid属性の値aのノードを取得します。言う形式でh3タグを新規に作成します。新たなテキストを作成します。appendChildでh3タグに「こんにちは」と言うテキストを追加します。「push」をクリックすると「あ」を表示します。次はinsertBeforeについて説明します。insertBeforeはすでにある子ノードの前に新しいノードを入れるためのメソッドです。いう記述で親要素のノードが取得できます。引数にbodyを指定して、itemメソッドの引数を0にします。=>新たに「<div>タグ」を作ります。=>テキストノードを作成します。=>「<div>タグ」に「’追加x’」を追加します。言う形式で書いてください。前に新しく作った「<div>」を挿入します。表示をみてみましょう。以下の「push」をクリックします。追加されていることが分かります。「push」を押すごとに追加されていきます。次は指定したノードを削除する例を見てみましょう。childNodesプロパティは親要素の中の子ノードにアクセスします。子要素をリストとして返します。=>aは<div>という親ノードなので、親ノードの子ノードの最初の要素を意味しています。以下の箇所でremoveChildメソッドに先ほど作成した子ノードを入れます。このように記述することで子ノードの最初のノードを消すことが出来ます。ボタンを押すごとに要素が1つずつ消えていきます。補足ですが、上の表示結果はchromeで実行したのですが、1個消すごとに2回クリックしないと消えません。これはpタグの間に空白のノードが入っているからです。空白もノードとして設定されているのです。以前、Domツリーについて説明しましたが、ブラウザによりノードの配置は違います。下の図の番号はitemメソッドの引数の番号を示しています。前の例で指定したノードを一つずつ削除する方法について説明しましたが、次の例ではすべてを一気に消す方法について説明します。この例ではfirstchildプロパティを使います。firstchildプロパティは親ノードの中の最初の子ノードを意味します。whileの条件式にfirstchildプロパティが入っているので、子ノードがなくなればnullになり、while文が終了となります。true(まだ何か要素が入っている状態)の間、子ノードを消していきます。以下の状態で「push」をクリックします。結果、以下の通り、一気にすべてを消すことが出来ます。次はgetAttributeメソッドやsetAttributeメソッドについて説明します。プログラムの説明をします。id属性の値が以下のaのノードを取得します=>p要素のid属性の値をxに変更します。setAttributeメソッドは指定の要素ノードに新しい属性を追加したり、指定の要素ノードの属性の値を変更します。a1.getAttribute(“id”)ではidの値を返しますので、「×」が出力されます。指定した属性の値を返します。返します結果は以下の通りです。次の例ではノードを置き替えるreplaceChildメソッドについて説明します。指定の要素の子ノードを別のものに置き換えることが出来ます。以下の状態で「push」をクリックします。結果は先頭に「追加x」が追加されます。次の例ではparentNodeプロパティについて説明します。parentNodeプロパティは親ノードを取得するプロパティです。以下の状態で「push」をクリックします。結果は「猫」が「追加x」に変更されます。