JavaScriptおれおれAdvent Calendar 2013の3日目の記事です。

何か要素に対する処理を行う場合はdocument.querySelector()あたりで検索してくるのですが、一部の要素については事前に取得済みだったりします。

<body>を取るならdocument.bodyで

document.bodyには最初から<body>要素が格納されています。個人的にはHTMLElementのインターフェイスを確認するために適当な要素を得る際にこれを使っていたりします。

同様に<head>要素もdocument.headで得る事が出来ます。この二者はHTMLの構文的にも必ず存在するため、事前に確保されているのでしょう。（ちなみにHTMLの文法的には、この二者のタグは省略可能です。その場合でも記述が省略されただけで実際はあるものとして扱われます。）

<html>を取るならdocument.documentElementで

ではHTML文書のルート要素たる<html>要素はというと、document.htmlではなくdocument.documentElementで取得出来ます。ドキュメントツリーの思想的に「ルート要素」なのでちょっと特別扱いです。

HTMLでなくても

特別さをよく味わいたいのなら、HTMLではない文書で試してみると良いでしょう。というわけでSVGです。

SVGのファイルにウェブブラウザーでアクセスして、開発者ツールの類を開いてください。そしてコンソールでdocument.documentElementを入力し、値を確認します。<svg>要素が得られるはずです。一方document.bodyはundefined (Firefox) か null (Chrome, IE)になります。SVG文書には<body>要素がありませんので。

フォームやリンク、フレーム、画像等

文書中の全ての各リソースにアクセスするプロパティが用意されています。

  • document.anchors … 全ての<a>要素のうち、name属性を持つもの
  • document.links … 全ての<a>要素のうち、href属性を持つもの
  • document.images … 全ての<img>要素
  • document.forms … 全ての<form>要素

内容はHTMLCollectionで、配列のようにlengthで数を得、添え字で個別にアクセス出来ます。

大昔のJavaScriptでは使っていたのですが、最近はめっきり見ませんね。

フォーム内のフォーム制御要素

<input>とかそういうのは、<form>要素のオブジェクトからアクセス出来ます。

HTMLFormElementオブジェクト自体が配列風のオブジェクトになっていて、その数もform.lengthで得られます。各フォーム制御要素を得るにはこんな感じです。

var form = document.forms[0];  // <form>要素
var input0 = form[0];  // <input>要素とか

一応、jQueryからやるコードも載っけときます。

var input0 = $('form').prop(0);

ID

要素にid属性を与えた場合、document.getElementById()で検索出来るようになりますが、同時にグローバルオブジェクトとしても登録されます。

つまり<div id="apple">という要素はwindow.appleという形でアクセスする事が可能です。

ただよくわからないんですが、IE 11で試したら<form>下の<input>にIDを与えてもwindow[id]で得られませんでした。<form>下にない場合は得られたのですが。

jQueryで使う場合、セレクター指定より10倍近く高速

jQueryはセレクターだけではなく要素を直接与える事でもjQueryオブジェクトを作成する事が出来ます。これを利用して、$('body')ではなく$(document.body)とする事で高速に要素検索を行う事が出来ます。（というか検索していませんが。）

計測はこちら。

まあそこはあんまり意味ないけどね

0.03ミリ秒の要素検索処理を0.003秒に高速化しました！と言っても大して嬉しくありません。秒間一万回も要素を探すなら有意でしょうが、そんな馬鹿げたコードは捨てるべきです。

参考