第14章　「document」オブジェクト

# **「document」オブジェクト**

***

JavaScriptでは「document」オブジェクトを活用することで、Webページを構
成している```HTML要素へプログラム上から簡単にアクセスできます```、好き
なHTML要素の情報を取得したり、新しくHTML要素を追加するような処理を簡単
に実現できるわけです。

## **1.headやbodyなどのHTML要素を取得する**
「document」オブジェクトには、任意のHTML要素を簡単に取得できるように便
利なプロパティやメソッドが用意されています。使い方も簡単で「document.プ
ロパティ」や「document.メソッド」のように```「 .（ドット演算子） 」```
で連結させて使うのが一般的です。

例えば、「head要素」「body要素」の中身も、documentオブジェクトを使えば
プログラム上から取得することが可能です。
```
//head要素の中身を出力
console.log( document.head );
//body要素の中身を出力
console.log( document.body );
```

この例では、「document.head」と記述することでHTML内の「headタグ」の中
身を取得しています。同じように、「document.body」と記述すると「bodyタ
グ」の中身が取得できるわけです。

このように、取得したい情報を```ピンポイントで指定できるプロパティやメソ
ッドが多く提供されている```のが特徴的です。

## **2.ID属性を持つ要素を取得する:getElementById**
```「getElementById()」メソッド```は、```指定したID属性を持つHTML要素を取得する```ことができるメソッドです。

これにより、特定のHTMLをJavaScriptから書き換えたり、追加するような処理
を簡単に実現することができます。

#### **例**
[sample14-1.html]

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
 <body>
  <p id="sample">Hello world!</p>
  <script>
     console.log(document.getElementById("sample"));
  </script>
 </body>
</html>
```

#### **実行結果**
Hello world!

<br>

この例では、「pタグ」のID属性「sample」を指定した「getElementById("sample")」を使い、pタグの要素を取得しています。
これを活用して、例えば「textContent」プロパティを使ってpタグの文字情報
を書き換えてみましょう！

<br>

#### **例**
[sample14-2.html]

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
  <p id="sample">Hello World!</p>
  <script>
    var id = document.getElementById('sample');
    id.textContent = "こんにちは!";
    console.log( id );
  </script>
</body>
</html>
```

#### **実行結果**
こんにちは!

<br>

この例では、取得したpタグ要素を変数「id」に代入し、そこから
「textContent」プロパティを使って「こんにちは!」という文字列を再代入し
ています。このように記述することで、pタグの中身である```文字列が「Hello World!」から「こんにちは!」に書き換わっている```のが分かります。

## **3.name属性の値を取得する:getElementsByName**
```「getElementsByName()」メソッド```は、文字通り指定した```name属性を持つHTML要素を取得する```ことができるメソッドです。

基本的な考え方は「getElementById()」メソッドの時と同じなのですが、「name属性」はHTML要素に複数存在可能なので取得するデータも複数あるという点に注意が必要です。

#### **例**
[sample14-3.html]

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <input type="hidden" name="greeting" value="Hello" />
    <input type="hidden" name="greeting" value="World" />
    <script>
        var elems = document.getElementsByName('greeting');
        document.write(elems[0].value + "<br>");//<br>改行できます。
        document.write(elems[1].value);
    </script>
</body>
</html>
```

#### **実行結果**
Hello<br>
World

<br>

この例では、Form要素内のinputタグにあるname属性「greeting」をgetElementsByName()メソッドで取得しています。
そのため、「elems[0].value」のように記述して0番目（一番最初に取得した要素）の要素のvalue値を出力しているのが分かります。

## **4.要素を作成する:createElement**
```「createElement()」メソッド```は、任意の```HTML要素```をJavaScriptから```生成する```ことができるメソッドです。

```
var p = document.createElement('p');
var div = document.createElement('div');
var h1 = document.createElement('h1');
```
このように記述することで、それぞれの変数「p」「div」「h1」にHTML要素が
代入されることになるので、以降はJavaScriptからこれらの変数を使って操作
できるわけです。

一般的には「appendChild()」、「removeChild()」などのメソッド及び「firstChild」などのプロパティを活用することになります。

#### **例**
[sample14-4.html]

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>Hello World!</p>
    <script>
        var p = document.createElement('p');
        p.textContent = 'こんにちは!'; //document内のbody要素の中にpタグを挿入する
        document.body.appendChild(p);
        console.log(document.body);
    </script>
</body>
</html>
```

#### **実行結果**
>Hello World!<br>
>こんにちは!<br>

<br>

この例では、createElement()メソッドで「pタグ」を生成し、そこから「textContent」プロパティで文字列を代入しています。さらに、「appendChild()」メソッドを使ってbodyタグ内に生成したpタグを挿入します。

***

>**練習**
>>**問題**[ex14-1.html]

下のようなボタン(onMousedown、onMouseupイベントを利用)を作成してください。
<pre>
<span class="nocode">
<iframe src="javascript: '<!DOCTYPE html>
<html>
<head>
<script>
function create1() {
  var para = document.createElement(&quot;p&quot;);
  para.textContent = &quot;ボタンが押されています！&quot;;
  document.getElementById(&quot;divABC&quot;).appendChild(para);
}
function create2() {
  var para = document.getElementById(&quot;divABC&quot;);
  para.removeChild(para.firstChild);
}
</script>
</head>
<body>
<button onMousedown=&quot;create1()&quot; onMouseup=&quot;create2()&quot;>押してください</button>
<div id=&quot;divABC&quot;></div>
</body>
</html>'" width="800"></iframe>
</span>
</pre>

content

第14章 「document」オブジェクト

第14章　「document」オブジェクト