ドキュメントオブジェクト

文章を扱うオブジェクトであるドキュメントオブジェクトを解説します。

ドキュメントオブジェクトは文字を表示するだけでなく、cssのプロパティの変更など様々なことができます。

ドキュメントクラスを活用することでサイトの質をあげることができるでしょう。

文字の表示

かなり基本的な命令である文字の出力命令には

  1. document.write(文字列);
  2. document.writeln(文字列);

があります。指定した文字列が出力されます。ここで、writelnは改行付きで出力されるという特徴があります。例えば、

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
</head>
<body>
<pre>
<script>
var domain=document.domain;
var url=document.URL;
var ref=document.referrer;
var title=document.title;
document.writeln('1行目');
document.writeln('2行目');
document.write('3行目');
document.write('4行目?\n');
document.write('4行目');
</script>
</pre>
</body>
</html>

とすれば、

サンプル

と表示されます。writelnを使うと、自動的に改行が挿入されます。

HTML/CSSの情報を制御する

ドキュメントオブジェクトを使うとHTML/CSSの情報を取得できます。

CSSにはidやclassによりタグに名前をつけていきました。

このidやclassに関する情報は

  1. document.getElementsByClassName(クラス名);
  2. document.getElementById(id名);

idやclassだけでなく、nameやタグに関しても

  1. document.getElementsByName(name名);
  2. document.getElementsByTagName(タグ名);

により取得できます。

以下のように、CSSの情報を読み込んだり、書き換えたりできます。

【index.html】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script type="text/javascript">
function showhide(id){
   if(document.getElementById){
	 document.getElementById('no1').style.display = "none";
	 document.getElementById('no2').style.display = "none";
	 document.getElementById('no3').style.display = "none";
	 document.getElementById(id).style.display = "block";
   }
}
 </script>
</head>
<body>
<p><a href="javascript:showhide('no1')">表示1</a>,<a href="javascript:showhide('no2')">表示2</a>,<a href="javascript:showhide('no3')">表示3</a></p>
<p id="no1" style="display:block;">その1</p>
<p id="no2" style="display:none;">その2</p>
<p id="no3" style="display:none;">その3</p>
</body>
</html>

初期の画面は

サンプル

で表示2をおすと

サンプル

となります。

このHTMLファイルでは、リンクを押すとそのリンクに応じたタグを表示させ、他を非表示にさせています。

CSSのdisplayをnoneにすると非表示になり、blockにするとブロック用となり表示されます。

リンクの

javascript:showhide(‘id名’)

というリンクによりshowhide関数が実行されます。そして、選択したidだけがdisplayプロパティをblockであとはnoneになるようにプログラムをつくってあります。

document.getElementById(‘id名’).style.スタイル名

により、指定したidのスタイルのプロパティを取得できます。

background-colorのような場合は、style.backgroundColorとなります。

style.background-colorではないので注意が必要です。

 

クラスやタグをカウントする

class、name、タグもidと同じように

  1. document.getElementsByClassName(‘クラス名’);
  2. document.getElementsByName(‘name名’);
  3. document,getElementsByTagName(‘タグの名前:p,div,aとか’);

として使用できます。

 

例えば、

a=document.getElementsByTagName(‘div’).length;

のように使えばHTML中のdiv要素の数をカウントできます。

要素の作成

ドキュメントクラスによりimg、divといった要素を生成できます。

例えば、

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
</head>
<script>
function showimg(){
	var img=document.createElement('img');
	img.src='sample.png';
	var insert=document.getElementById('ins');
	document.body.insertBefore(img,insert);
}
</script>
<body>
<p><a href="javascript:showimg()">画像を表示</a></p>
<div id="ins"></div>
</body>
</html>

とすれば

サンプル

となり「画像を表示」をおすと画像が<div id=”ins”>に表示されます。

ドメイン名・URL・以前のURL・タイトルの取得

以下の命令

  1. document.domain
  2. document.URL
  3. document.referrer
  4. document.title

でそれぞれドメイン名・URL・以前のURL・タイトルを取得できます。たとえば、

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
</head>
<body>
<p>
<script>
var domain=document.domain;
var url=document.URL;
var ref=document.referrer;
var title=document.title;
document.write('ドメイン:'+domain+'<br>'+'URL:'+url+'<br>'+'Ref:'+ref+'<br>'+'タイトル:'+title);
</script>
</p>
</body>
</html>

とすれば、

  1. ドメイン:ドメイン名
  2. URL:URL名
  3. Ref:以前のURL名
  4. title:サンプル

と表示されます。

著者:安井 真人(やすい まさと)