WEBサイト（サービス）におけるDOMコントロールはAJAXを利用した非同期ページでローカルアプリケーションのような振る舞いを実現できます。
jQueryやJSフレームワークを使ってかなり簡易にこうしたシステムページを作ることは可能ですが、ちゃんとネイティブコーディングできるようにしたい人のために、DOM操作の基本である、Element操作についてまとめておきました。
ちなみに、この記事は、WEBアプリケーション開発を勉強している人向けに書いています。
#1の初回は、ページ内の任意のElementを検索して、取得する命令です。
自分でも開発をしていてたまにど忘れしてしまう事もあるので、その時のアンチョコとして残しておきます。
Elementの基本
Elementは、「要素」や「タグ」や「DOM」と言う風な言葉で説明される場合もあるのですが、どれも基本的には同じ事を指していると考えて問題ありません。
HTMLで構成されているWEBページ（ブラウザでの表示されるスクリプト）は、HTML言語という「タグ」のネスト（階層）で構成されていて、これらの並びや内容、CSSによるデザインを操作して、WEBアプリケーションを作ります。
難しく感じる人は、HTMLタグを操作する事が、WEBアプリケーションの多くの開発の内容になると言う風に理解してもらった方が早いかもしれません。
タグには、見た目で表示されているtextContentや、Attributeという要素、javascriptで操作できるpropertyなどがあり、操作方法もピンからキリまであり、柔軟でスマートに操作できる人が、より質の高いWEBアプリケーションを構築できると考えてもいいでしょう。
その基本となるElement操作をキチンと身につけておく事は、WEBエンジニアとしては必須条件であると言えます。
実際にやってみると非常に簡単な内容なので、デザイナーの方で、「プログラムは苦手」という方でも、一回はトライしてみてはいかがでしょうか？
検索（選択）
DOM構造の中から、任意のElementをピックアップする際の命令。
検索結果で取得する際に、Element単体で取得できる命令と、複数Elementを配列で返す命令がある２パターンあるので、気をつけて使いましょう。
getElementById
- return @ Element
- Summary @ 任意IDのElementを取得（無い場合はnullが返る）
<div id="sample-1"></div>
<div id="sample-2"></div>
<div id="sample-3"></div>
var element = document.getElementById("sample-1");
> <div id="sample-1"></div>
getElementsByTagName
- return @ Array
- Summary @ 任意のタグの一括取得
<div>Sample-1</div>
<span>Sample-2</span>
<p>Sample-3</p>
var elements = document.getElementsByTagName("div");
> <div>Sample-1</div>
getElementsByClassName
- return @ Array
- Summary @ 任意クラスの設定されているElementを一括取得
<div class="sample-1"></div>
<div class="sample-1 aaa"></div>
<div class="sample-2 bbb"></div>
var elements = document.getElementsByClassName("sample-1");
> [
<div class="sample-1"></div> ,
<div class="sample-1 aaa"></div>
]
getElementsByName
- return @ Array
- Summary @ 任意name値を一括取得
<input type="text" name="address" value="tokyo">
<input type="text" name="tel" value="03-1234-5678">
var address = document.getElementsByName("address");
> <input type="text" name="address" value="tokyo">
querySelector
- return @ Element
- Summary @ cssのselectorで指定したelementを取得（複数ある場合は、１つめが返る）
<ol id="sample">
<li class="sample-1">Apple</li>
<li class="sample-2">Orange</li>
</ol>
var apple = document.querySelector("#sample > .sample-1");
> <li class="sample-1">Apple</li>
querySelectorAll
- return @ Array
- Summary @ querySelectorで複数ある場合などの際の一括取得
<ol id="sample">
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ol>
document.querySelectorAll("#sample > li");
> [
<li>Apple</li> ,
<li>Orange</li> ,
<li>Banana</li>
]
firstChild
- return @ Element
- Summary @ 子要素の１番目を取得
<ol id="sample">
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ol>
var element = document.getElementById("sample").firstChild;
> <li>Apple</li>
lastChild
- return @ Element
- Summary @ 子要素の最終要素のみを取得
<ol id="sample">
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ol>
var element = document.getElementById("sample").lastChild;
> <li>Banana</li>
document.body
- return @ Element
- Summary @ bodyタグが返る。
document.head
- return @ Element
- Summary @ headタグが返る。
document.children
- return @ Array
- Summary @ 子要素一式の取得
document.forms
- return @ Array（name値での指定も可能）
- Summary @ ページ内のform要素へのアクセス
document.links
- return @ Array
- Summary @ ページ内のAリンクを一括取得
document.images
- return @ Array
- Summary @ ページ内のimgタグの一括取得
document.scripts
- return @ Array
- Summary @ ページ内のscriptタグの一括取得
エンジニアの皆さんに
この記事で取り上げたElement検索の方法は、似たようなモノもいくつかあり、どれを使うえばいいかという気付きもあるかと思います。
例えば、querySelectorは、もともとネイティブ関数ではなく、外部ライブラリから取り込まれた命令で、古めのブラウザでは動作しない事があります。
Can I useサイトなどで利用できるブラウザバージョンを確認してみる事もスキルアップに繋がりますね。
HTML5以降のブラウザであれば、どの命令も使えると思うので、スマホサイトなどでのWEBアプリケーションであれば、問題ないでしょう。
次回は、エレメントの追加や削除など、柔軟に操作できる機能をまとめておきますので、お楽しみに。
0 件のコメント:
コメントを投稿